原文地址:
部件工厂(The widget factory)
ui.core.js提供了一个工厂方法来创建部件类。通过$ .widget(String name, Options prototype)标识。
调用工厂创建部件的方法,来创建一个部件类的实例或者与一个部件实例交互。
除了那些原型提供的方法,每个实例都还可以使用下面的默认方法:
destroy(): 从DOM的元素中移除创建的实例getData/setData/data(String key[, String value]):为实例获取或设置一个选项enable(): 设置disabled选项为false, its up to the instance to respect the optiondisable(): 设置disabled选项为true, its up to the instance to respect the option
每个实例都可以使用的属性:
options: 部件实例的选项,通常是由用户提供的一些组合的默认选项element: 一个jQuery object总是包含一个单一的DOMElement,可以通过这样的方法获得:this.element[0].
在你的部件代码当中,,你可以重写这些方法,如果你想“继承”这些方法,并且增加一些功能,那么这样做:
会执行默认的方法。那么你可以增加你自己定制的代码。
脚本:
任何jQuery UI 部件都使用部件工厂,更完全的例子,可以随便找一个插件的全部的源代码来研究,例如ui.progressbar.js.
一个关于编写UI部件更全面的教程,请打开链接。
属性的设置和获取
部件初始化元素时,编码者可以传递选项覆盖默认的选项。
上面的代码中,会使所有的div变成可拖动物件,除了helper 和xis,具有默认的选项。但一旦当一个元素被创建后,所有其他的对部件名称的调用,如果第一个参数不是string会被忽略,所以它不能被用作在实例被初始化之后设置选项。
关于这点,获取和设置属性需要通过部件的option方法。举个例子,改变draggable的axis为 ‘y’,需要这样设置:
[译者:而不是上面那种方法来设置属性]
而获取一个选项值,需要通过:
部件通过绑定一些定制的事件到元素上来创建这些功能。如果你想监听这些设置或获取动作,你可以重写setData/getData函数在部件原型定义中,就像这样:
那么内部的 $(…).data() 函数触发那些事件,去看一下是否应该重写它的默认行为,设置或返回值。
内部函数和应用说明
jQuery.data / jQuery.fn.data
部件开发者经常会需要为DOM节点增加所谓的扩展,这意味着DOM节点需要存储额外的数据,这经常会产生内存泄露。
jQuery有它自己的方法来解决–data函数。它会为每一个节点创建一个特制的string并使用它来存储数据,所以不会产生循环引用。
你部件的实例由部件工厂通过关键字’widget’来自动存储(widget替换成你的部件名称):
或者
这个例子也被UI framework用作跟踪节点中一个部件是否被创建。UI会允许每个节点部件被创建多次,删除一个实例如下:
更多信息请参考Internals/jQuery.data
jQuery.fn
jQuery.fn是jQuery最普通的插件存放处,
那么前世我的目光一定一刻都没从你身上离开过吧!