JavaScript代码规范和性能整理

1. 性能

Js在性能方面有多要注意的地方：

• 避免全局查找

Js性能优化最重要的就是注意全局查找，由于做用域的查找是先找局部做用域在没有找到以后在去上一级做用域查找直到全局做用域，因此全局做用域查找的性能消耗确定要比本函数局部做用域的消耗大。举个例子：

function setInnerHtml(){

  var divDom=doucument.getElementsByTagName(“div”);

  for(var i=0,len=divDom.lemgth;i<len;i++){

    divDom.innerHTML=doucument.getElementByid(“dom”).innerHtml+I;

}

}

 

这段代码循环调用了doucument.getElementByid(“dom”)，而在循环外只执行了一次doucument因此不必将doucument赋值局部变量，而是把循环里面的赋值为局部变量，每次循环就不用再去查找全局的doucument对象。

function setInnerHtml(){

  var domhtml= doucument.getElementByid(“dom”).innerHtml;

  var divDom=doucument.getElementsByTagName(“div”);

  for(var i=0,len=divDom.lemgth;i<len;i++){

    divDom.innerHTML= domhtml +I;

}

}

 

原则就是当要屡次调用全局对象的时候特别在循环中，最后将全局对象赋值到局部变量中，固然这种在几十次的调用上性能差别不会很明显，但做为一个程序员既然有性能优化的写法仍是尽可能去作。

• 避免with语句

如今基本不会用到这个语句了，就很少说。

• 避免没必要要的属性查找

简单说就是变量存值，调用这个变量的性能消耗是最小的，而对象的属性的取值的性能消耗相对多一些。好比：

var query=window.location.href.subtring(window.location.href.indexOf(“?”));

 

这段代码有6次属性查找效率特别很差，最好改成：

var url=window.loaction.href;

var query=url.substring(url.indexOf(“?”));

 

这样优化就效率提升了不少。

• 优化循环

1)         减值迭代：大多数循环都是从0开始增长循环，在不少状况下从最大值减值循环效率更高。

2)         简化终止条件：因为每次循环都会去判断终止条件，因此简化终止条件也能够提升循环效率。

3)         简化循环体：循环体是执行最多的，因此要保证循环体的优化。

• 避免解析js代码字符串

在js代码中解析js代码字符串时必须从新启动一个解析器来解析代码，这样形成比较大的性能消耗，因此尽可能避免好比eval函数，function构造js代码字

符串函数，setTimeout传字符串的状况。

• 原生方法较快，尽可能用原生方法。
• Switch语句较快。
• 位运算符较快。

     2. 代码规范

• 代码注释：

1)         函数和方法：在每一个函数或方法都应该包含注释说明函数的功能，输入输出。

2)         复杂的算法：在复杂的算法中要加入注释，好让人理解算法的逻辑思路。

3)         Hack：兼容性代码上也要加入注释说明。

4)         大段代码：用于完成单个任务的多行代码应该在前面放一个描述任务的注释

• 解耦HTML/JavaScript

Html是结构成，js是行为层，他们天生须要交互，咱们在写代码的时候应该尽可能让html和js的关联度减少，有些方法会让他们的过于紧密的耦合，好比：js在html页面中script标签中声明js代码、在html标签中绑定onclick事件、在js改写html代码都会形成html和js过于紧密的耦合。

Html呈现应该尽量和js保持分离，当js用于插入数据时，尽可能不要直接插入标记，通常能够在页面中直接包含并隐藏标记，而后等到整个页面渲染好以后，就能够用js显示该标记。

将html和js解耦能够在调试过程当中节省时间，更加容易肯定错误的来源，也减轻维护难度。

• 解耦css/JavaScript

JavaScript和css也是很是紧密相关的，js常常对页面的样式作动态修改。为了让他们的耦合更松散，能够经过js修改对应的class样式类。

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

在实际开发中咱们常常在一个事件函数出来将要处理的全部代码都放在这个事件中，例如：

function handleKeyPress(event){

   event=EventUtil.getTarget(event);

   if(event.keyCode===13){

var target=EventUtil.getTarget(event);

var value=5*parseInt(target.value);

if(value>10){

 document.getElementById(“error-msg”).style.display=”block”;

}

}

}

 

这里就是把逻辑处理代码和事件处理代码放到一块儿，这样会让调试很差调试，维护难度变高，并且要是忽然修改要新增长一个事件作一样相似的逻辑处理，那就要复制一份逻辑处理代码到另外一个事件函数中。较好的方法是将应用逻辑和事件处理程序分离开。例如：

function validateValue(value){

 value=5*parseInt(value);

 if(value>10){

 document.getElementById(“error-msg”).style.display=”block”;

}

}

function handleKeyPress(event){

  event=EventUtil.getEvent(event);

  if(event.keyCode===13){

   var target=EventUtil.getTarget(event);

   validateValue(target.value);

}

}

 

这样事件处理和逻辑处理就分离开了，这样作有几个好处，可让你更容易更改触发特定过程的事件，其次能够在不附加到事件的状况下测试代码，使其更易建立单元测试或是自动化应用流程。

事件和应用逻辑之间的松散耦合的几条原则：

1. 勿将event对象传给其余方法；只传来着event对象中所须要的数据；
2. 任何能够在应用层面的动做都应该能够在不执行任什么时候间处理程序的状况下能正常运行。
3. 任什么时候间处理程序都应该处理事件，而后将处理转交给应用逻辑。

• 避免全局变量

这样会让脚本执行一致和可维护，最多建立一个全局变量。相似jQuery同样，因此方法属性都在$对象当中，避免对全局变量形成过多的污染。

• 尽可能使用常量

数据和使用它的逻辑进行分离要注意一下几点：

1.  重复值
2. 用户界面字符串
3.  url
4. 任意可能会更改的值

• 其余优化

1. 多变量声明时用一条语句逗号隔开声明
2. 对dom的操做的优化
3. 对dom进行html代码插入尽可能在最后一次添加到dom对象中。
4. innerHTML的效率要比appendChild的效率高，觉得innerHTML会建立一个HTML解析器，而后使用内部的DOM调用来建立DOM结构，而非基于JavaScript的DOM调用，因为内部方法是编译好的而非解释执行，因此执行快的多。
5. 使用事件委托减小绑定的事件数量。
6. 尽可能少用到返回HTMLCollection语句。