Common jquery template plug-ins -- jQueryBoilerplate introduction _ jquery

QueryBoilerplate is a good jQuery plug-in development tool that helps you quickly build a jQuery framework. This tool provides you with a lot of comments to help you make development simple and straightforward. It is a real object-oriented tool, you can implement public or private methods or public or private attributes. When developing jquery plug-ins for the first time, we often have no way to start. Of course, we can develop simple plug-ins in the format officially provided by jquery, but it is often not perfect in many cases, it creates a very "bad" plug-in: difficult to maintain, difficult to expand, cumbersome to use, poor performance... when we continue to practice and accumulate, some problems have been effectively avoided, but new problems have also emerged: in the various jquery plug-in development modes, which mode is the best?

It would be nice to provide a template and use certain constraints and specifications to solve the developer's "Confusion" in jquery plug-in development! This section describes the jquery Boilerplate, the most common jQuery template plug-in actual development.

JQuery Boilerplate is not a silver bullet developed by jquery plug-ins. It does not provide perfect solutions for various modes. Of course, this is not his goal, his goal is to provide a basic template. For Beginners, you only need to modify the template accordingly. Let's take a look at a basic template provided by jQuery Boilerplate (Do you feel familiar with it? Yes, bootstrap is in this mode ):

// This semicolon prevents non-standard jquery plug-ins from ending with semicolons when they are merged with other jquery plug-ins. // This affects our current plug-ins, leading to problems that cannot be run.; (Function ($, window, document, undefined) {// undefined is used as the parameter because undefined can be modified in es3. // For example, we can declare var undefined = 123, which affects the undefined value judgment, fortunately, in es5, undefined cannot be modified. // Window and document are global variables. In this place, they are used as form parameters because js execution searches for variables from the inside out (scope) and transmits them as local variables, this avoids outer lookup and improves efficiency. // Declare the default property object var pluginName = "defaultPluginName", defaults = {propertyName: "value"}; // constructor function Plugin (element, options) {this. element = element; // combine the default property object and the passed parameter object into the first null object. this. settings = $. extend ({}, defaults, options); this. _ defaults = defaults; this. _ name = pluginName; this. init ();} // to avoid plug-in with the prototype object. prototype conflict, where the method of inheriting the prototype object is used $. extend (Plugin. prototype, {init: function () {// Initialization, because it inherits from the in prototype, // you can use this directly here. element or this. settings console. log ("xD") ;}, yourOtherFunction: function () {// some logic }}); // a lightweight encapsulation of constructor, // prevent multiple instances from being generated $. fn [pluginName] = function (options) {this. each (function () {if (! $. Data (this, "plugin _" + pluginName) {$. data (this, "plugin _" + pluginName, new Plugin (this, options) ;}}); // convenient chained call return this ;}) (jQuery, window, document );

The preceding template is a lightweight basic template that can meet most of our needs during development. For example, an object is instantiated only once, chained call, default parameter, and call of Public and Private methods. Let's look at an example:

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

However, in actual development, especially in the development of components of a certain scale, we still face many problems that need to be solved, for example, how can namespace conflicts, plug-in scalability, and public methods be conveniently called? Of course, there are also some reasons for personal interests. I like to use other development modes. JQuery Boilerplate also provides several component development methods in different modes. You can choose one suitable for your use:

The lightweight (basic) mode provides a simple and common basic template for beginners, including basic default objects, simple constructor, merging of default parameters and passing parameters, and simple encapsulation of constructor that prevents objects from being instantiated multiple times.

The Widget factory mode is correct. jquery ui uses a typical mode to build complex and stateful components in an object-oriented manner. Most components in jquery ui depend on the basic widget factory components, this basic template provides most default methods, including event triggering methods.
Widget factory + RequireJS this is a simple encapsulation of the Widget factory using RequireJS to support AMD modular loading specifications.
Namespaced pattern namespace mode. namespace mode is used together with other plug-ins to avoid conflicts with other plug-ins.