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

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

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

jQuery 規範

使用最新版本的 jQuery

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

jQuery 變量

  • 存放 jQuery 對象的變量以 $ 開頭;
  • 將 jQuery 選擇器返回的對象緩存到本地變量中複用;
  • 使用駝峰命名變量;
前端開發規範(五、jQuery篇)

選擇器

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

DOM 操作

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

事件

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

鏈式寫法

  • 儘量使用鏈式寫法而不是用變量緩存或者多次調用選擇器方法;
  • 當鏈式寫法超過三次或者因為事件綁定變得複雜後,使用換行和縮進保持代碼可讀性;
前端開發規範(五、jQuery篇)

其他

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


分享到:


相關文章: