标签：style blog http io ar color os 使用 sp
上篇读书笔记系列之：《编写可维护的javascript》读书笔记（上）
上篇说的是编程风格，记录的都是最重要的点，不讲废话，写的比较简洁，而本篇将加入一些实例，因为那样比较容易说明问题。
二、编程实践
1、UI松耦合
第一、将css从javascript中抽离（要改变dom样式数据，应该去操作dom的class名而非dom的style属性，后续要修改此样式只需到对应的css文件中修改而不用修改js文件）；
第二、将javascript从HTML中抽离，比如下面的写法是不好的
<!-- 不好的写法 -->
<input type="button" onclick="doSomething" />
js应该放在外部文件中，方便维护；
第三、避免使用css表达式，严重影响页面性能；
第四、将HTML从javascript中抽离，比如你要动态生成一个N行4列的表格，表头和tbody可以写死在页面里，表体你可能会这样循环生成
// 不好的写法 var str=""; for (var i = 0; i < data.length; i++) { str+="<tr><td>"+ data[i].字段一 +"</td><td>"+ data[i].字段二 + "</td><td>"+ data[i].字段三 +"</td><td>"+ data[i].字段四 +"</td></tr>"; }; $("tbody").html(str);
假如现在要增加一个字段，将表格的列数增加到5列，你要先到html页面修改表头，又要到js里修改js文件……所以，尽量将html从js中分离出去是好的做法，可以在html里面写一个模板，通过js获取模板内容替换变量生成html填充到tbody里面。
2、避免使用全局变量
命名本身就是一件比较困难的事，如果大量使用全局变量，随着代码量不断增加，命名冲突概率随之增高，程序维护成本也随着增高。
3、事件处理
规则1：隔离应用逻辑
什么意思呢？好比电脑要关机，有个关机的程序放在那里，你可以按关机按钮触发关机程序，也可以点开始菜单再选择关机去触发关机程序，这个关机程序是独立出来的。代码也是如此，当点击按钮A或按钮B要做的操作是一样的时候，应该将操作独立写成一个函数，这就是应用逻辑隔离。
规则2：不要分发事件对象
先看一段代码
function handleClick(event){ var popup = document.getElementById("popup"); popup.style.left = event.clientX + "px"; popup.style.top= event.clientY + "px"; popup.className = "reveal"; } document.getElementById("demo").onclick=function(event){ handleClick(event); };
上面这段代码中，event被无节制地分发，它从事件处理函数中传入handClick()，event对象上包含很多信息，而handClick函数内只用到了其中2个而已，该函数并没有标明哪些数据是必要的，假如此时你也要调用这个方法，你必须创建一个evnet对象并将它作为参数传入，而你依然不知道这个方法使用了哪些信息，我们可以做如下修改
function handleClick(x,y){ var popup = document.getElementById("popup"); popup.style.left = x + "px"; popup.style.top = y + "px"; popup.className = "reveal"; } document.getElementById("demo").onclick=function(event){ handleClick(event.clientX,event.clientY); };
4、避免“空比较”
有时候我们需要检测函数的某个参数是否存在，可能会通过判断这个参数是否等于null来判断出参数是否存在
var comtroller = { process:function(items){ if(items!==null){ // 不好的写法 items.sort(); // 执行一些逻辑 } } }
这段代码中，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]来得出结论：
// 判断value是否为数组 function isArray(value){ return Object.prototype.toString.call(value)==="[object Array]"; }
7、检测函数 用typeof即可，可以跨帧使用，返回"function"，在IE8和更早版本的IE中，使用typeof检测DOM节点中的函数（如getElementById（））都返回“Objeac”而不是“function”
8、检测属性
// 不好的写法 if(object[propertyName]){ // 存在属性propertyName } // 不好的写法 if(object[propertyName]！= null){ // 存在属性propertyName } // 不好的写法 if(object[propertyName]！= undefined){ // 存在属性propertyName }
上面这段代码中，假如属性值为假值（false、0、null、undefined）时会出错，判断属性是否存在的最好方法是使用in运算符，in运算符仅仅会简单地判断属性是否存在，而不会去读取属性的值。
var object = { count: 0 } // 好的写法 if( "count" in object ){ // 这里的代码会执行 } // 不好的写法 if( object["count"] ){ // 这里的代码不会执行 }
9、将配置数据从代码中分离出来
什么是配置数据？比如页面中做某个操作失败，需要一个提示语，而不同的操作有不同的提示语，此时整个提示语就是配置数据。应该将配置数据分离出来以参数的形式传进去。
10、抛出自定义错误 throw new Error("错误提示")
在代码执行过程中出错时，如果没有任何提示或是提示比较稀少、隐晦，调试是非常困难的，而抛出自定义错误，就是在有可能出错的地方，加上捕获错误的代码抛出错误，将非常有利于调试。抛出自己的错误可以使用确切的文本供浏览器显示，可以包括出错的行数、函数以及失败原因，有利于快速定位错误原因。
ECMA-262规范指出了7种错误类型
1）Error ： 所有错误的基本类型
2）EvalError ： 通过eval()函数执行代码出错时抛出
3）RangeError ： 一个数字超出了它的边界时抛出，比如试图创建一个长度为-20的数组（new Array(-20)）。
4）ReferenceError： 期望的对象不存在时抛出，比如试图在一个null对象引用上调用一个函数
5）SyntaxError： 语法错误
6）TypeError： 变量不是期望的类型时抛出错误
7）URIError： 给encodeURI()、encodeURIComponent()、decodeURI()、decodeURIComponent()等函数传递格式非法的URI字符串时抛出
这7种错误类型需要熟记。
11、不是你的对象不要动
开发过程中，可能会引用一些javascript类库，你个人不是这些类库的作者，应该遵守3条基本原则
1）不覆盖方法
2）不新增方法
3）不删除方法
12、浏览器嗅探
避免浏览器推断
现在有一种比较流行的判断IE浏览器的方法是
if( document.all ){ // IE浏览器 }
这就属于浏览器推断，这个推断断定document.all只存在于IE浏览器，而实际上Opera的一些版本也支持document.all
做特性检测
我们知道IE9及以下的IE浏览器不支持placeholder属性，当我们要给IE9及以下浏览器模拟placeholder效果时，需要先做特性检测，如果浏览器不支持placeholder属性才用js去模拟
if( !("placeholder" in document.createElement("input")) ){ // 不支持placeholder，需要模拟 }
第二部分完。
by：王美建form：http://www.cnblogs.com/wangmeijian
原创文章，转载请注明出处
《编写可维护的javascript》读书笔记（中）——编程实践
标签：style blog http io ar color os 使用 sp
原文地址：http://www.cnblogs.com/wangmeijian/p/4102679.html
