在 jQuery 插件中添加链接方法答案

【问题标题】：Add method to chaining in jQuery plugin在 jQuery 插件中添加链接方法
【发布时间】：2015-03-02 04:35:16
【问题描述】：

我正在尝试编写一个自动完成的 jQuery 插件。

想要的用途：

$('.advancedSelect').advancedSelect({/*plugin options*/}).change(function(){})/*.otherJQueryMethods*/;

实现：

$.fn.advancedSelect = function({
    return this.each(function(){
         var $advSel = $('<input/>');
         var $el = $(this).after($advSel).hide();
         /* my codes on desired functionalities */
         /* how is it possible to trigger the chained change method */

    });
});

【问题讨论】：

标签： javascript jquery jquery-plugins jquery-chaining

【解决方案1】：

在对我即将删除的答案的评论中（事实证明，它回答的问题不是你真正的问题），你说过：

我想知道我们是否可以有这样的语法：
$('.advancedSelect').advancedSelect({/*plugin options*/}).onChange(function(){}).css({})
-.css 我指的是任何其他 jQuery 的方法。

我会建议：

$('.advancedSelect').advancedSelect({/*other plugin options*/, onChange: function(){}}).css({})

或者这个：

$('.advancedSelect').advancedSelect({/*plugin options*/}).advancedSelect("onChange", function(){}).css({})

...对第一个有相当强烈的偏好。 :-)

关于第一个选项，您经常看到的附加词是一个可选的“选项”方法，您可以稍后使用它来更改选项::

// Initial setup
$('.advancedSelect').advancedSelect({/*other plugin options*/, onChange: function(){}}).css({})

// Later, I need to change something
$('.advancedSelect').advancedSelect("options", { onChange: function(){}});

旁注：如果这个change-like 方法是注册一个更改处理程序，为什么不直接使用jQuery 的change（或带有一些插件特定事件名称的on）并让你的插件引发一个事件？这就是我在插件中处理任何与事件相关的事情的方式。例如，看看 bootstrap 对 shown.bs.modal 的使用。

【讨论】：

将on 与自定义adv.change 事件和trigger('adv.change') 一起使用可能是该案例的最佳替代方案。代码如下：$('.advancedSelect').advancedSelect({}).on('adv.change',function(){}) 我猜你想说的是没有办法实现上述语法，对吧？
@hbtb：没有合理的方法，没有。我的意思是，您可以在您的插件函数中执行此操作：this.onChange = function() { ... };（例如，将一个函数添加到 只是一个 jQuery 对象），但我认为这不合理。我肯定会使用您自己的活动名称并使用on。