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語句。