Common jQuery Template Plug-ins--jquery boilerplate introduction _jquery

During the initial development of the jquery plug-in, we often do not start, of course, we can according to jquery official format for simple plug-in development, but often not perfect, inadvertently, made a very "rotten" plug-ins: Difficult to maintain, difficult to expand, the use of cumbersome, poor performance ... When we are in constant practice, slowly accumulated, some problems have been effectively avoided, but also brought a new problem: in many of the myriad of jquery plug-in development model, what is the best mode?

If you can provide a template, through a certain number of constraints and specifications for developers to solve the jquery plug-in development in the "lost" that how good! Here is a major introduction to the next in the actual development of the most commonly used jQuery template Plug-ins--jquery boilerplate

jquery boilerplate is not the silver bullet developed by the jquery plugin, and he doesn't offer the perfect solution for all the models, and of course it's not the goal he pursues, his goal is simply to provide a basic template for beginners, You only need to make the appropriate changes on the basis of this template. Take a look at the basic template provided by the jquery boilerplate (does it feel familiar?). Yes, Bootstrap is this pattern):

  The role of this semicolon is to prevent other jquery plug-ins from merging when others are not standard jquery plug-ins forget to use semicolons to end//affect our current plug-ins, causing problems that cannot be run. ;(function ($, window, document, undefined) {//undefined as the purpose of the formal parameter is because undefined in ES3 can be modified//such as we can declare Var und
      efined = 123, this affects the undefined value of the judgment, fortunately in es5, undefined can not be modified.

      window and document itself are global variables, in this place as the purpose of the formal parameter is because JS execution is from the inside to look up the variable (scope), as a local variable to pass in, to avoid the outer search, improve efficiency.

      Declares the default Property object var pluginname = "Defaultpluginname", defaults = {propertyname: "Value"};
          constructor function Plugin (element, options) {this.element = element;
          Merges the default Property object and the passed parameter object into the first empty object this.settings = $.extend ({}, defaults, options);
          This._defaults = defaults;
          This._name = Pluginname;
      This.init ();
                }//To avoid conflicts with the prototype object Plugin.prototype, this place takes the method of inheriting the prototype object $.extend (Plugin.prototype, {init:function () { Initialized, as inherited from plugin prototypes,//You can use This.element or this.settings directly here
              Console.log ("XD");

      }, Yourotherfunction:function () {//Some logic}});
              A lightweight encapsulation of the constructor,//Prevent multiple instances from $.fn[pluginname] = function (options) {This.each (function () { if (!$.data (this, "plugin_" + pluginname)) {$.data (this, "plugin_" + pluginname, new Pl
              Ugin (this, options));

          }
          });
      Convenient chained call return this;

  };

 }) (JQuery, window, document);

The above template is a lightweight, basic template that has been able to meet most of our requirements in development, such as: Object instantiation only, chained calls, default parameters, and calls to public and private methods. To see an example:

http://jsfiddle.net/mirandaasm/wjPvF/3/

However, in the actual development, especially in a certain size of the component development, we also face a lot of problems to be solved, such as the conflict of namespaces, Plug-ins and the scalability of the public method how to facilitate the call? Of course there is a part of the reason for personal hobbies, I like to use other modes of development methods. Here jquery boilerplate also offers several different modes of component development, and you can choose a suitable one for your use:

Lightweight (base) mode provides a simple, generic base template for beginners, including the underlying default objects, simple constructors, the merging of default and pass-through parameters, and simple encapsulation of constructors that prevent objects from being instantiated multiple times.

Widget Factory Factory mode, yes, the typical pattern used by the jquery UI is to build complex stateful components in an object-oriented way, most of the components in the jquery UI depend on the Widget factory base component, which provides most of the default methods , including the event-triggering method.
Widget Factory + Requirejs This is a simple encapsulation of the Widget factory using Requirejs to support the AMD Modular loading specification.
Namespaced pattern namespace mode, which uses namespace mode to avoid conflicts with other plug-ins when used with other plug-ins.