《javascript高级程序设计》笔记（二十四）

浏览数：21 / 时间：2015年06月08日

最佳实践

（一）可维护性

1.什么是可维护的代码

可理解性直观性可适应性可调适性

2.代码约定

①可读性

?缩进

?注释每个函数和方法——都应该包含一个注释，描述其目的和用到的算法。陈述事先的假设如参数代表什么，函数是否有返回值。

大段代码——前面应该放一个描述任务的注释

复杂的算法——解析是如何做的

Hack

②变量和函数的命名

?变量名应该为名词

?函数名应该以动词开始，如getName()，返回布尔值的函数一般以is开头，如isEnable()。

?变量和函数应使用合乎逻辑的名字。

③变量类型透明

?初始化，如保存布尔值的变量应该初始化为true或者false

?使用匈牙利标记法

?使用类型注释

3.松散耦合

?解耦HTML/Javascript

javascript插入数据时，尽量不要直接插入标记。进行Ajax请求并获取更多要显示的HTML。

?解耦CSS/Javascript

通过动态更改样式类而非特定样式。

//CSS对javascript的松散耦合
element.className = "edit";

?解耦应用逻辑/事件处理程序

将应用逻辑和事件处理程序分离，两者分别处理各自的东西。

○不要将event对象传给其他方法；只传给自event对象中所需的数据；

○任何在应用层的动作都应该可以在不执行任何事件处理程序的情况下进行；

○任何事件处理程序都应该处理时间，然后将时间转给应用逻辑

4.编程实践

①尊重对象所有权

②避免全局量

最多创建一个全局变量，让其他变量和函数存在其中。

//两个全局量——避免
//name覆盖了window.name属性
    var name= "nima";
    function   sayName(){
      alert(name);
    }


//一个全局量——推荐
     var MyApplication = {
           name: = "nima";
           sayName = function() {
                alert(this.name);
           }
     }

命名空间包括创建一个用于放置功能的对象。

③避免与null进行比较

?如果值应为一个引用类型，使用instanceof镇政府检查其构造函数

?如果值应为一个基本类型，使用typeof检查其类型

?如果是希望对象包含某个特定的方法名，使用typeof操作符确保指定的方法存在于对象

④使用常量

重复值——任何在多出用到的值都应该抽取为一个常量。这也包含CSS类名。

用户界面字符串——任何用于显示给用户的字符串，都应被取出来以方便国际化。

URL——推荐用一个公共地方存放所有的URL。

任意可能会更改的值

（二）性能

1.注意作用域

①避免全局查找

通过创建一个指向ducoment对象的局部变量，可以通过限制一次局部查找来感觉函数的性能：

//将ducoment对象存到本地的doc对象，然后在余下的代码中替换原来的document，只有一次全局查找
function updateUI(){
    var doc  = document;
    var imgs = doc.getElementBytagName("img");
    for  (var i = 0, len = imgs.length;i < len; i++){
          imgs[i].title = doc.title + "imgs" + i;
    }
    var msg = doc.getElementById("msg");
    msg.innerHTML = "Updata complete";
}

②避免with语句

with语句会创建自己的作用域，因此增加其中执行的代码的作用域的长度。大多数情况下，可以用局部变量完成with语句的事情。

2.选择正确方法

①避免不必要的属性查找

对象上的任何属性查找都要比访问变量或数组花更多时间，因为必须在原型链中拥有该名称的属性进行一次搜索。

②优化循环

减值迭代简化终止条件简化循环体使用后测试循环

③展开循环

如果数组的长度总是一样，对每个元素都调用process()可能更好。

//消除循环
process(value[0]);
process(value[1]);
process(value[2]);

④避免双重解释

避免出现需要按照javascript解释的字符串，当使用eval()函数或者Function的构造函数或者使用setTimeout()传一个字符串参数会出现双重惩罚。

//某些代码求值
eval("alert(‘Hello world!‘)");
//修正
alert(‘Hello world!‘);

//创建函数
var sayHi = new Function("alert(‘Hello world!‘)");
//修正
var sayHi = function() {
      alert(‘Hello world‘);
}

//设置超时
setTimeout("alert(‘Hello world!‘)",500);
//修正
setTimeout (function() {
      alert(‘Hello world!‘);
}, 500);

⑤性能的其他注意事项

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

3.最小化语句数

①多个变量声明

    //1个语句代替4个语句
    var  count = 5,
           color = "blue",
           values = [2,3],
           now = new Date();

②插入迭代值

var name = values[i];
i++;

//修正——自增操作符是后缀运算符
var name = values[i++];

③使用数组和对象字面量

尽量使用数组和对象的字面量表达

var = values = [1,2,3];

var person = {
      name : "nima",
      age : 29,
      sayName : function() {
          alert(this.name);
      }
};

4.优化DOM交互

①最小化现场更新

减少现场更新的数量，可以将列表从页面移除，最后进行更新，最后再将列表插回到同样的位置，但这个方法不是很好。第二个方法是死后有文档片段构建DOM结构，接着讲其添加到List元素、

②使用innerHTML

对于大的DOM更改，使用innerHTML要比使用标准DOM方法创建同样的DOM结构快得多。

使用innerHTML的关键在于最小化调用它的次数。

③使用事件代理

④注意HTMLCollection

最小化访问HTMLCollection的次数可以极大改进脚本的性能，也许优化HTMLCollection访问最重要的是循环，将长度计算移入for循环的初始化部分。

//添加了image变量，保存了以前的图像，之后在循环内没有理由再访问images的HTMLCollection。
var imgs = document.getElementByTagName("img"),
      image,
      i,len;

for (i=0,len=images.length;i < len; i++) {
     image = image[i];
     //处理
}

发生以下情况会返回HTMLCollection对象。

?进行了对getElementByTagName()的调用

?获取了元素的childNodes属性

?获取了元素的attributes属性

?访问了特殊的集合，如document.forms、document.images等。