jquery Plugin Development

1. Types of Plugins

The purpose of writing a plug-in is to encapsulate an existing set of methods or functions so that they can be reused elsewhere, facilitating later maintenance and improving development efficiency.

jquery's plugins are divided into three main types: 1. Plug-ins for encapsulating object methods; 2. Plug-ins that encapsulate global functions; 3. Selector plug-in;

1.1 Plug-in for encapsulating object methods

This plug-in is the most common plug-in that encapsulates object methods for manipulating jquery objects obtained through selectors. More than 95% of jquery plugins are plug-ins that encapsulate object methods. Such plugins can play a powerful role in the jquery selector.

1.2 Plug-ins that encapsulate global functions

Separate functions can be added under the jquery namespace. For example, the Jquery.noconflict () method for conflict resolution, the common Jquery.ajax () method, and the Jquery.trim () method for removing the first space are all plugins attached to the kernel as global functions within jquery.

1.3 Selector Plug-in

In some cases, a selector plug-in is required. Although the jquery selector is very powerful, you will need to expand some of your favorite selectors.

2. Basic points of the plugin

2.1 jquery Plugin file name is recommended named jquery. [plugin name].js to avoid confusion with other JavaScript library plugins.] For example, named Jquery.color.js.

2.1 All object methods should be attached to the Jquery.fn object, and all global functions should be attached to the jquery object itself.

2.2 Inside the plug-in, this refers to the jquery object currently fetched through the selector, rather than the general method, such as the Click () method, where this is the DOM element.

2.3 Can traverse all elements through This.each.

2.4 All methods or function plug-ins, should end with a semicolon, or compression may have problems, in order to be more secure, even in the plug-in head first add a question mark.

2.5 The plugin should return a jquery object to ensure that the plug-in can be chained, unless the plug-in needs to return some amount that needs to be fetched, such as a string or an array.

2.6 Avoid conflicts by avoiding using $ as an alias for jquery objects inside a plug-in, rather than using the full jquery representation. Of course, you can also use closures as a technique to circumvent this problem, allowing the plugin to continue using $ as an alias for jquery.

3. Closures in the plugin

Closure concept: Ecmasscript A simple description of it, allowing the use of intrinsic functions (that is, function definitions and function expressions in the function body of another function), and these intrinsic functions can access all local variables, arguments, and other intrinsic functions declared in the outer function in which they reside, When one of these intrinsics is called outside the outer function that contains them, a closure is formed. That is, the intrinsic function is executed after the external function returns. And when this inner function executes, it still has to access the local variables, arguments, and other intrinsic functions of its outer function. The values of these local variables, parameters, and function declarations (initially) are the values that are returned by the external function, but are also affected by intrinsic functions.

With the closure feature, you can avoid internal temporary variables that affect global space, and you can continue to use $ as an alias for jquery in plug-in content. Common jquery plugins are in the following form:

(function() {   /* Place code here * / }) ();

First define an anonymous function () {/* Here to place the code */}, and then enclose it in parentheses into (function () {/* Place code */}) This form, and finally through () this operator to execute. Parameters can be passed for use by internal functions.

// for better compatibility, there is a semicolon before the start ;(function($) {        // This is the formal parameter of the anonymous function here /    * Place the code here, you can use $ as an abbreviated alias for jquery */ }) (jQuery);             // This is where jquery is passed as an argument to an anonymous function.

The above code is a common jquery plug-in structure.

For the production of plug-ins, we just need to know that all the plug-in code must be placed in the following two lines of code:

;(function($) {    /* here write jquery plugin code */}) (jquery);

4. jquery plugin mechanism

jquery provides two ways to extend the functionality of jquery, namely the JQuery.fn.extend () method and the Jquery.extend () method. The JQuery.fn.extend () method is used to extend the plug-in for encapsulating object methods, and the Jquery.extend () method is used to extend the plug-in and selector plug-in that encapsulate global functions. Both methods accept a parameter, which is of type object. The "name/value pairs" of the object objects represent "function or method name/function Body", respectively.

5. Writing jquery plugins

5.1 Plug-in for jquery object method encapsulation

Write a plugin for setting and getting colors that is used to implement the following two functions:

(1). Sets the color of the matching element.

(2). Gets the color of the matching element (the first in the element collection).

Since it is a way to expand the jquery object, it is written with the method JQuery.fn.extend () that expands the first type of plug-in, and the code is as follows:

;(function() {   jQuery.fn.extend ({      "color": Functon (value) {           return  this. css ("Color", value);     }             ); })

This method provides a parameter value, if the method is called when the value of the parameter is passed, then the value is used to set the font color, or to get the matching elements of the font color value.

Now let's test the plugin:

Build the following code and put in the plug-in and test code.

jquery Plugin Development