jQuery UI 為什麼要使用部件庫

編寫jQuery 外掛程式與為jQuery.prototype（通常顯示為$.fn）新增方法一樣簡單，且需要遵循一些簡單的規則，例如傳回this。所以為什麼會存在部件庫（Widget Factory）？

在本章節中，我們將講解零件庫（Widget Factory）的好處​​，並了解何時使用它，以及為什麼要使用它。

無狀態 vs. 有狀態外掛

大多數 jQuery 外掛是無狀態的，它們執行一些動作即完成了它們的任務。例如，如果您使用 .text( "hello" ) 設定元素的文本，沒有安裝階段，結果都是一樣的。對於這種類型的插件，它只是擴展了 jQuery 的原型。

然而，有些外掛程式是有狀態的，它們有全生命週期、維持狀態以及對變化的反應。這些插件需要大量專門的程式碼來初始化和狀態管理（有時是銷毀）。這就導致出現了用於建立有狀態插件的模板。更糟的是，每個外掛程式的作者都以不同的方式進行管理外掛程式的生命週期和狀態，這導致了不同的外掛程式有不同的 API 樣式。部件庫（Widget Factory）旨在解決這些問題，它移除了模板，並為插件創建了一個一致的 API。

一致的 API

元件庫（Widget Factory）定義瞭如何建立和銷毀小部件，取得和設定選項，呼叫方法，以及監聽小部件觸發的事件。透過使用部件庫（Widget Factory）來建立有狀態的插件，會自動符合定義的標準，讓新使用者更容易使用您的插件。另外，部件庫（Widget Factory）還能實現定義介面的功能。如果您對部件庫（Widget Factory）提供的 API 還不熟悉，請查看 如何使用部件庫（Widget Factory）。

在初始化時設定選項

當您建立一個接受選項的外掛程式時，您應該為盡可能多的選項定義 defaults。然後在初始化時，把使用者提供的選項與 defaults 合併。您也可以暴露 defaults，這樣使用者就可以更改預設值。在 jQuery 外掛程式中，一個常用的模式如下所示：

$.fn.plugin = function( options ) {
    options = $.extend( {}, $.fn.plugin.defaults, options );
    // Plugin logic goes here.
};
 
$.fn.plugin.defaults = {
    param1: "foo",
    param2: "bar",
    param3: "baz"
};

元件庫（Widget Factory）也提供了這個功能，並在這上面做了改進。使用部件庫（Widget Factory）之後，它將如下所示。

$.widget( "ns.plugin", {
 
    // Default options.
    options: {
        param1: "foo",
        param2: "bar",
        param3: "baz"
    },
 
    _create: function() {
        // Options are already merged and stored in this.options
        // Plugin logic goes here.
    }
 
});