Quick understanding of jQuery plug-in development and jQuery plug-in development

Quick understanding of jQuery plug-in development and jQuery plug-in development

In actual development work, there will always be business requirements for displaying effects such as scrolling, paging, and calendar. For those who have been familiar with jQuery and those who are familiar with jQuery, the first thing to think of is to find the existing jQuery plug-in to meet the corresponding presentation needs. Currently, some commonly used components on the page have a variety of jQuery plug-ins to choose from. There are also many websites dedicated to collecting jQuery plug-ins on the network. Using jQuery plug-ins can bring convenience to our development work, but if it is simple to use, it does not know much about the principle, there will be a lot of questions when you encounter problems during use or when you customize the plug-in for development.The purpose of this article is to quickly understand the development principles of jQuery plug-ins and master the basic skills of jQuery development.

Before developing the jQuery plug-in, you must first know two questions: what is the jQuery plug-in? How to Use the jQuery plug-in?

The first problem is that the jQuery plug-in is a method used to extend the jQuery prototype object. Simply put, the jQuery plug-in is a method of the jQuery object. Actually, after answering the first question, you will know the answer to the second question. The jQuery plug-in is used to call the jQuery object method.

Let's take a look at an example: $ ("a" ).css ("color", "red "). We know that each jQuery object will contain the DOM operation method defined in jQuery. Here we use the $ method to select Element a and return a jQuery object of Element, this object can use the DOM operation method defined in jQuery. So how do jQuery objects obtain these methods? In fact, jQuery internally defines a jQuery. fn object. view the jQuery source code to find jQuery. fn = jQuery. prototype, that is, jQuery. the fn object is a prototype object of jQuery. All DOM operations of jQuery are performed in jQuery. the fn object is defined, and then the jQuery object can inherit these methods through the prototype.

Basic jQuery plugin

With the above knowledge, we can write a simple jQuery plug-in. If I need a jQuery plug-in to change the color of the TAG content, I can implement this plug-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, this inside the plug-in is the jQuery object of the calling plug-in. In this way, each label selected using the $ () method is called () the css () method is used to reset the color style.

JQuery plug-in for chained calls

One of the main characteristics of jQuery in chain calls, a general plug-in should follow the jQuery style to meet the requirements of chain calls. The method for implementing chained call is also simple:

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

Then, you can call other methods in a chain:

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

The key point for implementing a chain call is a line of code return this. this line of code is added to the plug-in. After the plug-in is executed, the current jQuery object will be returned, then you can continue to call other jQuery methods after the plug-in method.

JQuery plug-in to prevent $ symbol contamination

Many js libraries use the $ symbol, although jQuery can be used. the noConflict () method hand over the $ symbol's right to use, but if the plug-in is defined, use $. if the fn object is defined, these plug-ins will be affected by other js libraries using the $ variable. In this case, we can use the immediate execution function to encapsulate the plug-in by passing parameters. The format is as follows:

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

Because the function is executed immediately, $ only belongs to the function scope of the function to be executed immediately. This avoids the contamination of the $ symbol.

JQuery plug-in that can accept parameters

In the above example, if I want to add a function to set the text size of the label element content for this plug-in, I can do this:

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

The parameter passing method of the above plug-in is suitable for cases where there are relatively few parameters. If you need to pass too many parameters to the plug-in, we can define a parameter object, then, put the parameters to be passed to the plug-in the parameter object. The plugin is defined as follows:

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

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

Put parameters in an object and pass them to the plug-in. Another benefit is that we can define some default values for some parameters within the plug-in, 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 $. extend method. The usage of this method here is to merge two objects, that is, to assign the attribute values of the next object to the first object. For specific usage, refer to here. $. Extend is also used to extend the jQuery object itself.

If we do not transmit fontSize when using this plug-in, the content of the jQuery OBJECT tag using this plug-in will be set to the default 12px.

Usage: $ ("p"). changeStyle ({colorStr: "red "});

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

Summary

In addition to defining the plug-in using $. fn, you can also define the plug-in using the $. fn. extend method. Similar to the following statement:

(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. the extend method 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 an extension method on the jQuery global object, $. fn. the extend method is to extend the method on the jQuery object selected by the $ selector. Therefore, the common method for jQuery extension is generally the $. extend method, and the $. fn. extend method is generally used to define the plug-in.

References

JQuery source code

How to Create a Basic Plugin

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

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!