Widget Plugin Bridge

Categories: Utilities | Widgets

jQuery.widget.bridge( name, constructor )

Description: jQuery.widget.bridge() 方法是 jQuery 部件库（Widget Factory） 的一部分。它扮演着由 $.widget() 创建的对象和 jQuery API 之间的中介。

$.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() 的对象可以很小：

1
2
3
4
5
6
7
8
9
10
11
12
13
 
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 对象上使用它：

1
2
3
4
5
6
7
8
 
// 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。

桥（bridge）有一个可选的属性，如果存在：如果对象原型有一个 widgetFullName 属性，则该属性将被作为存储和检索实例的键。否则，将使用 name 参数。