《编写可维护的javascript》读书笔记中——编程实践

上篇读书笔记系列之：

上篇说的是编程风格，记录的都是最重要的点，不讲废话，写的比较简洁，而本篇将加入一些实例，因为那样比较容易说明问题。

二、编程实践

1、UI松耦合

　　第一、将css从javascript中抽离（要改变dom样式数据，应该去操作dom的class名而非dom的style属性，后续要修改此样式只需到对应的css文件中修改而不用修改js文件）；

　　第二、将javascript从HTML中抽离，比如下面的写法是不好的

js应该放在外部文件中，方便维护；

　　第三、避免使用css表达式，严重影响页面性能；

　　第四、将HTML从javascript中抽离，比如你要动态生成一个N行4列的表格，表头和tbody可以写死在页面里，表体你可能会这样循环生成

str="" ( i = 0; i < data.length; i+++=""tbody").html(str);

假如现在要增加一个字段，将表格的列数增加到5列，你要先到html页面修改表头，又要到js里修改js文件……所以，尽量将html从js中分离出去是好的做法，可以在html里面写一个模板，通过js获取模板内容替换变量生成html填充到tbody里面。

2、避免使用全局变量

　　命名本身就是一件比较困难的事，如果大量使用全局变量，随着代码量不断增加，命名冲突概率随之增高，程序维护成本也随着增高。

3、事件处理

　　规则1：隔离应用逻辑

　　什么意思呢？好比电脑要关机，有个关机的程序放在那里，你可以按关机按钮触发关机程序，也可以点开始菜单再选择关机去触发关机程序，这个关机程序是独立出来的。代码也是如此，当点击按钮A或按钮B要做的操作是一样的时候，应该将操作独立写成一个函数，这就是应用逻辑隔离。

　　规则2：不要分发事件对象

　　先看一段代码

popup = document.getElementById("popup"= event.clientX + "px"= event.clientY + "px"= "reveal"

document.getElementById(</span>"demo").onclick=<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(event){
    handleClick(event);
};</span></pre>

上面这段代码中，event被无节制地分发，它从事件处理函数中传入handClick()，event对象上包含很多信息，而handClick函数内只用到了其中2个而已，该函数并没有标明哪些数据是必要的，假如此时你也要调用这个方法，你必须创建一个evnet对象并将它作为参数传入，而你依然不知道这个方法使用了哪些信息，我们可以做如下修改

popup = document.getElementById("popup"= x + "px"= y + "px"= "reveal"

document.getElementById(</span>"demo").onclick=<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(event){
    handleClick(event.clientX,event.clientY);
};</span></pre>

4、避免“空比较”

　　有时候我们需要检测函数的某个参数是否存在，可能会通过判断这个参数是否等于null来判断出参数是否存在　　

comtroller =(items!==){

这段代码中，process方法显然希望items是一个数组，然后当items的值为1时，不等于null，依然进入if语句内了，执行到items.sort()就报错了

5、检测原始值（string、number、boolean、undefined、null），typeof就够了

6、检测引用值（Object、Array、Date、Error），引用值也称做对象，一般情况下使用instanceof来检测这个对象的构造器是否为对应的值即可，当跨域检测时，用instanceof检测数组将失败，解决方案是将该对象的原型调用toString()方法，判断返回的字符串是否等于[object Array]来得出结论：

Object.prototype.toString.call(value)==="[object Array]"

7、检测函数用typeof即可，可以跨帧使用，返回"function"，在IE8和更早版本的IE中，使用typeof检测DOM节点中的函数（如getElementById（））都返回“Objeac”而不是“function”

8、检测属性

(object[propertyName]！= (object[propertyName]！= }

上面这段代码中，假如属性值为假值（false、0、null、undefined）时会出错，判断属性是否存在的最好方法是使用in运算符，in运算符仅仅会简单地判断属性是否存在，而不会去读取属性的值。

object =0 ( "count" ( object["count" }

9、将配置数据从代码中分离出来

什么是配置数据？比如页面中做某个操作失败，需要一个提示语，而不同的操作有不同的提示语，此时整个提示语就是配置数据。应该将配置数据分离出来以参数的形式传进去。

10、抛出自定义错误 throw new Error("错误提示")

在代码执行过程中出错时，如果没有任何提示或是提示比较稀少、隐晦，调试是非常困难的，而抛出自定义错误，就是在有可能出错的地方，加上捕获错误的代码抛出错误，将非常有利于调试。抛出自己的错误可以使用确切的文本供浏览器显示，可以包括出错的行数、函数以及失败原因，有利于快速定位错误原因。

ECMA-262规范指出了7种错误类型

1）Error ：所有错误的基本类型