javascript - jQuery 插件 - 初始化后更新设置

Question

我有一个 jQuery 插件，我希望能够即时更改选项，就像这个例子:$('.element').pwstabs('options','effect',scale) 或类似的东西。我尝试添加 update: function，尝试添加 Plugin.prototype.update，但仍然不知道该怎么做 :)

插件结构如下:

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

  var pluginName = "pwstabs",
    defaults = {
      effect: 'scaleout',
      defaultTab: 1,                
      containerWidth: '100%',       
      tabsPosition: 'horizontal',   
      horizontalPosition: 'top',    
      verticalPosition: 'left',     
      responsive: false,            
      theme: '',                    
      rtl: false,                   
      controlls: false,
      next: '',
      prev: '',
      first: '',
      last: '',
      auto: false,
      play: '',
      pause: ''
    };


  function Plugin(element, options) {
    this.element = $(element);
    this.$elem = $(this.element);
    this.settings = $.extend({}, defaults, options);
    this._defaults = defaults;
    this._name = pluginName;
    this.init();
  }

  Plugin.prototype = {

    init: function(){

      // Here's the code for the plugin

    }

  };

  $.fn[pluginName] = function ( options ) {
    return this.each(function () {
      new Plugin( this, options );
    });
  };

})(jQuery, window, document);

所以现在我像这样使用插件:

$('.element').pwstabs({
  effect: 'scalein',
  defaultTab: 2
});

当我点击一个按钮时，我想改变效果让我们说 scaleout。使用如下代码:

$('.button').click(function(){
  $('.element').pwstabs('options','effect','scalein');
});

那么我该如何在插件中实现它呢？

Answer 1

目前该插件中唯一支持的调用模式是发送包含设置的对象文字以覆盖默认值。例如:

$('.element').pwstabs({
  effect: 'scalein',
  defaultTab: 2
});

该调用模式在以下方法中定义:

$.fn[pluginName] = function ( options ) {
    return this.each(function () {
        new Plugin( this, options );
    });
};

如您所见，选项字典作为唯一参数发送到构造函数 Plugin() 以构建插件并对其进行初始化。

为了支持您需要的调用模式，您必须修改此方法以支持两种调用模式(使用对象字面量进行初始化，但也可以使用更多参数调用任何方法，例如您的选项设置方法)。

这是一个改进的函数，可以处理这两种调用模式。此外，它还将在元素上存储插件实例，因此您可以在同一元素上的后续调用(例如设置更改)中访问现有设置等。

$.fn[pluginName] = function (options) {

    // get the arguments 
    var args = $.makeArray(arguments),
        after = args.slice(1);

    return this.each(function () {

        // check if there is an existing instance related to element
        var instance = $.data(this, pluginName);

        if (instance) {
            if (instance[options]) {
                instance[options].apply(instance, after);
            } else {
                $.error('Method ' + options + ' does not exist on Plugin');
            }
        } else {
            // create the plugin
            var plugin = new Plugin(this, options);

            // Store the plugin instance on the element
            $.data(this, pluginName, plugin);
            return plugin;
        }
    });
}

这将允许您按要求调用插件:

$('.element').pwstabs('options','effect','slidedown');

但是，这意味着您在插件原型(prototype)中有一个“选项”方法，因此请确保添加一个:

Plugin.prototype = {

    options: function (option, val) {
        this.settings[option] = val;
    },

    // Constructing Tabs Plugin
    init: function () {
        // omitted code for brevity
    }
}

如您所见，选项设置只是在现有实例上设置新选项。非常简单高效。点击方法处理程序将拾取新设置，瞧!

这是一个带有示例代码的 jsFiddle，以防您在实现我目前所描述的内容时遇到问题:

http://jsfiddle.net/7whs3u1n/6/

更新:我已经大大改进了我的答案以摆脱不需要的东西，包括更多细节和有效的完整实现(检查上面的 fiddle )；)我希望这能回答你的问题!

向您的插件添加有状态性并不难，但是当您有空闲时间时，还可以检查用于编写有状态 jQuery 有状态插件的替代机制，称为 jQuery 小部件工厂:

http://learn.jquery.com/plugins/stateful-plugins-with-widget-factory/

将来您可以考虑重写您的插件以使用小部件工厂。它肯定会使您的代码更简单 ;)