jQuery編寫組件的幾種方式

原文鏈接：https://w.cnblogs.com/xiao-xi/p/8572471.html

三種方式：

1、通過$.extend()來擴展jQuery

2、通過$.fn 向jQuery添加新的方法

3、通過$.widget()應用jQuery UI的部件工廠方式創建

三種方式的說明：

1、$.extend()相對簡單，一般很少能夠獨立開發復雜插件，僅僅是在jQuery命名空間或者理解成jQuery身上添加了一個靜態方法而以。

2、我們調用通過$.extend()添加的函數時直接通過$符號調用（$.myfunction()），而不需要選中DOM元素($('#example').myfunction())。

3、$.widget()是一種高級的開發模式，該模式開發出來的部件帶有很多jQuery內建的特性，比如插件的狀態信息自動保存，各種關於插件的常用方法等

4、$.fn則是一般插件開發用到的方式，可以利用jQuery強大的選擇器帶來的便利，以及將插件更好地運用於所選擇的元素身上，使用的插件也大多是通過此種方式開發。

$.extend()方法實例

 

 $.fn.extend()的實例

 

 jQuery一個時常優雅的特性是支持鏈式調用，選擇好DOM元素后可以不斷地調用其他方法。要讓插件不打破這種鏈式調用，只需要在方法內部方法當前的這個實例對象this就可以了，因為返回當前實例的this，從而又可以訪問自己的原型了，這樣的就節省代碼量，提高代碼的效率，代碼看起來更優雅。但是這種方法有一個問題是：所有對象的方法返回的都是對象本身，也就是說沒有返回值，所以這種方法不一定在任何環境下都適合。如上圖

需要注意的幾個點：

(1)、一個強勁的插件是可以讓使用者隨意定制的，這要求我們提供在編寫插件時就要考慮得全面些，盡量提供合適的參數。 (2)、比如現在我們不想讓鏈接只變成紅色，我們讓插件的使用者自己定義顯示什么顏色，要做到這一點很方便，只需要使用者在調用的時候傳入一個參數即可。同時我們在插件的代碼里面接收。 (3)、為了靈活，使用者可以不傳遞參數，插件里面會給出參數的默認值。 (4)、在處理插件參數的接收上，通常使用jQuery的extend方法，當給extend方法傳遞一個以上的參數時，它會將所有參數對象合並到第一個里。同時，如果對象中有同名屬性時，合並的時候后面的會覆蓋前面的。 (5)、可以在插件里定義一個保存插件參數默認值的對象，同時將接收來的參數對象合並到默認對象上，最后就實現了用戶指定了值的參數使用指定的值，未指定的參數使用插件默認值。 (6)、保護好默認參數：做法是將一個新的空對象做為$.extend的第一個參數，defaults和用戶傳遞的參數對象緊隨其后，這樣做的好處是所有值被合並到這個空對象上，保護了插件里面的默認值。

(7)、盡量在插件的最前面加上分號，這樣可以避免我們將這段代碼放到頁面后，前面別人寫的代碼沒有用分號結尾，這樣，這個插件代碼就會報錯

$.fn.myPlugin = function(options) {
    var defaults = { 'color': 'red', 'fontSize': '12px' }; var settings = $.extend({}, defaults, options);
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}

 

8、插件開發中的命名空間

(1)、不僅僅是jQuery插件的開發，我們在寫任何JS代碼時都應該注意的一點是不要污染全局命名空間。因為隨着你代碼的增多，如果有意無意在全局范圍內定義一些變量的話，最后很難維護，也容易跟別人寫的代碼有沖突。

(2)、比如你在代碼中向全局window對象添加了一個變量status用於存放狀態，同時頁面中引用了另一個別人寫的庫，也向全局添加了這樣一個同名變量，最后的結果肯定不是你想要的。所以不到萬不得已，一般我們不會將變量定義成全局的。

(3)、可以使用自調用匿名函數包裹插件代碼

最終結果：重點是分號、匿名函數、以及return this

;(function () {
  $.fn.extend({
    createRadio: function (strs) {
      for (let i = 0; i < strs.length; i++) {
        var html = ''
        const str = strs[i]
        html = '<div>'
        html += '題目' + (i + 1) + '</div>'
        for (let j = 0; j < str.length; j++) {
          const st = str[j]
          html += st.value + "<input type='radio' name='" + st.name + "' value='" + st.value + "'>"
        }
        $(this).append(html)
      }
      return this;
    }
  })
})()