The jquery Custom plug-in allows you to say that I will use the jQuery plug-in.

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:

The code is as follows:

Copy code

$. 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 parameters 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?

The code is as follows:	Copy code
// 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:

The code is as follows:	Copy 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 take a look at this code: <asp: TextBox ID = "TextBox1" Width = "20" Height = "100" runat = "server"> </asp: TextBox>. 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.

The code is as follows:

Copy code

// 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 = {}, var default02 = {} 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:

The code is as follows:	Copy 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 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:

The code is as follows:

Copy code

// 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.

The code is as follows:

Copy code

// 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, such a call is supported:

The code is as follows:	Copy code
$ (". 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:

The code is as follows:

Copy code

// 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.