我在理解如何在 JQuery 插件中创建“子函数”时遇到一些问题。 我想要实现的目标如下
var tags = $('#tagContainer').ImageTags({ option1: "blah blah", option1: "blah blah", option1: "blah blah"});
tags.ShowTagAdd(someIdHere, someOtherId);
这样做的原因是，有时我需要在页面加载时强制显示我的 TagAdd 对话框，我可以通过选项来做到这一点，但我想保持它更干净:D 这是到目前为止我的代码，它是用 TypeScript 编写，但它应该像普通的 JQuery 一样可读:D
当子函数被调用时，我基本上不会运行我的方法 ShowTag(categoryid: number, characterId: number) ，我该怎么做？
module ImageModule {
export interface DefaultOptions {
ImageId: number;
}
export class ImageTags {
defaults: DefaultOptions = {
ImageId: 0,
};
options: DefaultOptions;
TagsContainer: JQuery;
constructor(element: JQuery, options: DefaultOptions) {
this.options = <DefaultOptions> $.extend({}, this.defaults, options);
this.TagsContainer = element;
var self = this;
}
ShowTag(categoryid: number, characterId: number) {
console.log("test");
}
}
$.fn["ImageTags"] = function (options) {
return this.each(function () {
if (!$.data(this, "plugin_ImageTags")) {
$.data(this, "plugin_ImageTags", new ImageTags($(this), options));
}
});
}
}
最佳答案
存档的一种方法是:
$.fn.ImageTags = function(...) {
return {
ShowTagAdd: function(...) {
}
};
};
由于使用该方法返回一个对象，因此您可以按照自己想要的方式进行操作，但这打破了 jQuery 可链接性理念。
这样会更好:
(function($, undefined){
$.fn.ImageTags = function(options) {
var pluginName = 'ImageTags';
var plugin = $(this).data(pluginName);
if(plugin) {
return plugin;
} else {
var settings = $.extend({}, options);
return this.each(function() {
var widget = $(this);
var ShowTagAdd = function(...) {};
var api = {
ShowTagAdd: ShowTagAdd
};
widget.data(pluginName, api);
});
}
}
})(jQuery);
因此，您可以将方法定义为“私有(private)”，并在 api 中公开您喜欢的方法:
tags.ImageTags().ShowTagAdd(...);
或
tags.data('ImageTags').ShowTagAdd(...);
使用闭包的好处是你可以拥有一些私有(private)方法。
还有其他方法，但我现在没有时间!
关于javascript - JQuery 插件子方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16606248/