摘要：
HTTP（超文本传输协议：HyperText Transfer Protocol）是浏览器和服务器通过internet进行相互通信的协议，也是网络上应用最为广泛的一种网络协议。HTTP规范由World Wide Web Consortium(W3C)和Internet Engineering Task Force(IETF)进行编制，文档是RFC2616。HTTP1.1是如今比较常用的版本，但是有些浏览器和服务器仍在使用老版本1.0。 HTTP协议由请求和响应构成。浏览器端向特定的URL发送HTTP请求，URL对应的服务器经过处理请求，然后返回HTTP响应。和许多Internet服务一样... 阅读全文
随笔分类 - Front-end
浏览器详谈及其内部工作机制 —— web开发必读
2013-05-05 23:08 by MoltBoy, 2877 阅读, 收藏, 编辑
摘要：
浏览器介绍 如今，浏览器格局基本上是五分天下，分别是：IE、Firefox、Safari、Chrome、Opera，而浏览器引擎就更加集中了，主要是四大巨头：IE的浏览器排版引擎Trident，目前随IE10发布了Trident6.0；Mozilla的排版引擎Gecko，今年4月2号发布了Gecko21预览版，稳定版本为Gecko20；Google Chrome和Apple Safari使用的是WebKit引擎，它已经成为市场占用率最高的排版引擎；另外还有Opera的Presto引擎，不过在今年的2月13号，Opera Software宣布未来产品将以Webkti和V8为主，逐步放弃基于... 阅读全文
面向对象 - javascript创建对象模式总结
2013-05-04 20:22 by MoltBoy, 908 阅读, 收藏, 编辑
摘要：
面向对象（Object-oriented，OO）是如今主流的编程模式，而面向对象又分为（OOA-面向对象分析、OOD-面向对象设计、OOP-面向对象编程），我们常常挂在嘴边都是OOP。通常，面向对象都有类得概念，javascript中没有涉及到类得概念，却有对象的概念。在ECMA-262中把对象定义为：“无序属性的集合，属性值可以为基本值、对象或函数”。实际上，对象可以理解为散列表，就是一组租名值对，其中值可以为数据或者函数。 了解了对象的概念，下一步当然是创建对象。在平日里讨论，经常能听到：“工厂模式”、“组合模式”...等一些关于创建对象的术语。下面的内容就具体讨论各模式的特点及其优... 阅读全文
javascript性能优化总结 —— 编程习惯篇
2013-05-03 21:00 by MoltBoy, 2010 阅读, 收藏, 编辑
摘要：
在google，网页呈现速度慢500毫秒将丢失20%的流量；在yahoo！，慢上400毫秒将丢失5%-9%的流量；在亚马逊（Amazon），慢上100毫秒将丢失1%的交易量...这是速度绝对成败的web时代，天下武学唯快不破，相信没人嫌弃网页打开速度太快吧！ 那么要让网页速度更快，我们应该如何优化，应该保持怎样的编程习惯，让代码运行的更加流畅？在这里，郑重推荐《高性能网站建设指南》和《高性能网站建设进阶指南》，完全掌握这两本书的内容对你的前端生涯将是受益匪浅。 言归正传，javascript是解释型语言，执行速度自然比不上编译型语言，另外，计算机系统分配给浏览器的资源有限，分给web应... 阅读全文
canvas —— javascript实现各种复杂规律图案
2013-04-30 22:27 by MoltBoy, 2342 阅读, 收藏, 编辑
摘要：
在HTML5中新增的元素中，个人最喜欢的就是canvas元素。这个元素负责在页面里设定一个区域，然后在这个区域内通过javascript动态绘制图形。目前大部分浏览器新版本都支持此元素。 canvas元素具备绘图能力的上下文环境，另外还建议了一个名为WebGL的3D上下文，但是目前大部分浏览器对canvas的3D上下文支持不够好，特别是老版本的浏览器，甚至在window xp中缺少支持必要的绘图驱动程序。 那么，今天我们就在2d上下文中，共同探讨下这个非常有意思的新元素。 要使用canvas元素，必须先设置其width和height，默认值分别为300和150。设置的时候有点奇怪，使... 阅读全文
Javascript动画系列之 —— lightbox实现（二）
2013-04-26 21:02 by MoltBoy, 1442 阅读, 收藏, 编辑
摘要：
上次帖子里详细描述了lightbox实现思路，本想将整个原生的lightbox源码放出来，但是觉得留点思考的余地更好。 本文中就贴上淡入淡出和滑动的JS原生代码，通过测试，能兼容IE8、Firefox、Chrome。function bind(fn, context){ //函数绑定，传递context上下文 var args = Array.prototype.slice.call(arguments, 2); return function(){ var innerArgs = Array.prototype.slice.call(arguments); ... 阅读全文
javascript中this对象之 —— 意乱情迷
2013-04-25 23:45 by MoltBoy, 430 阅读, 收藏, 编辑
摘要：
javascript函数中的this对象和其他语言比较起来很很大不同，甚至在严格模式和非严格模式下都有不同。 大多数情况下，this对象是有函数的调用对象决定。在任务执行过程中，this对象不能被修改。ECMAScript 5引入了bind方法来设置调用中的this对象，实际上就是传递上下文，下次有时间，可以具体讨论下bind方法，很多框架都已经实现了，也就是说早就有了实际标准 —— 先上车后买票。 就这么些颇为空洞，下面就使用几个例子function fn(){ return this;}alert(fn() === window); //true 这个例子，结果和原因都比... 阅读全文
斐波那契数列javascript实现 —— 极为有趣的数列（应用极为广泛）
2013-04-24 21:49 by MoltBoy, 953 阅读, 收藏, 编辑
摘要：
function calculateFibonacci(num){ ////算法主体，学习算法的朋友可以自己画画，fibonacci在自然规律中无处不在 return (num === 0 || num === 1) ? num : (arguments.callee(num - 1) + arguments.callee(num - 2));}function doStuff(num, successCallback, errorCallback){ //主体函数 try{ var results = []; for(... 阅读全文
javascript中函数和方法的区别
2013-04-24 16:20 by MoltBoy, 7428 阅读, 收藏, 编辑
摘要：
经常谈论起函数和方法，也常常搞不清楚它们之间的界限，经常把两个混用。首先来看看，两者是如何定义的？ 函数（function）是可以执行的javascript代码块，由javascript程序定义或javascript实现预定义。函数可以带有实际参数或者形式参数，用于指定这个函数执行计算要使用的一个或多个值，而且还可以返回值，以表示计算的结果。 方法（method）是通过对象调用的javascript函数。也就是说，方法也是函数，只是比较特殊的函数。假设有一个函数是fn，一个对象是obj，那么就可以定义一个method： obj.method = fn; obj.method(); ... 阅读全文
彻底理解javascript的回调函数（推荐）
2013-04-24 14:54 by MoltBoy, 62093 阅读, 收藏, 编辑
摘要：
在javascript中回调函数非常重要，它们几乎无处不在。像其他更加传统的编程语言都有回调函数概念，但是非常奇怪的是，完完整整谈论回调函数的在线教程比较少，倒是有一堆关于call()和apply()函数的，或者有一些简短的关于callback的使用示例。 函数也是对象 想弄明白回调函数，首先的清楚地明白函数的规则。在javascript中，函数是比较奇怪的，但它确确实实是对象。确切地说，函数是用Function()构造函数创建的Function对象。Function对象包含一个字符串，字符串包含函数的javascript代码。假如你是从C语言或者java语言转过来的，这也许看起来很奇... 阅读全文
如何让自己的javascript代码具有可维护性？
2013-04-21 20:26 by MoltBoy, 931 阅读, 收藏, 编辑
摘要：
为雅安祈福！！愿好人一生平安！！ 现在的Web程序不再是简简单单文字和图片的排版输出，稍微大点的网站都有成千上万行javascript代码，执行各种复杂的功能提供用户不同的交互体验。往往当你进入一家企业，很多情况并不是让你开发新的web程序，而是让你基于原有的成果开展工作，如果代码不具备可维护性，那么此项工作就会变得相当难以进展。 那么什么是可维护性呢？它具有什么特征呢？ - 易读易懂 —— 不需要原作者解释，就能直接读懂源代码，并能轻松基于这些源码开展下一步工作； - 可扩展 —— 代码的构架能适应未来功能的扩展； - 数据灵活性 —— 改动代码中的某些数据，只需修改少量代码而... 阅读全文
javascript习惯性的细节问题 —— 重谈细节，别只顾优雅
2013-04-17 18:28 by MoltBoy, 611 阅读, 收藏, 编辑
摘要：
晚饭之前，浏览了下博客园，阅读了梦想天空（山边小溪）翻译的《JavaScript初学者应注意的七个细节》的原文，写的非常不错。平常不注意的点点习惯，可能积累到最后成为致命的问题。正所谓，小病不医成大患，一定要防微杜渐。 一、简化代码 这是每个程序员最起码的素养和习惯，随着经验的不断丰富，一定学会回顾总结，写出简洁高效的代码。要想成为杰出的IT人员，忌讳只为完成任务而工作，除非你只是为了混口饭吃！至于如何简化代码，可以坚持阅读行业顶级人士的代码风格和习惯，当然不只是为了简洁代码而做这些工作，懂其然懂其所以然！ 具体如何简化，山边小溪已经列举了部分例子，另外可以灵活地使用“||”-逻辑或... 阅读全文
最简单的手风琴效果 —— 无动画
2013-04-16 20:39 by MoltBoy, 497 阅读, 收藏, 编辑
摘要：
试验CSS效果时，顺便试试这样的效果，居然可以实现类似的手风琴效果，只是不是具体控制，因而没有动画效果！纯属娱乐，毫无技术含量！<html><head> <title></title> <style type="text/css"> body{margin: 0;padding: 0;} table{margin:20px auto;width:730px; hieght:200px;border: #F00 solid 2px;padding: 3px;} table td{width: 50px;height: 阅读全文
Javascript动画系列之 —— lightbox实现（一）
2013-04-15 00:14 by MoltBoy, 652 阅读, 收藏, 编辑
摘要：
随着DOM和动态JS、CSS操作的出现，网页的交互性效果变得越来越强大，而比较明显的体会就是日渐丰富多样的图片查看和浏览方式。貌似印证了某句名言：只有你想不到的，没有你做不到的，当然前提是都在如今的技术规范之内。 那lightbox是什么样的效果，内部的实现原理是什么，总结起来无非这么几点： ①、当点击图片时，就会弹出一个图片覆盖层，而不是直接进入实际图片； ②、图片覆盖层显示之时，一个半透明的灰层覆盖整个页面(opacity)，模糊化被覆盖的页面内容； ③、图片覆盖层会有一些从图片到图片的导航方法。 Lightbox的出现刺激了其他多种类似的图库的发展，这个图库并没有使用任何框... 阅读全文
javascript动画系列之 —— 获取坐标
2013-04-12 16:45 by MoltBoy, 649 阅读, 收藏, 编辑
摘要：
最近公司业务需要，不得不提前原来的计划，提前开始研究无框架的Javascript动画。不使用任何框架，就算实现一个简单的slide和fide都需要大费周章，但感觉乐在其中，毕竟曾经接触过flash开发。 跟flash一样，动画的原理就是由一帧一帧静态画面连贯组成的貌似动态效果，其实放慢足够的倍数，就一张张静态画面。看过胶片式电影的朋友都明白，只要每秒超过24帧，而其间的间隔人眼难以觉察到。关于动画原理，这里就不加赘述了。 想把元素框移动起来，首先要找到元素框的位置，也就是元素框在页面的坐标，不同的参照物有不同的坐标位置。先来普及几个基本概念吧！ offsetWidthclientWi... 阅读全文
javascript表单之 —— 选择框操作方法详解
2013-04-11 15:10 by MoltBoy, 1216 阅读, 收藏, 编辑
摘要：
表单元素的选择框有单选和多选之分，都是通过<select>和<option>元素来创建，多选选择框只须添加multiple特性：multiple="multiple"，建议不要缩写，为更好地兼容xhtml。 选择框既然是表单元素之一，当然会继承表单字段的共有的属性和方法，例如：disable、form、name、readOnly、tabIndex、type、value、focus()、blur()；另外还有共有的表单事件：例如：blur、change、focus。这些共有的属性和方法都具有明显的语义性，所以在这里就不加详解了，着实想不起可以googl 阅读全文
javascript表单之 —— 文本框输入验证详细解读
2013-04-10 18:24 by MoltBoy, 1072 阅读, 收藏, 编辑
摘要：
在前端开发中经常会遇到限制文本框输入特定的字符类型，或者过滤某些字符。而HTML提供的文本框本身没有验证的手段和功能，因此必须使用JS来完成这项功能，完善此项功能还得综合运用事件和DOM接口。废话不多说了，看看如何让普通的文本框变成完美的输入功能控件。 一、屏蔽字符 过滤掉某些不需要出现的字符。例如：手机号码不能包含非数字字符，邮政编码也是如此。响应文本框输入字符操作的是keypress事件，因此，可以通过阻止这个事件的默认行为来屏蔽此类字符的输入。下列代码为只允许用户输入数值：（本文重思路轻代码，都是用DOM0级的事件方式，如需兼容各浏览器的实现代码，请另外联系） elemen... 阅读全文
透过Javascript一些变量定义及简单运算实验看JS内部运行机制
2013-04-07 20:16 by MoltBoy, 430 阅读, 收藏, 编辑
摘要：
非常经典的几道面试题：if(!("a" in window)){ var a = true;}alert(a);以上题目运行结果为“indefined"，其实把”a“看做a是不是更容易理解。变量a在全局作用域定义,而全局作用域（global）变量都是window对象的属性，因而a in window自然为true，剩下的就不用解释了吧！另外，全局变量对象的声明：VO（global）{a:undefined}。举一反三类推，”a“ in top 或者 ”a“ in self呢，结果跟window是一样的，上诉运行环境中，top就是window，而self基本上可以跟 阅读全文
CSS浮动规则详解（推荐）
2013-04-07 00:17 by MoltBoy, 708 阅读, 收藏, 编辑
摘要：
CSS中float是在一系列详细规则控制浮动元素的摆放位置，可以想象成一个氢气球在封闭盒子里漂浮的平面图。具体的规则有如下几点：1、浮动元素的左边（右边）外边界不能超出其包含块的左边（右边）的内边界，绝对不会越位溢出的。什么？什么叫包含块？不知道的朋友到前面几篇帖子看看。2、浮动元素的左边（右边）外边界必须是包含块中之前出现的浮动元素的右边（左边）外边界，请注意前后出现的左右的顺序，也就是说只能挨着先出现的浮动元素的右边边界摆放，除非后出现的浮动元素的顶端在先出现的浮动元素的底端下面。如此，浮动元素之间就不会发生重叠，这也是浮动相比定位的优势所在。另外，浮动元素与其他元素不会发生折叠。3、左浮 阅读全文
简单的几个案例，对动态添加HTML进行了性能比较（包括innerHTML)
2013-03-31 23:06 by MoltBoy, 1015 阅读, 收藏, 编辑
摘要：
在网上查阅了不少关于innerHTML的性能比较，一直只是间接的得到结果，今天就自己动手写了下非常简单的几个动态添加HTML方法的性能比较，当然，这其中的有许多考虑不周的地方，纯粹是为了比较运行时间，并没有考虑内存等资源的消耗，算不上真正的性能比较！下次有时间，进行个完整的性能测试，包括CPU,内存等资源消耗... 废话不多说了，代码里面有动态添加HTML的方法的简单说明，少了几种比较复杂的方法，例如：利用cloneNode（），理论上比直接create性能能提高30%左右，当然不同的浏览器实际测试时间很大不同。下面看看详细的测试代码！<html> <head> ... 阅读全文