JavaScript最佳實踐二

避免多層嵌套

多層嵌套會降低易讀性

</blockquote>

在循環中嵌套循環是一個不好的做法，同時還要維護多個迭代變量（i,j,k,l,m…）。

function renderProfiles(o){ var out = document.getElementById('profiles'); 
for(var i=0;i<o.members.length;i++){ var ul = document.createElement('ul'); 
    var li = document.createElement('li');
      li.appendChild(document.createTextNode(o.members[i].name)); 
    var nestedul = document.createElement('ul'); 
    for(var j=0;j<o.members[i].data.length;j++){ 
    var datali = document.createElement('li');
         datali.appendChild( document.createTextNode(
               o.members[i].data[j].label + ' ' + 
               o.members[i].data[j].value
            )
         );
         nestedul.appendChild(detali);
      }
      li.appendChild(nestedul);
   }
   out.appendChild(ul);
}

你可以避免多層嵌套，使用特定的方法在循環中完成循環：

function renderProfiles(o){ var out = document.getElementById('profiles'); 
for(var i=0;i<o.members.length;i++){ var ul = document.createElement('ul'); 
var li = document.createElement('li');
      li.appendChild(document.createTextNode(data.members[i].name));
      li.appendChild(addMemberData(o.members[i]));
   }
   out.appendChild(ul);
} 
function addMemberData(member){ 
var ul = document.createElement('ul'); 
for(var i=0;i<member.data.length;i++){ var li = document.createElement('li');
      li.appendChild( document.createTextNode(
            member.data[i].label + ' ' +
            member.data[i].value
         )
      );
   }
   ul.appendChild(li); return ul;
}

想像一下不好的編輯器和小屏幕。

優化循環

循環在JavaScript中很消耗性能

</blockquote>

好多時間浪費在做無用功。

不要在每次循環時去讀取數組長度，應該將其存儲在另一個變量中。

var names = ['George', 'Ringo', 'Paul', 'John']; for(var i=0;i<names.length;i++){
   doSomethingWith(names[i]);
} 

優化：

var names = ['George', 'Ringo', 'Paul', 'John']; for(var i=0,j=names.length;i<j;i++){
   doSomethingWith(names[i]);
} 

避免在循環中進行過多的計算，包括正則表達式和先前的DOM操作。

你可以在循環中創建DOM節點，但是請不要在其中進行插入文檔操作。

盡可能少操作DOM

如果你可以避免，那就不要進行DOM操作

</blockquote>

原因：首先DOM操作很耗費資源同時在不同瀏覽器中總有一些問題。

方法：自己寫或者使用別的工具來進行數據到HTML的轉化。

找到盡可能多的數據然后一次渲染完。

不要屈服于瀏覽器的特性

不要依賴瀏覽器的古怪行為并且希望都兼容。

</blockquote>

避免Hack而是要分析問題細節。

當你需要額外功能時，多數時候是因為你糟糕的接口設計。

不要迷信任何數據

好的代碼都不信任任何輸入的數據

</blockquote>

• 不要相信HTML文檔
</ul>

任何人都可以對文檔瞎搞比如使用Firebug

• 不要相信數據總是以正確的格式傳入函數
</ul>

使用Typeof進行判斷然后繼續執行程序

• 不要相信DOM中的元素總是可獲取的
</ul>

在改變DOM之前要測試確保相應元素正確存在

• 不要使用JavaScript去保護任何東西
</ul>

因為它非常脆弱

使用JavaScript完成功能而不是生產內容

如果在JavaScript中寫了許多HTML代碼，這表明你做錯了

</blockquote>

使用DOM接口生成HTML不是很方便并且難以保證生成HTML的質量。

如果你有大量的接口只有當JavaScript開啟時才會有效，這時應該使用Ajax來接收靜態頁面文件。

這種方法使你更易維護HTML片段同時可以進行定制它。

站在巨人的肩膀上

JavaScript很有趣，但是對多個瀏覽器寫代碼時體驗就不是很好……所以使用一個好的框架

</blockquote>

JavaScript框架就是用來修復瀏覽器的差異性以使瀏覽器行為和你的代碼按預期運行。

好的框架讓你專注于業務代碼而不是浪費時間去解決各種瀏覽器的內部差異。

開發代碼不是活得的代碼

活得代碼是面向機器的，開發代碼是面向人類的

</blockquote>

• 在構建階段校驗，壓縮和優化你的代碼

  </li>

• 不要過早優化和批評你的同事，這些會使他們從中吸收經驗

  </li>

• 如果減少編寫代碼的時間，我們可以有更多的時間來完善向機器碼的轉換

  </li> </ul>

  原文：javascript-best-practices-2

  </div> 來自：http://zhuxinyong.com/2014/11/21/JavaScript%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%E4%BA%8C/