抽象化jQuery插件创建

Question

Currently I'm building my jQuery plugins using this "template":

;(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);

I got most of the ideas from https://github.com/jquery-boilerplate/jquery-boilerplate/blob/master/src/jquery.boilerplate.js

So this example does nothing really, it's just the "backbone" of the plugin, and as you can see it's quite a bit of code....

Can I build some kind of plugin creator function that would allow me to rewrite the code above into something smaller like:

createPlugin('myPlugin', {

  defaultOptions: {},

  __construct: function() { 
    ...
  },

  __destruct: function() { 
    ...
  },

  somePublicFunction: function(){
    ...
  }

});

But still be able to use it like

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

?

In PHP I would use abstract classes for this kind of things, but I'm not sure how to do it in javascript...

Answer 1

This is the plugin pattern:

(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);

This enough code to achieve basic functionality.

If you need some createjQueryPlugin(name, methods) function, than YES , you can. Just wrap the $.fn.myPlugin in your function definition, but you still have to define namespace:

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

And finally, your code will be the same, but longer and redundant.

Answer 2

A plugin can be as simple or complex as you want it to be. The boilerplate template is a solid enough framework that a very robust API can be developed using it, including changing option settings on the fly.

As with all javascript code, their are lots of different styles for writing plugins. You aren't bound to any guidelines or rules. The only absolute rule is to return this if you want plugin to be chain able. After that everything else within the boilerplate is optional. What you put between the the opening and closing braces can be anything you want that suits your needs or coding style