JavaScript程式碼規範和效能整理

1. 效能

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

• 避免全域查找

Js效能最佳化最重要的就是注意全域查找，因為作用域的查找是先找局部作用域在沒有找到之後在去上一級作用域查找直到全域作用域，所以全域作用域查找的效能消耗肯定要比本函數局部作用域的消耗量大。舉個例子：

function setInnerHtml(){  var pDom=doucument.getElementsByTagName(“p”);  for(var i=0,len=pDom.lemgth;i<len>
<p>
 
</p>
<p style="margin-left:30px;">
這段程式碼循環調用了doucument.getElementByid(“dom”)，而在循環外只執行了一次doucument所以沒必要將doucument賦值局部變量，而是把循環裡面的賦值為局部變量，每次循環就不用再去找全域的doucument物件。
</p>
<pre class="brush:php;toolbar:false">function setInnerHtml(){  var domhtml= doucument.getElementByid(“dom”).innerHtml;  var pDom=doucument.getElementsByTagName(“p”);  for(var i=0,len=pDom.lemgth;i<len>
<p>
 
</p>
<p style="margin-left:30px;">
原則就是當要多次調用全域物件的時候特別在循環中，最後將全域物件賦值到局部變數中，當然這種在幾十次的呼叫上效能差異不會很明顯，但作為一個程式設計師既然有效能優化的寫法還是盡量做。
</p>
<ul class=" list-paddingleft-2">
<li>
<p>
避免with語句
</p>
</li>
</ul>
<p style="margin-left:30px;">
現在基本上不會用到這個語句了，就不多說。
</p>
<ul class=" list-paddingleft-2">
<li>
<p>
避免不必要的屬性查找
</p>
</li>
</ul>
<p style="margin-left:30px;">
簡單說就是變數存值，呼叫這個變數的效能消耗是最小的，而物件的屬性的取值的效能消耗相對多一些。比如：
</p>
<pre class="brush:php;toolbar:false">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语句。