Question

在jQueryUI中，Widget factory可用于扩展现有小部件的功能。这对于调整私有方法（例如_renderItem）非常有用。

$.widget( "ui.autocomplete", $.ui.autocomplete, {
    _renderItem: function( ul, item ) {

    }
});

另一种方式（AFAIK给出类似的结果）是使用jQuery.extend()方法：

$.extend( $.ui.autocomplete, {
    _renderItem: function( ul, item ) {

    },
});

jQueryUI实现似乎在某些地方同时使用（第3335行，或搜索＆＃34;实时区域扩展＆＃34;在js文件中）

我的问题是：扩展小部件的这两种方式之间有什么区别，我应该更好地使用哪种方式，作为良好做法？

Answer 1

使用$.extend因为您已经将方法直接添加到构造函数中而无法工作，您需要将这些方法添加到构造函数＆＃39;原型或直接在实例上。

然而，以下内容可行：

$.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

另一方面，小工具工厂将创建一个新的＆＃39;类＆＃39;它继承自现有的$.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

简而言之...... $.widget更常被推荐为$.extend的最佳做法，但这取决于您的使用案例。

使用小工具工厂与$ .extend（）扩展小工具之间的区别？

1 个答案: