Widget Plugin Bridge · jQuery UI API 中文文檔 1.10

# Widget Plugin Bridge Categories: [Utilities](http://www.css88.com/jquery-ui-api/category/utilities/ "View all posts in Utilities") | [Widgets](http://www.css88.com/jquery-ui-api/category/widgets/ "View all posts in Widgets") ## jQuery.widget.bridge( name, constructor ) **Description:** `jQuery.widget.bridge()` 方法是 [jQuery 部件庫（Widget Factory）](/jQuery.widget/) 的一部分。它扮演著由 `$.widget()` 創建的對象和 jQuery API 之間的中介。 * #### [jQuery.widget.bridge( name, constructor )](#jQuery-widget-bridge-name-constructor) * **name**Type: [String](http://api.jquery.com/Types/#String)要創建的插件名稱。 * **constructor**Type: [Function](http://api.jquery.com/Types/#Function)()當插件被調用時要實例化的對象。 `$.widget.bridge()` 做如下事情： * 連接一個常規的 JavaScript 構造函數到 jQuery API。 * 自動創建對象實例，并存儲在元素的 `$.data` 緩存內。 * 允許調用公有方法。 * 防止調用私有方法。 * 防止在未初始化的對象上調用方法。 * 防止多個初始化。 jQuery UI 小部件使用 `$.widget( "foo.bar", {} );` 語法定義一個對象來創建。給出一個帶有五個 `.foo`，`$( ".foo" ).bar();` 的 DOM 結構將創建 "bar" 對象的五個實例。`$.widget.bridge()` 基于 "bar" 對象和一個公共的 API 在庫內工作。因此，您可以通過編寫 `$( ".foo" ).bar()` 來創建實例，通過編寫 `$( ".foo" ).bar( "baz" )` 來調用方法。如果您只想一次性初始化并調用方法，那么您所傳遞給 `jQuery.widget.bridge()` 的對象可以很小： ``` var Highlighter = function( options, element ) { this.options = options; this.element = $( element ); this._set( 800 ); }; Highlighter.prototype = { toggle: function() { this._set( this.element.css( "font-weight") === 400 ? 800 : 400 ); }, _set: function(value) { this.element.css( "font-weight", value ); } }; ``` 在這里，您需要的只是一個構造函數，接收兩個參數： * `options`：一個配置選項的對象 * `element`：該實例在其上創建的 DOM 元素然后您可以使用橋（bridge）把該對象作為一個 jQuery 插件，且可以在任意的 jQuery 對象上使用它： ``` // Hook up the plugin $.widget.bridge( "colorToggle", Highlighter ); // Initialize it on divs $( "div" ).colorToggle().click(function() { // Call the public method on click $( this ).colorToggle( "toggle" ); }); ``` 為了使用橋（bridge）的所有特性，您的對象原型需要有一個 `_init()` 方法。該方法在調用插件且實例已存在時調用。在這種情況下，您還需要有一個 `option()` 方法。該方法將會以選項作為第一個參數被調用。如果沒有選項，則參數為一個空對象。如需了解 `option` 方法的使用，請查看 [`$.Widget`](/jQuery.widget/#jQuery-Widget2)。橋（bridge）有一個可選的屬性，如果存在：如果對象原型有一個 `widgetFullName` 屬性，則該屬性將被作為存儲和檢索實例的鍵。否則，將使用 name 參數。