JavaScript代码的编写细节

1. 给父节点绑定事件，而不是每一个子节点。delegate 方法；
2. 对要进行操作元素隐藏，构造好DOM结构，加入在show处理。
3. 减少直接对dom节点的多次操作。document.createDocumentFragment
4. 减少全局变量的重复引用：
        function createChildFor(elementId){
            var doc = document, //store in a local variable
            element = doc.getElementById(elementId),
            newElement = doc.createElement("div");
            element.appendChild(newElement);
        }

        //用一个临时变量存放。
        var c = _global.a.b.c;

5. IE6 中，数组join('') 操作优于大量字符串+操作。

6. 尽量减少css样式出现在js的代码里面。更改样式，请用定义class来代替，只针对class操作。
        例如：
            element.style.color = "red";
            element.style.left = "10px";
            element.style.top = "100px";
            element.style.visibility = "visible";
        or
            element.style.cssText = "color: red; left: 10px; top: 100px; visibility: hidden";

        方案：.reveal {color: red;left: 10px;top: 100px;visibility: visible;}

7. 分离事件监听函数、事件处理函数。不传递不必要的event对象：

        var MyApplication = {
            handleClick: function(event) {
                this.showPopup(event.clientX, event.clientY);
            },

            //这里函数的处理逻辑，只是跟参数值有关，不应该牵扯到UI关联的Event事件。
            showPopup: function(x, y) {
                var popup = document.getElementById("popup");
                popup.style.left = x + "px";
                popup.style.top = y + "px";
            }
        };

        // 这里只是定义了事件的处理函数，真正的处理逻辑不要同时写到这里。
        addListener(element, "click", function(event) {
            MyApplication.handleClick(event); // this is okay
        });

        //如此一来，重用showPopup 函数就成为了可能：
        MyApplication.showPopup(10, 10);

8. 关于属性(不是属性值)存在判断，
        if(typeof obj.a){} // wrong.
        if(obj.a){} // wrong.
        if(obj.a != null){} // wrong.    
        if(obj.a != undefined){} // wrong.    

        //为什么？假如:
        var obj = { a: null, b:0, c:"",d:undefined};

        //事实上，上述的判断都是值判断，不合我们的要求。正确的判断：
        if("a" in obj){}    //true

       // 或者是
        if(obj.hasOwnProperty("a")){} //true

       // 注意：对于IE6/7/8, DOMElement 对象是不会继承 js原生对象Object的hasOwnProperty方法。

9.  不要重写原生对象、方法，包括直接扩展方法。
        事实上，因为这些对象、方法都不是你来维护的，它们的更新超出你的控制。

        一种替代方法是门面设计模式——把原生的东西包起来，例如jQuery对象。


        Array.prototype.index = function(){} // 不赞成

        /**
        * @param arr {Array} 数组对象
        */
        function MyArray(arr){
            this.arr = arr;
        }
        MyArray.prototype.index = function(){};

        var myArray = new MyArray([...]);
        myArray.index()

        ECMAScript 5草案中新增了对象的加锁，可以从根本上防止这一类错误的。

内容来自：《Maintainable JavaScript》