JQuery plugin development tutorial

I. Introduction Some WEB developers will reference A JQuery class library and write $ (#), $ (.), I have been familiar with JQuery for several years. I used to be such a person. I didn't change my opinion on myself until I had a technical exchange in my company. Ii. JQuery knowledge popularization 1: core when writing plug-ins with JQuery

I. Introduction

Some WEB developers reference A JQuery class library and write $ ("#"), $ (". ") I have been familiar with JQuery for several years. I used to be such a person. I didn't change my opinion on myself until I had a technical exchange in my company.

Ii. Popularize JQuery knowledge

Knowledge 1: When writing plug-ins using JQuery, the core methods are as follows:

$. Extend (object) can be understood as adding a static method to JQuery.

$. Fn. extend (object) can be understood as adding a method to the JQuery instance.

Basic definition and call:

/* $. Extend definition and call
**************************************** */
$. Extend ({fun1: function () {alert ("execution method 1 ");}});
$. Fun1 ();
/* $. Fn. extend definition and call
**************************************** */
$. Fn. extend ({fun2: function () {alert ("execution method 2 ");}});
$ (This). fun2 ();
// Equivalent
$. Fn. fun3 = function () {alert ("method 3 ");}
$ (This). fun3 ();

Knowledge 2: jQuery (function () {}); and (function ($) {}) (jQuery:

JQuery (function (){});
// Equivalent
$ (Document). ready (function (){});
/***********************************/
(Function ($) {}) (jQuery );
// Equivalent
Var fn = function ($ ){};
Fn (jQuery );

JQuery (function () {}); is the code in the execution method after a DOM element is loaded.

(Function ($) {}) (jQuery); defines an anonymous function. jQuery represents the real parameter of this anonymous function. It is usually used in JQuery plug-in development to define the private domain of the plug-in.

Iii. Develop the standard structure of JQuery plug-in

1. Define scope: Define a JQuery plug-in. First, put the code of this plug-in a place that is not subject to external interference. If you are professional, you need to define a private scope for this plug-in. External Code cannot directly access the internal code of the plug-in. The code inside the plug-in does not pollute global variables. This decouples the dependencies between plug-ins and runtime environments. After talking about this, how should we define the private scope of a plug-in?

// Step01 defines JQuery's scope
(Function ($ ){
}) (JQuery );

Don't underestimate this scope. It is as important as c # defines the class Keywords of a class.

2. Extend a plug-in for JQuery: After the scope of JQuery is defined, the core and most urgent step is to add an extension method for this JQuery instance. First, we name this Jqury plug-in a method called easySlider. When calling this plug-in, we can pass some parameters to this plug-in through options. The specific definition method can be found in the following code:

// Step01 defines JQuery's scope
(Function ($ ){
// Step 02 Extension Method Name
$. Fn. easySlider = function (options ){
}
}) (JQuery );

So far, a simple JQuery plug-in has been completed. $ ("# DomName "). easySlider ({}), or $ (". domName "). easySlider ({}) or more methods to call this plug-in.

3. Set the default value: Define a JQuery plug-in, just like defining a. net Control. A perfect plug-in should have more flexible attributes. Let's look at this Code:. The TextBox Control has the Width and Height attributes. When using TextBox, You can freely set the Height and Width of the control, or do not set the value, because the control has its own default value. When preparing to develop a JQuery plug-in, when the user does not specify the property, there should be a default value, in JQuery can be achieved in two steps such definition, see the following code step03-a, step03-b.

// Step01 defines JQuery's scope
(Function ($ ){
// Default properties for the step03-a plug-in
Var defaults = {
PrevId: 'prevbtn ',
PrevText: 'previous ',
NextId: 'nexttbtn ',
NextText: 'Next'
//......
};
// Step 02 Extension Method Name
$. Fn. easySlider = function (options ){
// Step03-b merge User-Defined properties, default properties
Var options = $. extend (defaults, options );
}
}) (JQuery );

Programmers like innovation, change the variable name, and change the variable name. When var defaults = {} is used to represent a default attribute, you may think differently when writing the JQuery plug-in yourself. Therefore, you can use var default01 = {}, vardefault02 = {} indicates the default attribute. Then the default attribute names are varied and getting worse. Therefore, we recommend that you use the ults variable to represent the default attribute when defining the default attribute when writing the JQuery plug-in. Such code is more readable.

Some people see this line of code: var options = $. extend (defaults, options), frowning, indicating not understanding. Let's take a look at the following code:

Var obj01 = {name: "English name: Sam Xiao", age: 29, girlfriend: {name: "Yang", age: 29 }}
Var obj02 = {name: "Chinese name: XiaoJian", girlfriend: {name: "YY "}};
Var a = $. extend (obj01, obj02 );
Var B = $. extend (true, obj01, obj02 );
Var c = $. extend ({}, obj01, obj02 );
Var d = $. extend (true, {}, obj01, obj02 );

Copy the code to the development environment and take a look at the values of a, B, c, and d to understand the meaning of var options = $. extend (ults, options. Indicates that options overwrites the defaults value and assigns the value to options. In the plug-in environment, the value set by the user overwrites the default value of the plug-in. If the default value is not set, the default value of the plug-in is retained.

4. Support for JQuery selector: JQuery selector is a good feature of JQuery. If our plug-in does not support JQuery selector, it is indeed a great pity. For example, if your JQuery plug-in supports multiple selectors, our code should be defined as follows:

// Step01 defines JQuery's scope
(Function ($ ){
// Default properties for the step03-a plug-in
Var defaults = {
PrevId: 'prevbtn ',
PrevText: 'previous ',
NextId: 'nexttbtn ',
NextText: 'Next'
//......
};
// Step 02 Extension Method Name
$. Fn. easySlider = function (options ){
// Step03-b merge User-Defined properties, default properties
Var options = $. extend (defaults, options );
// Step 4 supports the JQuery Selector
This. each (function (){
});
}
}) (JQuery );

5. Support for JQuery link calls: the above Code seems perfect, but not so perfect. Link calling is not supported so far. To achieve the effect of link calling, you must return each element of the loop.

// Step01 defines JQuery's scope
(Function ($ ){
// Default properties for the step03-a plug-in
Var defaults = {
PrevId: 'prevbtn ',
PrevText: 'previous ',
NextId: 'nexttbtn ',
NextText: 'Next'
//......
};
// Step 02 Extension Method Name
$. Fn. easySlider = function (options ){
// Step03-b merge User-Defined properties, default properties
Var options = $. extend (defaults, options );
// Step 4 supports the JQuery Selector
// Step 5 supports chained call
Return this. each (function (){
});
}
}) (JQuery );

This definition can support link calling. For example, you can call $ (". div "). easySlider ({prevId: "", prevText: "" audio character .css ({"border-width": "1", "border-color": "red ", "border-bottom-style": "dotted "});

6. Method in Plug-ins: a lot of code is often required to implement a plug-in function. There may be hundreds, thousands, or even tens of thousands of lines of code. We need to use function to structure the code. As mentioned in the first article, the methods defined in the plug-in cannot be called directly from outside, and the methods defined in the plug-in do not pollute the external environment. Now try to define some methods in the plug-in:

// Step01 defines JQuery's scope
(Function ($ ){
// Default properties for the step03-a plug-in
Var defaults = {
PrevId: 'prevbtn ',
PrevText: 'previous ',
NextId: 'nexttbtn ',
NextText: 'Next'
//......
};
// Define methods for step06-a in Plug-ins
Var showLink = function (obj ){
$ (Obj). append (function () {return "(" + $ (obj). attr ("href") + ")"});
}
// Step 02 Extension Method Name
$. Fn. easySlider = function (options ){
// Step03-b merge User-Defined properties, default properties
Var options = $. extend (defaults, options );
// Step 4 supports the JQuery Selector
// Step 5 supports chained call
Return this. each (function (){
// Define methods for step06-b in Plug-ins
ShowLink (this );
});
}
}) (JQuery );

Step step06-a: Define a method in the plug-in named showLink (); this method cannot be called directly outside the plug-in, a bit like a private method in the C # class, it can only be used inside the plug-in. The step step06-b demonstrates how to call the internal method of the plug-in.

Iv. Summary

As long as the development standards are formed, it is not so hard to read other people's code.