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)功能，而不是是，则可以。只需将$.fn.myPlugin包装在函数定义中，但仍需要定义名称空间：

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

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

Answer 2

插件可以像您希望的那样简单或复杂。样板模板是一个足够坚固的框架，可以使用它开发非常强大的API，包括动态更改选项设置。

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

抽象jQuery插件创建

2 个答案: