06.16 前端開發規範(五、jQuery篇)

jQuery 規範

使用最新版本的 jQuery

最新版本的 jQuery 會改進性能和增加新功能,若不是為了兼容舊瀏覽器,建議使用最新版本的 jQuery。以下是三條常見的 jQuery 語句,版本越新,性能越好.

jQuery 變量

存放 jQuery 對象的變量以 $ 開頭;將 jQuery 選擇器返回的對象緩存到本地變量中複用;使用駝峰命名變量;

選擇器

儘可能的使用 ID 選擇器,因為它會調用瀏覽器原生方法 document.getElementById 查找元素。當然直接使用原生 document.getElementById 方法性能會更好;在父元素中選擇子元素使用 .find() 方法性能會更好, 因為 ID 選擇器沒有使用到 Sizzle 選擇器引擎來查找元素;

DOM 操作

當要操作 DOM 元素的時候,儘量將其分離節點,操作結束後,再插入節點;使用字符串連接或 array.join 要比 .append()性能更好;

事件

如果需要,對事件使用自定義的 namespace,這樣容易解綁特定的事件,而不會影響到此 DOM 元素的其他事件監聽;對 Ajax 加載的 DOM 元素綁定事件時儘量使用事件委託。事件委託允許在父元素綁定事件,子代元素可以響應事件,也包括 Ajax 加載後添加的子代元素;

鏈式寫法

儘量使用鏈式寫法而不是用變量緩存或者多次調用選擇器方法;當鏈式寫法超過三次或者因為事件綁定變得複雜後,使用換行和縮進保持代碼可讀性;

其他

多個參數使用對象字面量存儲;不要將 CSS 寫在 jQuery 裡面;正則表達式僅準用 .test() 和 .exec() 。不準用 “string”.match() ;