使用小部件工厂与 $.extend() 扩展小部件之间的区别？答案

【问题标题】：Difference between using the widget factory vs $.extend() to extend a widget?使用小部件工厂与 $.extend() 扩展小部件之间的区别？
【发布时间】：2015-07-18 06:13:13
【问题描述】：

在 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行，或者在js文件中搜索“live region extension”）

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

【问题讨论】：

最好的建议是使用有记录的方法

标签： javascript jquery jquery-ui widget

【解决方案1】：

使用$.extend 是行不通的，因为您将方法直接添加到构造函数，您需要将方法添加到构造函数的原型或直接添加到实例中。

但是，以下方法会起作用：

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

简而言之...$.widget 与$.extend 相比，更常被推荐为最佳实践，但这取决于您的用例。

【讨论】：

我想我明白了。另外：在 jQuery 库中，使用扩展，因为它在那里完成（没有原型）filter 和 escapeRegex 方法将是静态方法（与一个实例无关），而其他方法如 __response 将可用于所有新实例小部件的。