本篇是基于《JS修炼之道》的记录性与总结性的文章，这本书从多种框架的角度，讲述了JS开发中的一些实用技巧。
比如Prototype，JQuery，Mootools，YUI，Dojo，Ext，不过我个人仅仅会点JQuery而已，因此也就专门只看JQuery的部分了。
任务1 动态选择方法及属性
由于方法在js中也是一种属性，因此可以使用属性的方法来调用方法：
var test = {a:func,b:20};
test.a();
test.b;
或者
test[a]();
test[b];
使用下面的方式的好处是，如果需要做逻辑判断，可以直接在下标中进行：
if(isTrue){
test.a();
}else{
test.b();
}
可以直接写成：
test[isTrue?a:b]();
是不是很简洁呢？
任务2 通过模块实现代码访问控制
由于JS中未使用var声明的变量都会自动提升为全局变量，为了避免全局变量过多导致的性能问题，可以使用模块化的方法，把变量声明在某个匿名函数中，由于变量都是函数级别提升的，因此不会溢出到全局。
(function(){
//这里声明的变量只有该函数才能访问
})();
任务3 使用可选、可变、命名参数
在JS中参数的定义是很随意的，既无需定义类型的定义，也不需要在使用时按照规定的参数进行设置。
因为JS中使使用arguments对象保存参数，如果在函数声明的时候，添加了参数，就相当于多了一个参数的引用而已。
function xxx(a,b){
for (var index = 1, len = arguments.length; index < len; ++index) {
alert(arguments[index]);
}
}
//可以这样使用
xxx(a,b,c);
//参数c在函数内部，可以通过遍历arguments得到。
//当然xxx(a)，也不会出错....只是c是undefined而已
任务4 获得DOM元素的引用
ES中已经定义了一些关于元素引用的方法，比如document.getElementById()，但是这种风格显得有些冗长，因此很多的框架都提供了元素引用的封装，就拿Jquery来说，就提供了：
基于ID的引用、基于CLASS的引用、基于标签的引用 以及 基于前三种的查找引用等等。
任务5 动态修饰内容
很多框架都封装了一些基于CSS的修改方法，比如Jquery支持css或者attr等来修改DOM元素的样式。
任务6 修改元素的内容
原生的JS支持InnerHtml和outHtml等方法，Jquery也对其进行封装：
比如
val()可以获得控件的值 html()可以获得内部的Html text()可以获得文本
等等
任务7 DOM加载完成后加载脚本
window.load()方法会在DOM加载全部加载完成后执行，包括图片等文件，这就会导致加载的时间很长。而且该方法之能定义一次，这对于用户来说是不能满足需求的。
因此很多框架都提供了相应的方法，比如jquery:
$(function(){})或者$.ready(function(){})
任务8 监听以及停止监听事件
多数的框架都提供了事件监听的机制，比如on进行监听，off接触监听。以前的Jquery版本使用的是bind和unbind。
还有live对未来将会出现的元素事件进行监听。
任务9 利用事件委托
在编写前端代码时，应该尽量优先使用事件委托机制，而且是相对最近的事件委托。
由于事件的绑定都是消耗性能的，如果你有一个表格，想要给表格中的每一行绑定事件，难道要循环给每个tr绑定事件？那么未来添加一行，再绑定一个事件？
这样做肯定是不可取的，此时就应该使用事件委托，给父级的元素绑定事件，然后捕获event.target
$('父级').click(function(e){
//e.target是真正的触发元素}
)
需要注意的是，并不是所有的事件都能冒泡，比如blur和focus就无法冒泡。（自己踩过的坑，只怪基础不扎实）
任务10 将行为和自定义事件解耦
最好将事件与DON元素分离，然后通过bind等方式进行绑定。
这样既方便管理代码，也使得事件的绑定更为灵活。
任务11 模拟后台处理
由于JS是单线程的，可以通过setTimeout()和clearTimeout()模拟多线程。
比如一个方法要执行很长的时间，如果不采取任何的行动，可能会造成页面的卡顿。那么就可以把任务拆分成多个部分，使用setTimeout()进行分段执行，这样在每段的间隙，还可以处理其他的请求。
相当于模拟了多线程机制。
任务12 打造漂亮的tooltip
这个属于易用性的技巧了，tooltip现在也有很多开源的UI框架，没必要自己再去写了。
任务13 制作友好的弹窗
个人感觉Bootstrap就足够用了。
任务14 预载入图片
预载入图片有很多中方法：
1 使用动态的js脚本加载图片
2 使用CSS先隐藏已经加载的图片
任务15 创造光箱效果
这种特效在很多网站中还是很常用的，Jquery中的FancyBox可以帮助你快速的达到目的
任务16 实现无限翻页
前两天刚刚总结并且实践了下无限翻页，最主要的还是要理解各种高度和宽度。
任务17 在载入时保持显示区域
这就需要保证滚动条想对的位置了
任务18 暂时禁用提交按钮
有的时候表单的数据需要一定的时间准备，此时用户如果点击提交可能会造成重复提交，或者一次提交出错。
为了避免这些问题，在表单没有完成必填项时，应该禁用提交按钮
任务19 提供输入长度反馈
如果输入框使用了maxlength属性心智，那么长度就是有限制的，因此最好是在用户输入时，提供一个实时的长度反馈，这点效果可以参考微博等。
任务20 同时选择或者反选多个checkBox
一般来说提供一些批量操作对于易用性还是有不少帮助的。
比如：
<input type="checkbox" name="items" alue="1" /> 1 <input type="checkbox" name="items" alue="2" /> 2 <input type="checkbox" name="items" alue="3" /> 3 <input type="checkbox" name="items" alue="4" /> 4
对应的的操作为：
//全选
$(xx).click(function(){
$("[name=items]:checkbox").attr("checked",true);
})
//全不选
$(xx).click(function(){
$("[name=items]:checkbox").attr("checked",false);
})
//取反
$(xx).click(function{
$("[name=items]:checkbox").each(function(){
this.checked = !this.checked;
})
})
任务21 表单的验证
CSS属性中有required，给必填项添加样式。
任务22 表单验证：进阶技巧
对于更复杂的一些表单控件，比如数字和邮箱，可以通过正则进行校验
任务23 表单验证：高级技巧
利用Ajax可以实时的对表单进行校验，、
任务24 在表单中提供tooltip
任务25 自动完成输入
这需要在控件初始化前，提供一些预设的值，实现的方式可以是在页面加载的时候请求控件的对应的信息，也可以请求某个json文件，把提示的信息存储在JSON中。
任务26 使用动态多文件上传
书中给出的方式是单个文件上传按钮上传后，隐藏对应按钮。然后添加下一个文件....最后搜集所有的上传信息统一提交。
任务27 读取以及写入cookie
cookie是保存在客户端的一些信息，因此存在一定的风险。
它不适合保存过于重要的数据，（否则你应该使用一些加密手段）
它保存的数据量比较小，只能有4KB的大小。
它有时候可能不可用，因为受制于浏览器的限制，有的浏览器可能设置了cookie相关的限制。
一般框架都会提供相应的操作
任务28 通过ajax加载内容
异步变成给浏览器带来了一次历史性的变革。而原生的ajax浏览器兼容并不好，可以直接使用框架封装的ajax，方便又快捷。
例如Jquery的$.ajax();
任务29 使用JSON
JSON是一种基于js的文档型数据类型，它扁平化没有任何固定的闲置。现在很多的框架都把它作为数据传输的基本格式，比如ES。
任务30 使用JSON-P
由于普通的ajax请求会出现一些跨域问题，使用JSON-P可以有效的解决跨域限制。
看过一篇讲解JSON-P非常好的文章:有空可以多看看
其他的任务时关于第三方接入的，没啥实际的作用，就不做总结了。
本文转自博客园xingoo的博客，原文链接：《JS修炼之道》—— 读后总结，如需转载请自行联系原博主。