如何調用具有稍微不同行爲的插件？

我有一個簡單的插件，它有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));

來源

2012-12-28 neelmeg

我會通過添加一個可選的對象句柄初始化設置您傳遞到插件您options PARAM。

從本質上講，只需確保options參數是所有相關的初始化方法訪問，然後執行類似如下：

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

的||是一個速記技巧，說如果「options.initClass」不存在，則默認下一個值。您可以瞭解有關||的更多信息here。

來源

2012-12-28 20:39:48 adamb

或者使用大多數jQuery插件中使用的'extend（）'成語將用戶的選項合併到默認選項對象中。 – Barmar

您必須做的另一件事是記住每個元素使用的選項。這可以使用'data（）'完成。 – Barmar

@Barmar兩個好的指針。 – adamb

如果你有一組選項：當你創建你的插件，你可以在一個實例，然後

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

    options.add(); 
}

：

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

當你通過選項加入到你的插件，你可以覆蓋默認值通過設置其選項覆蓋一個或多個屬性：

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

在前面的cod e，一個警報將顯示「我的添加被稱爲！」。

來源

2012-12-28 20:45:55

如何調用具有稍微不同行爲的插件？

回答

相關問題