jQuery 插件：使用回调来改变插件的行为

Posted 2023-05-09

【中文标题】jQuery 插件：使用回调来改变插件的行为

【英文标题】：jQuery Plugin: Using callback to alter plugin behavior

【发布时间】：2010-12-12 21:06:52

【问题描述】：

我正在使用jQuery token input plugin，并希望在添加令牌时更改其行为。

我在原始代码中添加了一个“onAddToken”回调，因此我可以看到何时将令牌添加到输入框，但我不确定如何更改 tokenInput 的 URL 从“ url/to/call”到一个新的 URL，“new/url/to/call”。

this、$this 和 $(this) 似乎不起作用。有什么建议吗？

$("#input").tokenInput("/url/to/call", 
        noResultsText: "No results yet. Type some more...",
        searchingText: "Searching...",
        onAddToken: function(args) 
            // alter tokenInput itself to use "new/url/to/call" instead of 
            // the original "url/to/call/"
    
 );

【参考方案1】：

问题在于，任何本机类型（数字、字符串等）的函数参数都将按值（复制）传递给被调用函数。您希望有一个通过引用传递的参数，而在 javascript 中执行此操作的唯一方法是传递一个对象。

在调用点（在插件中）调用这样的函数：

config.onAddToken(url: myUrlVar);

然后在您的回调中，您可以更改传入对象的 url 属性的值。

$("#input").tokenInput("/url/to/call", 
        noResultsText: "No results yet. Type some more...",
        searchingText: "Searching...",
        onAddToken: function(oUrl) 
            oUrl.url = "mynew/url";
        
);

这在您想通过引用传递多个值的情况下很有用，但是在您的情况下，您可能只想让回调返回您希望插件使用的任何 url 值，这让开发人员有责任知道这样做，但可能更容易。

在呼叫点：

myUrlVar = config.onAddToken(myUrlVar);

还有回调：

$("#input").tokenInput("/url/to/call", 
        noResultsText: "No results yet. Type some more...",
        searchingText: "Searching...",
        onAddToken: function(oUrl) 
            return "mynew/url";
        
);

或者，如果回调没有返回任何内容，您可以默认只使用该值：

var newUrlVar = config.onAddToken(myUrlVar);
if(newUrlVar)
    myUrlVar = newUrlVar;

如果回调函数中没有返回值，那么它的值应该为空。

【讨论】：

非常感谢您的详细解答。我选择了你的第一个选项，这给了我最大的灵活性，而且效果很好。我什至可以将插件的整个设置作为要修改的对象传递回去。再次，出色的回应 - 谢谢！