《JS修炼之道》—— 读后总结

本篇是基于《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属性心智，那么长度就是有限制的，因此最好是在用户输入时，提供一个实时的长度反馈，这点效果可以参考微博等。

之前也整理过源码的实现方式，参考我的github

任务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非常好的文章:有空可以多看看

其他的任务时关于第三方接入的，没啥实际的作用，就不做总结了。