Javascript-最佳实践

2018-03-07  本文已影响0人  Tom36

一、可维护性

1、什么是可维护的代码

可维护的代码有一些特征。一般来说，如果说代码是可维护的，它需要遵循以下特点

2、代码约定

var found = false; //布尔值
var count = -1; //数字
var name = ""; //字符串
var person = null; //对象

2、匈牙利标记法
JavaScript 中最传统的匈牙利标记法是用单个字符表示基本类型："o"代表对象，"s"代表字符串，"i"代表整数，"f"代表浮点数，"b"代表布尔型。如下所示：

var bFound; //布尔值
var iCount; //整数
var sName; //字符串
var oPerson; //对象

3、松散耦合

只要应用的某个部分过分依赖于另一部分，代码就是耦合过紧，难于维护。典型的问题如：对象直接引用另一个对象，并且当修改其中一个的同时需要修改另外一个。紧密耦合的软件难于维护并且需要经常重写。

4、编程实践

二、性能

1、注意作用域

随着作用域链中的作用域数量的增加，访问当前作用域以外的变量的时间也在增加。访问全局变量总是要比访问局部变量慢，因为需要遍历作用域链。只要能减少花费在作用域链上的时间，就能增加脚本的整体性能。

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";
}

该函数可能看上去完全正常，但是它包含了三个对于全局document 对象的引用。如果在页面上有多个图片，那么for 循环中的document 引用就会被执行多次甚至上百次，每次都会要进行作用域链查找。通过创建一个指向document 对象的局部变量，就可以通过限制一次全局查找来改进这个函数的性能：

//优化，创建一个指向document对象的局部变量
function updateUI2(){
    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.";
}

二、选择正确的方法

var value = 5;
var sum = 10 + value;
alert(sum);

var values = [5,10];
var sum = values[0] + values[1];
alert(sum);

用变量和数组要比访问对象上的属性更有效率，后者是一个O(n)操作。对象上的任何属性查找都要比访问变量或者数组花费更长时间，因为必须在原型链中对拥有该名称的属性进行一次搜索。简而言之，属性查找越多，执行时间就越长。

//6次属性查找
var query = window.location.href.substring(window.location.href.indexOf("?"));

//优化后，4次属性查找，节省了33%的时间
var url = window.location.href;
var query = url.substring(url.indexOf("?"));

for(var i=0; i<values.length; i++){
    process(values[i]);
}
//修改成减值迭代，将终止条件从value.length 的O(n)调用简化成了0 的O(1)调用
for(var i=values.length-1; i>=0; i--){
    process(values[i]);
}

3、最小化语句数

JavaScript 代码中的语句数量也影响所执行的操作的速度。完成多个操作的单个语句要比完成单个操作的多个语句快。所以，就要找出可以组合在一起的语句，以减少脚本整体的执行时间。这里有几个可以参考的模式。

// 4个语句，很浪费
var count = 5;
var color = "blue";
var values = [1,2,3];
var now = new Date();
// 一个语句
var count = 5,
color = "blue",
values = [1,2,3],
now = new Date();

var name = values[i];
i++;
// 优化后
var name = values[i++];

//用4 个语句创建和初始化数组——浪费
var values = new Array();
values[0] = 123;
values[1] = 456;
values[2] = 789;
//用4 个语句创建和初始化对象——浪费
var person = new Object();
person.name = "Tom";
person.age = 26;
person.sayName = function(){
    alert(this.name);
};
//只用一条语句创建和初始化数组
var values = [123, 456, 789];
//只用一条语句创建和初始化对象
var person = {
    name:"Tom",
    age:26,
    sayName:function(){
        alert(this.name);
    }
};

4、优化DOM交互

在JavaScript 各个方面中，DOM 毫无疑问是最慢的一部分。DOM 操作与交互要消耗大量时间，因为它们往往需要重新渲染整个页面或者某一部分。进一步说，看似细微的操作也可能要花很久来执行，因为DOM要处理非常多的信息。理解如何优化与DOM 的交互可以极大得提高脚本完成的速度。

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));
}

8.} 这段代码为列表添加了10 个项目。添加每个项目时，都有2 个现场更新：一个添加<li>元素，另一个给它添加文本节点。这样添加10 个项目，这个操作总共要完成20 个现场更新。
要修正这个性能瓶颈，需要减少现场更新的数量。一般有2 种方法。第一种是将列表从页面上移除，最后进行更新，最后再将列表插回到同样的位置。这个方法不是非常理想，因为在每次页面更新的时候它会不必要的闪烁。第二个方法是使用文档片段来构建DOM 结构，接着将其添加到List 元素中。这个方式避免了现场更新和页面闪烁问题。请看下面内容：

var list = document.getElementById("myList"),
fragment = document.createDocumentFragment(),
item,
i;
for(i=0; i<10; i++){
    item = document.createElement("li");
    fragment.appendChild(item);
    item.append(document.createTextNode("Item" + i));
}
list.appendChild(fragment);

一旦需要更新DOM，请考虑使用文档片段来构建DOM结构，然后再将其添加到现存的文档中。

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

var images = document.getElementsByTagName("img"),
i,
len;
for(i=0,len=images.length; i<len; i++){
    //处理
}

这里的关键在于长度length 存入了len 变量，而不是每次都去访问HTMLCollection 的length属性
编写JavaScript 的时候，一定要知道何时返回HTMLCollection 对象，这样你就可以最小化对他们的访问。发生以下情况时会返回HTMLCollection 对象：
• 进行了对 getElementsByTagName() 的调用；
• 获取了元素的 childNodes 属性；
• 获取了元素的 attributes 属性；
• 访问了特殊的集合，如document.forms、document.images 等。

三、部署

……

上一篇下一篇

猜你喜欢

热点阅读