在 jQueryUI 中,Widget factory可用于扩展现有小部件的功能。例如,这对于调整私有(private)方法(如 _renderItem
)很有用。
$.widget( "ui.autocomplete", $.ui.autocomplete, {
_renderItem: function( ul, item ) {
}
});
另一种方法(据我所知给出类似的结果)是使用 jQuery.extend()方法:
$.extend( $.ui.autocomplete, {
_renderItem: function( ul, item ) {
},
});
jQueryUI实现似乎在某些地方使用了两者(第 3335 行,或在 js 文件中搜索“实时区域扩展”)
我的问题是:这两种扩展小部件的方法之间有什么区别吗?作为良好实践,我应该更好地使用哪一种?
最佳答案
使用 $.extend
是行不通的,因为您直接将方法添加到构造函数,您需要将方法添加到构造函数的原型(prototype)或直接添加到一个实例。
但是以下方法可以工作:
$.extend($.ui.autocomplete.prototype, {
foo: true
});
这将改变原始的自动完成类,因此作为其副作用,在扩展之前实例化的任何实例也将被改变,即
var instance = $('input').autocomplete().data('uiAutocomplete');
console.log(instance.foo); // undefined
$.extend($.ui.autocomplete.prototype, { foo: true });
console.log(instance.foo); // true
另一方面,小部件工厂将创建一个新的“类”,它继承自现有的 $.ui.autocomplete
(它恰好覆盖了对原始自动完成构造函数的引用):
var instance = $('input').autocomplete().data('uiAutocomplete');
console.log(instance.foo); // undefined
$.widget('ui.autocomplete', $.ui.autocomplete, { foo: true });
console.log(instance.foo); // undefined (still)
小部件工厂还允许您将构造函数存储在单独的命名空间中,以便您可以同时使用原始构造函数和扩展构造函数:
$.widget('foo.autocomplete', $.ui.autocomplete, { foo: true });
console.log($.foo.autocomplete !== $.ui.autocomplete); // true
您需要手动将原始构造函数重新桥接到 jQuery 插件,以便能够以“jQuery 方式”实例化它:
$.widget.bridge('originalAutocomplete', $.ui.autocomplete);
$('input').autocomplete(); // instanceof $.foo.autocomplete && instanceof $.ui.autocomplete
$('input').originalAutocomplete(); // instance of $.ui.autocomplete only
简而言之...与 $.extend
相比,$.widget
更常被推荐为最佳实践,但这取决于您的用例。
关于javascript - 使用小部件工厂与 $.extend() 扩展小部件之间的区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31484581/