JavaScript 最佳實踐

最佳實踐

24.1 可維護性

24.1.1 什麼是可維護性

• 可理解性
• 直觀性
• 可適應性
• 可擴展性
• 可調試性

24.1.2 代碼約定

1. 可讀性
   註釋，合理的縮進
2. 有意義的變量和函數命名
   一般命名規則：變量名應該爲名詞；函數名應該動詞開始；

24.1.3 鬆散耦合

1. 解耦html與JavaScript
2. 解耦css與JavaScript
3. 解耦應用邏輯與事件處理程序

24.1.4 編程實踐

1. 尊重對象所有權（如果你不負責創建或者維護某個對象，那麼就別對他們進行修改）
2. 避免全局變量
3. 避免與null進行比較
4. 使用常量（將數據從應用邏輯中分離出來，以方便修改與國際化）

24.2 性能

24.2.1 注意作用域

1. 避免全局查找
   訪問全局變量總是要比訪問局部變量慢，因爲需要遍歷作用域鏈，所以將多次使用的全局變量存儲於局部變量總是沒錯的。
2. 避免with語句

24.2.2 選擇正確的方法

1. 避免不必要的屬性查找
   使用變量和數組要比訪問對象的屬性更有效率，後者是一個O(n)的操作
2. 優化循環
   
   • 減值迭代
   • 簡化終止條件
   • 簡化循環體
   • 使用後測試循環
3. 展開循環
   目標對象，大數據集–Duff裝置。
4. 避免雙重解釋–避免出現需要按照JavaScript來解釋的字符串

24.2.4 最小化語句數

1. 多個變量聲明
   var count = 5;
   var color = red;
   var value = [1,2,3];
   改爲：
   var count = 5,
   color = red,
   value = [1,2,3];
2. 插入迭代值
   var name = values[i];
   i++;
   改爲：
   var name = values[i++];
3. 使用數組和對象字面量創建

24.2.4 優化DOM交互

1. 最小化現場更新，使用文檔碎片
2. 使用innerHTML
   當把innerHTML設置爲某個值時，後臺會創建一個html解析器，然後使用內部的DOM調用來創建DOM結構；而非基於JavaScript的DOM調用。
3. 使用事件代理
4. 注意HTMLCollection
   任何時候要訪問HTMLCollection，都會在文檔上進行一次查詢，最小化訪問HTMLCollection可以極大的改進性能。
   發生以下情況時，會返回HTMLCollection;
   
   • 進行了對getElementsByTagName()的調用
   • 獲取了元素的childNodes屬性
   • 獲取的元素的attributes屬性
   • 訪問了特殊的集合，如document.forms,document.images