jQuery插件開發

1.規範

當咱們畫出了UI以後就能夠正式編寫jQuery插件代碼了，不過在着以前咱們還須要對jQuery插件開發的一些規範性有一些瞭解。

1. 使用閉包：

(function($) {
  // Code goes here
})(jQuery);

這是來自jQuery官方的插件開發規範要求，使用這種編寫方式有什麼好處呢？

a) 避免全局依賴。

b) 避免第三方破壞。

c) 兼容jQuery操做符'$'和'jQuery '

咱們知道這段代碼在被解析時會形同以下代碼：

var jq = function($) {
  // Code goes here
};
jq(jQuery);

這樣效果就一目瞭然了。

2. 擴展

jQuery提供了2個供用戶擴展的‘基類’ - $.extend和$.fn.extend.

$.extend 用於擴展自身方法，如$.ajax, $.getJSON等，$.fn.extend則是用於擴展jQuery類，包括方法和對jQuery對象的操做。爲了保持jQuery的完整性，我比較趨向於使用$.fn.extend進行插件開發而儘可能少使用$.extend.

3. 選擇器

jQuery提供了功能強大，併兼容多種css版本的選擇器，不過發現不少同窗在使用選擇器時並未注重效率的問題。

a) 儘可能使用Id選擇器，jQuery的選擇器使用的API都是基於getElementById或getElementsByTagName，所以能夠知道效率最高的是Id選擇器，由於jQuery會直接調用getElementById去獲取dom，而經過樣式選擇器獲取jQuery對象時每每會使用 getElementsByTagName去獲取而後篩選。

b) 樣式選擇器應該儘可能明確指定tagName, 若是開發人員使用樣式選擇器來獲取dom，且這些dom屬於同一類型，例如獲取全部className爲jquery的div，那麼咱們應該使用的寫法是$('div.jquery')而不是$('.jquery')，這樣寫的好處很是明顯，在獲取dom時jQuery會獲取div而後進行篩選，而不是獲取全部dom再篩選。

c) 避免迭代，不少同窗在使用jQuery獲取指定上下文中的dom時喜歡使用迭代方式，如$('.jquery .child')，獲取className爲jquery的dom下的全部className爲child的節點，其實這樣編寫代碼付出的代價是很是大的，jQuery會不斷的進行深層遍從來獲取須要的元素，即便確實須要，咱們也應該使用諸如$(selector,context), $('selector1>selector2'), $(selector1).children(selector2), $(selctor1).find(selector2)之類的方式。

 

1.2編寫JQuery插件須要注意的地方： （1）插件的推薦命名方法爲：jquery.[插件名].js （2）全部的對象方法都應當附加到JQuery.fn對象上面，而全部的全局函數都應當附加到JQuery對象自己上。 （3）在插件內部，this指向的是當前經過選擇器獲取的JQuery對象，而不像通常方法那樣，內部的this指向的是DOM元素。 （4）能夠經過this.each 來遍歷全部的元素 （5）全部方法或函數插件，都應當以分號結尾，不然壓縮的時候可能會出現問題。爲了更加保險寫，能夠在插件頭部添加一個分號（；），以避免他們的不規範代碼給插件帶來 影響。 （6）插件應該返回一個JQuery對象，以便保證插件的可鏈式操做。 （7）避免在插件內部使用$做爲JQuery對象的別名，而應當使用完整的JQuery來表示。這樣能夠避免衝突。