jquery Plugin Development

In the actual development work, always encounter like scrolling, paging, calendar and other performance of the business needs, for contact with jquery and familiar with the use of jquery, the first thing to think about is to find the existing jquery plug-ins to meet the corresponding display needs. Some of the components commonly used on the page are available in a variety of jquery plugins, and there are many Web sites dedicated to the collection of jquery plugins. The use of jquery plug-ins can really make our development work easier, but if it's just simple to use, and the principle of it is not well understood, then there is a problem in the use of the process or custom development of the plug-in will have a lot of doubts. The purpose of this article is to quickly understand the development principles of jquery plug-ins and to master the basic skills of jquery development.

Before you make jquery plug-in development, you need to know two questions: what is a jquery plugin? How does the jquery plugin work?

First, the jquery plugin is a way to extend the jquery prototype object, simply because the jquery plugin is a method of the jquery object. In fact, answer the first question, you will know the answer to the second question, the use of jquery plug-ins is the JQuery object method call.

Let's look at an example: $ ("a"). CSS ("Color", "red"). We know that each jquery object will contain the DOM action method defined in jquery, where you use the $ method to select the A element and return a jquery object of the A element that can use the DOM action method defined in jquery. So how do jquery objects get these methods? In fact, jquery internal definition of a Jquery.fn object, look at the jquery source code can be found Jquery.fn=jquery.prototype, that is, Jquery.fn object is the prototype of jquery object, The DOM manipulation methods of jquery are defined on the Jquery.fn object, and the jquery object can inherit these methods through the prototype.

Basic version of jquery plugin

Knowing this knowledge, we can write a simple jquery plugin. If I now need a jquery plugin to change the color of the label content, the plugin can be implemented as follows:

Then use the plugin as follows:

$ ("P"). Changestyle ("Red"); when the plug-in is called, the inside of the plug-in is the jquery object that is currently calling the plug-in, so that each tag chosen using the $ () method will use CSS () when calling the Changestyle () plugin method to reset the color style.

jquery plug-ins that meet chained calls

One of the features of jquery when chaining calls is that a generic plugin should follow the jquery style to meet the chain call requirements. The way to implement chained calls is also simple:

You can then use the chain to invoke other methods:

$ ("P"). Changestyle ("Red"). AddClass ("Red-color");

The key point of implementing a 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 jquery object will be returned, and then you can continue to invoke other jquery methods behind the plug-in method.

jquery plugin to prevent $ sign pollution

A lot of JS libraries will use the $ symbol, although jquery can use the Jquery.noconflict () method to hand over the rights of the $ symbol, but if you define the plug-in, use the $.fn object to define, then these plug-ins will be used by other use of the $ The effect of the JS library of the variable. 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:

Because the immediate execution function is used, the $ at this point only belongs to the function scope of the immediately executing function, so that the $ symbol pollution can be avoided.

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:

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:

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:

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 subsequent object to the first object, the specific use can refer to here. The $.extend method also has a role to extend the jquery object itself.

This definition of plug-ins, when we use if not fontsize, then use the plug-in 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

The way to define plug-ins is defined by $.FN in addition to the above, and there is another way to define plugins, which is to use the $.fn.extend method. Similar to the following wording:

Both the Ps:$.extend method and the $.fn.extend method can be used to extend the jquery functionality, and by reading the jquery source 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, $. The Fn.extend method is to extend the method on a jquery object selected by the selector. So the common method of extending jquery generally uses the $.extend method, which defines plug-ins generally using the $.fn.extend method.

About this article

@adtxgc

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

jquery Plugin Development