Quickly grasp the development of jQuery plug in

In the actual development work, there will always be business requirements such as scrolling, paging, calendar, etc. For those who have come into contact with jQuery and are familiar with the use of jQuery, the first thing that comes to mind is to find the existing jQuery plug-in to meet the corresponding display requirements. At present, there are many kinds of jQuery plug-ins to choose from among the components commonly used in the page, and there are many websites specializing in collecting jQuery plug-ins on the network. Using jQuery plug-in can really bring convenience to our development work, but if it is simply used and the principle is not well understood, there will be many doubts when encountering problems in the use process or customizing the plug-in development. The purpose of this article is to quickly understand the development principle of jQuery plug-in and master the basic skills of jQuery development.

Before developing an jQuery plug-in, you should first know two questions: What is an jQuery plug-in? How to use the jQuery plug-in?

The first question, jQuery plug-in is a method used to extend jQuery prototype object, which is simply that jQuery plug-in is a method of jQuery object. In fact, after answering the first question, you will know the answer to the second question. The use of jQuery plug-in is the call of jQuery object method.

Let's start with an example: $("a"). css ("color", "red"). We know that every jQuery object contains the DOM operation method defined in jQuery. Here, we use the $method to select a element and return an jQuery object of a element, which can use the DOM operation method defined in jQuery. So how does the jQuery object get these methods? In fact, an jQuery. fn object is defined inside jQuery. Looking at the source code of jQuery, we can find that jQuery. fn = jQuery. prototype, that is to say, jQuery. fn object is the prototype object of jQuery, and DOM operation methods of jQuery are defined on jQuery. fn object, and then jQuery object can inherit these methods through prototype.

Basic jQuery plug-in

Knowing the above knowledge, we can write a simple jQuery plug-in. If I need an jQuery plug-in to change the color of tag content now, I can implement this plug-in in the following way:

 $.fn.changeStyle = function(colorStr){
 this.css("color",colorStr);
 }

Then use the plug-in as follows:

$("p").changeStyle("red");

When the plug-in is called, the this inside the plug-in is the jQuery object that is currently calling the plug-in, so that each tag selected using the $() method resets the color style using the css () method when calling the changeStyle () plug-in.

jQuery plug-in satisfying chain call

One of the characteristics of jQuery in chain calling, a general plug-in should follow jQuery style and meet the requirements of chain calling. The way to implement chain calls is also simple:

 $.fn.changeStyle = function(colorStr){
 this.css("color",colorStr);
 return this;
 }

Then when you use it, you can call other methods in a chain:

$("p").changeStyle("red").addClass("red-color");

The key point to realize chain call is one line of code return this, which is added to the plug-in. After the plug-in executes, the current jQuery object will be returned, and then other jQuery methods can be called after the plug-in method.

jQuery plug-in to prevent $symbol pollution

There are many js libraries that use the $symbol. Although jQuery can use the jQuery. noConflict () method to surrender the use of the $symbol, if the plug-ins are defined using the $. fn object, these plug-ins will be affected by other js libraries that use the $variable. In this case, we can use the immediate execution function to encapsulate the plug-in by passing parameters. The form is as follows:

 (function($){
 $.fn.changeStyle = function(colorStr){
 this.css("color",colorStr); 
 return this;
 }
 }(jQuery));

Because the immediate execution function is used, the $at this time belongs only to the function scope of the immediate execution function, thus avoiding the pollution of the $symbol.

jQuery plug-in that can accept parameters

Continuing with the above example, if I want to add 1 function to this plug-in to set the text size of tag element content, then I can do it like this:

(function($){
 $.fn.changeStyle = function(colorStr , fontSize){
 this.css("color",colorStr).css("fontSize",fontSize+"px"); 
 return this;
 }
}(jQuery));

The above method of plug-in parameter transfer is suitable for the situation where there are few parameters. If there are many parameters to be transferred to the plug-in, we can define a parameter object, and then put the parameters to be transferred to the plug-in in the parameter object. Plug-ins are defined as follows:

(function($){
 $.fn.changeStyle = function(option){
 this.css("color",option.colorStr).css("fontSize",option.fontSize+"px"); 
 return this;
 }
}(jQuery));

How to use: $("p"). changeStyle ({colorStr: "red", fontSize: 14});

Another advantage of putting parameters into an object and passing them to the plug-in is that we can define 1 default value for 1 parameter inside the plug-in, such as:

(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. The usage of this method here is to merge two objects, that is, to assign the attribute value of the existence of the following one object to the first object. For specific usage, please refer to here. The $. extend method also serves to extend the jQuery object itself.

If we don't pass fontSize when using the plug-in, the content of the jQuery object tag using this plug-in will be set to the default 12px.

How to use: $("p"). changeStyle ({colorStr: "red"});

Note: When defining default parameters for a plug-in, 1 must write the default parameters inside the plug-in method, so that the scope of the default parameters is inside the plug-in.

Summarize

In addition to defining plug-ins with $. fn, there is another way to define plug-ins, which is to use the $. fn. extend method. Similar to the following writing:

(function($){
 $.fn.extend({ 
 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));

PS: $. extend method and $. fn. extend method can be used to extend jQuery function. By reading jQuery source code, we can find the essential difference between these two methods, that is, $. extend method extends method on jQuery global object, and $. fn. extend method extends method on jQuery object selected by $selector. Therefore, the public method 1 of extending jQuery is generally used with the $. extend method, and the plug-in 1 is generally used with the $. fn. extend method.

References

How to Create a Basic Plugin

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