抽象化jQuery插件创建

Question

目前，我正在使用此“模板”构建jQuery插件：

;(function($, window, document){

  var defaultOptions = {
        option1: value1,
        option2: value2,
      };

  function plugin(el, options){

    this.options  = $.extend({}, defaultOptions, options);
    this.el = el;

    this.__construct();
  };

  plugin.prototype = {

    __construct: function(){
      // do the plugin stuff, set up events etc.
    },

    __destruct: function(){   
      $(this.el).removeData('myPlugin');
    },

    // other plugin functions here...
  };

  $.fn.myPlugin = function(options){
    var additionalArguments = Array.prototype.slice.call(arguments, 1);

    return this.each(function(){
      var inst = $.data(this, 'myPlugin');

      if(!(inst instanceof plugin)){
        var inst =  new plugin(this, options);
        $.data(this, 'myPlugin', inst); 
        return inst;
      }  

      if(typeof options == 'string'){
        inst[options].apply(inst, additionalArguments);
      }  
    });
  };

  $(document).ready(function(){
    $('.my-plugin').myPlugin();  
  });

})(jQuery, window, document);

我从https://github.com/jquery-boilerplate/jquery-boilerplate/blob/master/src/jquery.boilerplate.js获得了大部分想法

因此，此示例实际上没有执行任何操作，仅是插件的“主干”，并且您可以看到它是很多代码。

我可以构建某种插件创建器功能，使我可以将上面的代码重写为更小的代码吗：

createPlugin('myPlugin', {

  defaultOptions: {},

  __construct: function() { 
    ...
  },

  __destruct: function() { 
    ...
  },

  somePublicFunction: function(){
    ...
  }

});

但是仍然可以像

$('.element').myPlugin();

？

在PHP中，我将使用抽象类来进行此类操作，但是我不确定如何在javascript中进行操作...

Answer 1

这是插件模式：

(function ($){

  $.fn.myPlugin = function (options){
    // do something or not to do
    // anyway it will work
    return(this);//because 'this' will return the input selector 
  };

})(jQuery);

这足够的代码来实现基本功能。

如果需要一些createjQueryPlugin(name, methods)函数，可以使用YES 。 只需将$.fn.myPlugin包装在函数定义中，但仍然必须定义名称空间：

(function ($){    
//...
})(jQuery);

最后，您的代码将相同，但是更长且多余。

Answer 2

插件可以像您想要的那样简单或复杂。 样板模板是一个足够坚固的框架，因此可以使用它来开发非常健壮的API，包括即时更改选项设置。

与所有javascript代码一样，它们用于编写插件的样式很多。 您不受任何准则或规则的约束。 唯一的绝对规则是，如果您希望插件具有链接能力，则返回this 。 之后，样板中的其他所有内容都是可选的。 放在开括号和闭括号之间的内容可以是您想要的任何适合您的需要或编码样式的内容