《js高级程序设计》之最佳实践(笔记)

一、可维护性

松散耦合

1.解耦HTML/JS
2.解耦CSS/JS
3.解耦应用逻辑/事件处理程序

编程实践

1.尊重对象所有权
2.避免全局量

//before：
   var name='Jon';
    function sayName(){alert(name)};
//after:
    var myApplication={
        name:'Jon',
        sayName:function(){alert(this.name)}
}

3.避免与null进行比较
4.使用常量

a. 重复值 b.用户界面字符串 c.URLs d.任意可能会更改的值

二、性能优化

注意作用域
1.避免全局查找

//before:
    function updateUI(){
        var imgs=document.getElementsByTagName('img');
         for(var i=0,len=imgs.length;i<len;i++){
            imgs[i].title=document.title+'image'+i;
       }    
        var msg=document.getElementById('msg');
        msg.innerHTML='Update complete';

}
//after:
    function updateUI(){
        var doc=document;
        var imgs=doc.getElementsByTagName('img');
        for(var i=0,len=imgs.length;i<len;i++){
            imgs[i].title=doc.title+'image'+i;
       }    
        var msg=doc.getElementById('msg');
        msg.innerHTML='Update complete';
}

ps: 通过console.time/timeEnd 测试并没有区别显现

2.避免with语句

选择正确的方法

1.避免不必要的属性查找

O(1) 常量 O(n)线性 O(logn) 对数 O(n2)平方

//before: 
    var query=window.loaction.href.substring(window.location.href.indexOf('?'))
//after:
    var url=window.loaction.href;
    var query=url.substring(url.indexOf('?'));

2.优化循环

a. 减值迭代 b.简化终止条件 c. 简化循环体 d. 使用后测试循环

3.展开循环
Duff 装置
4.避免双重解释
5.性能的其他注意项

原生方法较快
Switch语句较快
位运算符较快

最小化语句数

1.多个变量声明

var a=1,b=2,c=3;

2.插入迭代值

//before
var name=values[i];i++ 
//after
var name=values[i++]

3.使用数组和对象字面量

//before:
var arr=new Array();
arr[0]=1;
arr[1]=2;
arr[2]=3;
//after:
var arr=[1,2,3]

优化DOM交互

1.最小化现场更新

//before:
var list=document.getElementById('myList'),
        item,
        i;
for(i=0;i<10;i++){
    item=document.createElement('li')
    list.appendChild(item)
    item.appendChild(document.createTextNode('item'+i))
}
//after:
var list=document.getElementById('myList'),
        fragment=document.createDocumentFragment(),
        item,
        i;
for(i=0;i<10;i++){
    item=document.createElement('li')
    fragment.appendChild(item)
    item.appendChild(document.createTextNode('item'+i))
}
list.appendChild(fragment)

2.使用innerHTML
上述代码可优化为：

var list=document.getElementById('myList'),
       html='',
        i;
for(i=0;i<10;i++){
    html+="<li>Item"+i+"</li>"
}
list.innerHTML=html;

3.使用事件代理
4.注意HTMLCollection