Mastering jquery Plugin Development

In the actual development work, always encounter such as scrolling, paging, calendar and other performance of the business needs, for the contact jQuery and familiar jQuery with the use of people, the first thing to think about is to find the existing jQuery plug-in to meet the corresponding display needs. The current page of some of the components commonly used, there are a variety of jQuery plug-ins to choose from, the network also has a lot of special collection jQuery of plug-ins of the site. The use of jQuery plug-ins does give us the convenience of development work, but if it is simply used, and the principle of it is not very understanding, then in the use of the process encountered problems or custom development of plug-ins will have a lot of doubts. The purpose of this article is to quickly understand jQuery the development principles of plug-ins and master jQuery the basic skills of development.

jQuerybefore you do plug-in development, you should first know two questions: what is a jQuery plugin? jQueryHow does the plugin work?
The first problem is that jQuery a plugin is jQuery a way to extend a prototype object, which jQuery is simply a way for a plugin to be an jQuery object. In fact, the answer to the first question, you will know the answer to the second question, the jQuery use of plug-ins is the jQuery invocation of object methods.

Let's look at an example: $("a").css("color","red") . We know that each jQuery object will contain an jQuery action method defined in it DOM , where the method is used to select the element, and the object that $ a returns an a element jQuery can be used jQuery in the DOM action method defined in. So jQuery how does the object get these methods? In fact, the jQuery internal definition of an jQuery.fn object, look jQuery at the source code can be found, that is, the jQuery.fn=jQuery.prototype jQuery.fn object is jQuery the prototype object, jQuery the DOM operation method is defined on the jQuery.fn object, and then jQuery Objects can inherit these methods through a prototype.

Basic version of jquery plugin
Knowing the knowledge above, we can write a simple jQuery plugin. If I now need a jQuery plugin to change the color of the label content, you can implement the plugin as follows:

1 $.fn.changestyle = function (colorstr) {2          this.css ("Color", colorstr); 3}

Then use the plugin as follows:
$("p").changeStyle("red");
When the plug-in is called, the plug-in this is the object that is currently calling the plug-in, jQuery so that each use $() method chooses the tag, when calling the changeStyle() plug-in will use the css() method to reset the color style.

jquery plug-ins that meet chained calls
A major feature of chained invocation is jQuery that a generic plugin should follow a jQuery style that satisfies the chain invocation requirements. The way to implement chained calls is also simple:

1 $.fn.changestyle = function (colorstr) {2          this.css ("Color", colorstr); 3          return this;4}

You can then use the chain to invoke other methods:
$("p").changeStyle("red").addClass("red-color");
The key point of implementing the chain call is a line of code return this , the plug-in adds this line of code, then after the plug-in execution, the current object will be jQuery returned, and then you can continue to invoke other methods after the plug-in method jQuery .

jquery plugin to prevent $ sign pollution
There are many js libraries using $ symbols, although jQuery you can use the jQuery.noConflict() method to hand over the rights of the $ symbol, but if you define the plug-in, using $.fn objects to define, then these plug-ins will $ js be used by other use of the variable The impact of the library. In this case, we can use the immediate execution function to encapsulate the plug-in in a way that passes parameters. The form is as follows:

1 (function ($) {2      $.fn.changestyle = function (colorstr) {3          this.css ("Color", colorstr);        4          return this;5      }6} (jQuery));

Because the immediate execution function is used, this time only belongs to the function scope of the $ immediately executing function, so as to avoid $ the pollution of the symbol.

jquery plug-ins that can accept parameters
To continue with the above example, if I want to add a feature for this plugin to set the content text size of the tag element, then I can do this:

(function ($) {     $.fn.changestyle = function (colorstr,fontsize) {         this.css ("Color", colorstr). CSS ("fontSize ", fontsize+" px ");                 return this;     }} (JQuery));

The above-mentioned plug-in method is suitable for less parameters, if you need to pass to the inside of the plug-in more parameters, we can define a parameter object, and then put the parameters that need to be passed to the plugin in the Parameter object. The plug-in definition is as follows:

1 (function ($) {2      $.fn.changestyle = function (option) {3          this.css ("Color", option.colorstr). CSS ("FontSize", option.fontsize+ "px");        4          return this;5      }6 7} (JQuery));

How to use:$("p").changeStyle({colorStr:"red",fontSize:14});
It's also a good thing that we can define some default values for some parameters inside the plug-in by putting parameters into one object, for example:

(function ($) {     $.fn.changestyle = function (option) {          var defaultsetting = {colorstr: "green", fontsize:12};          var setting = $.extend (defaultsetting,option);          THIS.CSS ("Color", setting.colorstr). CSS ("fontSize", setting.fontsize+ "px");                 return this;     }} (JQuery));

The above code uses the $.extend method, this method is used here is to merge two objects, that is, the existence of the property value of the following object is assigned to the first object, the specific use can refer to here. $.extendmethod also has a role to extend the jQuery object itself.
This defines the plug-in, if we do not pass the use fontSize , then the use of the plugin jQuery object tag content will be set to the default 12px .
How to use:$("p").changeStyle({colorStr:"red"});
Note: When defining default parameters for a plug-in, be sure to write the default parameters inside the plug-in method so that the scope of the default parameters is inside the plug-in.

Summarize
There is another way to define a plug-in in addition to the one that defines it, and $.fn that is how to use it $.fn.extend . Similar to the following wording:

1 (function ($) {2      $.fn.extend ({          3          changestyle:function (option) {              4          var defaultsetting = { COLORSTR: "Green", fontsize:12}; 5          var setting = $.extend (defaultsetting,option); 6          this.css ("Color", setting.colorstr). CSS ("FontSize", setting.fontsize+ "px");         7          return this;  8           } 9      }); (JQuery));

PS: $.extend methods and $.fn.extend methods can be used to extend the jQuery function, by reading the jQuery source code we can find the essential difference between the two methods, that is, the $.extend method is to extend the method on the jQuery global object, $.fn.extend $ by selecting the jQuerythe extension method on the object. Therefore jQuery , the common method of extended public methods $.extend , define plug-in general $.fn.extend method.

Resources
jquery Source Code
How to Create a Basic Plugin

http://www.jianshu.com/p/518d424d4994

Mastering jquery Plugin Development