如何扩展现有的jQuery UI部件？

Question

我正在使用jQuery v1.8.3和jQuery UI v1.9.2。我想通过添加和覆盖一些选项和方法来扩展现有的jQuery UI小部件（在我的情况下是Autocomplete小部件），但保留其他功能，如官方版本中所存在的功能。如何以“正确”（也许是“标准”）的方式实现？

---

P.S.: 我在网上搜索（1，2，...）并找到的文档大多与创建新的jQuery UI小部件相关，而不是扩展现有小部件。

- user12882

---

定义“扩展”。根据您想要做什么，通常只需添加新方法，然后覆盖一些现有方法以利用您添加的功能。就像在自动完成accentFolding扩展中一样。没有太多干净和未来可靠的方式。 - Fabrício Matté

我认为任何人能给出的唯一答案就是你必须小心谨慎地去做。你必须熟悉代码库，然后确保你保持函数之间的任何契约关系。 - thatidiotguy

@Fabrício Matté - 你说的“没有太多干净和未来可靠的方法”是什么意思？ - user12882

@thatidiotguy - 简单来说，我只想添加新的方法和选项，但我没有计划覆盖现有的方法。 - user12882

@Fabrício Matté - 如问题所述，我该如何使其成为“正确”（也许是“标准”）的方式？ - user12882

Answer 1

在 jQuery UI 1.9+ 中，扩展小部件的方式与创建新小部件相同。小部件工厂（$.widget()）支持以下几种方案：

使用基础小部件（$.Widget）作为起点创建一个新小部件： $.widget("ns.widget", { ... }) 创建从现有小部件继承的新小部件： $.widget("ns.widget", $.ns.existingWidget, { ... }) 扩展小部件： $.widget("ns.widget", $.ns.widget, { ... }) 您会注意到，扩展语法和继承语法是相同的。小部件工厂足够聪明，能够注意到您正在创建的小部件和你想要继承的小部件是相同的，并做出适当的处理。

当继承或扩展小部件时，您只需要定义您想要更改或添加的内容即可。还有一些存在于基本小部件上的新方法，使得在继承和更改上下文的方法更容易。阅读jQuery.Widget文档以获取完整的方法列表及其描述。如果您正在扩展小部件，则一定要阅读有关_super()的内容。

以下是一个示例，将更改默认的delay选项为500并添加一个新选项prefix，该选项将添加到所有建议中：

$.widget( "ui.autocomplete", $.ui.autocomplete, {
    options: {
        delay: 500,
        prefix: ""
    },

    _renderItem: function( ul, item ) {
        var label = item.label;
        if ( this.options.prefix ) {
            label = this.options.prefix + " " + label;
        }
        return $( "<li>" )
            .append( $( "<a>" ).text( label ) )
            .appendTo( ul );
    },
});

- Scott González

---

扩展（extending）和继承（inheriting）之间有什么区别？ - user12882

继承会创建一个新的小部件，而不改变现有小部件。扩展小部件会改变现有小部件的行为，而不是创建一个新的。 - Jörn Zaefferer

如果有人遇到和我一样的问题，希望这篇文章能帮到你。请注意，在 jQuery UI 的日期选择器中（版本为1.10或更高），你无法进行扩展，因为它不是基于早期版本中的小部件工厂。请参阅此问题https://dev59.com/ZYHba4cB1Zd3GeqPYPjS。对于其他小部件，扩展应该可以正常工作。 - jinglesthula