0

我有一个简单的插件，其中包含初始化、关闭和打开功能。我有一组调用这个插件的 html 模板。仅对于某些模板，我想对这个插件做一些稍微不同的行为，比如说在打开函数中添加一个不同的类，并在关闭时删除同一个类。什么是优雅的做法？我应该找到 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));
4

2 回答 2

0

我将通过向options您传递给插件的参数添加一个可选对象来处理初始化设置。

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

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

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

于 2012-12-28T20:39:48.730 回答
0

如果您有一组选项：

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!");
    }
});

在前面的代码中，会显示一条警报，显示“我的添加已被调用！”。

于 2012-12-28T20:45:55.187 回答