jQuery UI 為什么使用部件庫
編寫 jQuery 插件與向 jQuery.prototype
(通常顯示為 $.fn
)添加方法一樣簡單,且需要遵循一些簡單的規(guī)則,比如返回 this
。所以為什么會存在部件庫(Widget Factory)?
在本章節(jié)中,我們將講解部件庫(Widget Factory)的好處,并了解何時使用它,以及為什么要使用它。
無狀態(tài) vs. 有狀態(tài)插件
大多數(shù) jQuery 插件是無狀態(tài)的,它們執(zhí)行一些動作即完成了它們的任務。例如,如果您使用 .text( "hello" )
設置元素的文本,沒有安裝階段,結(jié)果都是一樣的。對于這種類型的插件,它只是擴展了 jQuery 的原型。
然而,一些插件是有狀態(tài)的,它們有全生命周期、維持狀態(tài)以及對變化的反應。這些插件需要大量專門的代碼來初始化和狀態(tài)管理(有時是銷毀)。這就導致出現(xiàn)了用于創(chuàng)建有狀態(tài)插件的模板。更糟糕的是,每個插件的作者按照不同的方式進行管理插件的生命周期和狀態(tài),這就導致了不同的插件有不同的 API 樣式。部件庫(Widget Factory)旨在解決這些問題,它移除了模板,并為插件創(chuàng)建了一個一致的 API。
一致的 API
部件庫(Widget Factory)定義了如何創(chuàng)建和銷毀小部件,獲取和設置選項,調(diào)用方法,以及監(jiān)聽小部件觸發(fā)的事件。通過使用部件庫(Widget Factory)來創(chuàng)建有狀態(tài)的插件,會自動符合定義的標準,讓新用戶更容易使用您的插件。另外,部件庫(Widget Factory)還能實現(xiàn)定義接口的功能。如果您對部件庫(Widget Factory)提供的 API 還不熟悉,請查看 如何使用部件庫(Widget Factory)。
在初始化時設置選項
當您創(chuàng)建一個接受選項的插件時,您應該為盡可能多的選項定義 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. } });