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

上篇读书笔记系列之：《编写可维护的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：王美建 from：http://www.cnblogs.com/wangmeijian

原创文章，转载请注明出处