Question

我有一个简单的插件，其中包含init，close和open函数。我有一个调用此插件的html模板数组。仅对于某个模板，我想对此插件执行稍微不同的行为，假设在open函数中添加一个不同的类，并在关闭时删除相同的类。这样做的优雅方式是什么？我是否应该找到html的id并在同一个插件中的open和close函数中执行if else，或者有更好的方法吗？

;(function ($, window, document, undefined) {

    function Plugin(element, options) {
            Window = this;
            this.element = element;
            this._name = pluginName;
            this.init(element);
        }

    Plugin.prototype = {
            init: function(element) {
     },
    close:function(e){
    //removes a class and hides the element
    },
    open:function(element){
    //adds a class and shows the element
    }

    }
//Extend Global jQuery (where we actually add the plugin!)
    $.fn[pluginName] = function (options) {
        plugin = $.data(window, 'plugin_' + pluginName);
        if (!(plugin instanceof Plugin)) {
            $.data(window, 'plugin_' + pluginName,
            plugin = new Plugin( this, options ));
        }
        return $Extend(this).each(function () {
            $.data(this, 'plugin_' + pluginName, plugin);
        });
    };

}(jQuery, window, document));

Answer 1

我会通过在你传递给插件的options param中添加一个可选对象来处理初始化设置。

基本上，只需确保所有相关初始化方法都可以访问options参数，然后执行以下操作：

open: function(element){
var initClass = options.initClass || "DEFAULTVALUE";
 //adds "initClass" as a class and show the element
}

||是一个速记技巧，表示如果“options.initClass”不存在，则默认为下一个值。您可以了解有关||的更多信息here

Answer 2

如果您有一组选项：

MyPlugin.options = {
    width: 200,
    height: 500,
    add: function () { 
        alert("add was called"); 
    },
    delete: function () { 
        alert("delete was called");
    }
};

当您将选项传递到插件时，您可以覆盖默认值：

function MyPlugin(options){
    options = $.extend({}, MyPlugin.options, options);

    options.add();
}

每当您创建插件实例时，您都可以通过设置其选项来覆盖一个或多个属性：

var plugin = new MyPlugin({
    width: 100,
    add: function () {
        alert("My add was called!");
    }
});

在上一段代码中，会显示一条警告，显示“我的添加被调用！”。

如何调用行为略有不同的插件？

2 个答案: