How to develop jquery plugins

One: universal knowledge of jquery

Knowledge 1: When writing plugins with jquery, the core approach is as follows two:

$.extend (object) can be understood as adding a static method to the jquery class.

$.fn.extend (object) can be understood as adding a member function to a jquery instance.

Basic definition and invocation:

//definition of $.extend$.extend ({pluginname:function(){        //...    }});//Call of $.extend$.pluginname ();//definition of $.fn.extend$.fn.extend ({pluginname:function(){        //...    }});//Call of $.fn.extend$( This). Pluginname ();

Knowledge 2:jquery (function () {}); differs from (function ($) {}) (JQuery):

JQuery (function() {})    // This is $ (document). Shorthand for Ready (function () {}) ( {}) (jquery)    // defines a self-running anonymous function where jQuery is the argument for this anonymous function, equivalent to creating a local scope for the plug- in

II: Development of the jquery plug-in standard structure

1, define the scope: Define a jquery plugin, the first thing to do is to put the plugin code in a place that is not disturbed by the outside world. If you are professional, you need to define a private scope for this plugin. External code cannot directly access the code inside the plug-in. The code inside the plugin does not pollute global variables. The dependence of plug-in and running environment is decoupled in a certain role. Having said so much, how do you define a private scope for a plug-in?

// Step01 Defining the scope of the jquery plugin (function  ($) {    //...}) (JQuery);

Don't underestimate this scope, just as important as C # defines a class keyword.

2, extension of a plugin for jquery: When you have defined the scope of jquery, the most important and most urgent step is to add an extension method to this jquery instance. First we name a method for this jquery plugin, called Easyslider, when we call this plugin, we can pass some parameters to the plugin via the options. The specific definition method looks like the following code:

// Step01 Defining the scope of the jquery plugin (function  ($) {    ///STEP02 Plug-in extension method name    function  (options) {         // ...     }}) (JQuery);

3, set default value: Defines a jquery plug-in, just like defining a. NET control. A perfect plugin should be a more flexible attribute.  Let's take a look at this code: <asp:textbox id= "TextBox1" width= "" "Height=" runat= "" Server "></asp:TextBox>. The TextBox control has a width and height property that allows the user to freely set the height and width of the control when using a TextBox, or not to set a value because the control itself has a default value. When you are ready to develop a jquery plugin, there should be a default value when the user does not specify a property, and in jquery you can implement such a definition in two steps, as shown in the following code step03-a,step03-b:

//Step01 Defining the scope of the jquery plugin(function ($) {    //default Value properties for Step03-a plugins    varDefaults ={previd:' Prevbtn ', Prevtext:' Previous ', NextID:' Nextbtn ', Nexttext:' Next '//...    }; //extension method name for STEP02 plug-in$.fn.easyslider =function(opt) {//step03-b Merge default attributes and user-defined attributes, the attributes that are not included in OPT are replaced with defaults, while others cover        varOptions =$.extend (defaults, opt); }}) (JQuery);

4, support jquery selector: jquery selector, is a good feature of jquery, if our plug-in writing does not support the jquery selector, is indeed a great pity. In order to enable our jquery plugin to support multiple selectors, our code should be defined like this:

//Step01 Defining the scope of the jquery plugin(function ($) {    //default Value properties for Step03-a plugins    varDefaults ={previd:' Prevbtn ', Prevtext:' Previous ', NextID:' Nextbtn ', Nexttext:' Next '//...    }; //extension method name for STEP02 plug-in$.fn.easyslider =function(options) {//step03-b Merge User custom properties, default properties        varOptions =$.extend (defaults, options); //step4 support for jquery selectors         This. each (function () {            //...        }); }}) (JQuery);

5, support for jquery link call: The top of the code looks perfect, in fact, it is not so perfect. Link calls are not supported so far. In order to achieve the effect of the link call, you must return each element of the loop:

//Step01 Defining the scope of the jquery plugin(function ($) {    //default Value properties for Step03-a plugins    varDefaults ={previd:' Prevbtn ', Prevtext:' Previous ', NextID:' Nextbtn ', Nexttext:' Next '//...    }; //extension method name for STEP02 plug-in$.fn.easyslider =function(options) {//step03-b Merge User custom properties, default properties        varOptions =$.extend (defaults, options); //step4 support for jquery selectors        //STEP5 supports chained calls        return  This. each (function () {            //...        }); }}) (JQuery);

Such a definition can support link invocation. For example, such calls are supported: $ (". Div"). Easyslider ({previd: "", Prevtext: ""}). css ({"Border-width": "1", "Border-color": "Red", " Border-bottom-style ":" Dotted "});

6, plug-in method: often implement a plug-in function requires a lot of code, it is possible to hundreds of lines, thousands of lines, even tens of thousands of lines. We structure this code and we have to use function. In the 1th has been said, in the plug-in definition of the method, the outside world can not directly call, I defined in the plug-in method also does not pollute the external environment. Now try to define some methods in the plugin:

//Step01 Defining the scope of the jquery plugin(function ($) {    //default Value properties for Step03-a plugins    varDefaults ={previd:' Prevbtn ', Prevtext:' Previous ', NextID:' Nextbtn ', Nexttext:' Next '//...    }; //step06-a defining methods in plugins    varShowLink =function(obj) {$ (obj). Append (function() {return"(" + $ (obj). attr ("href") + ")" }); }    //extension method name for STEP02 plug-in$.fn.easyslider =function(options) {//step03-b Merge User custom properties, default properties        varOptions =$.extend (defaults, options); //step4 support for jquery selectors        //STEP5 supports chained calls        return  This. each (function () {            //Step06-b defining methods in pluginsShowLink ( This);    }); }}) (JQuery);

Step step06-a: Define a method called Showlink () in the plugin; This method can not be called directly outside the plugin, a bit like a private method in C # class, can only meet the internal use of plug-ins. Step Step06-b demonstrates how to invoke the inside of a plug-in method.

How to develop jquery plugins