jquery Plugin Classification and writing detailed explanation

1. Plug-in type

The plug-in is actually the existing method (or function) to do a package, easy to reuse to improve development efficiency.

There are 2 main types of Jqeury

1) Instance object method plug-in

Develop methods that enable all jquery instance objects to be called. That is, any jquery instance object obtained through the $ () factory can call the method we developed. 95% of all plugins are of this type

2) Global function plug-in

You can add stand-alone functions to the jquery namespace. Then you can call it by using the $. function name () or jquery. function name () to invoke. Can be understood as static methods.

2. Add a global function

We can understand jquery as a class, and $ is the alias of this class. Developing a global function is a static method of developing this class. such as: $.get (), $.post (). Adding a new global function is actually extending the jquery "class" itself to add blocks to the jquery namespace. Adding the name of the newly added global function is SayHello, and the function is to pop up a Hello dialog box.

2.1 Adding a global function

1    jquery.sayhello=function(name) {2     alert ("Hello," +name); 3    }4     Call: 5    $. SayHello (' Zhang San '); 6 or 7 Jquery.sayhello ("John Doe");      

2.2 Adding multiple global functions

Use the global function extend provided by jquery to join multiple functions at once

1    jquery.extend ({2     SayHello:function(name) {3             alert ("Hello" +name); 4     },5     Saybye:function(name) {6 alert ("Good-bye" +name); 7 }8 }9)      

The above code adds two functions SayHello and Sybye to the jquery namespace, calling the same as

2.3 Namespaces

The previous approach might be at risk of naming conflicts with other functions in the jquery namespace, or it might be the same as the methods defined in other jquery plugins, so we can consider encapsulating all of our defined functions into an object, equivalent to giving our function a namespace code as follows:

1    jquery.wq={2     SayHello:function(name) {3             alert ("Hello" +name), 4     },5     Saybye :function(name) {6 alert ("Good-bye" +name); 7 }8}        

This can be interpreted as follows: First we add a Wq property to jquery, which is itself an object, and we use JSON to define an object that has two methods. So the call is in the following form: Call:

1    $.wq.sayhello ("Harry"); 2    jQuery.wq.sayBye ("Zhao Liu");

Note: Even if the page contains a jquery file, you should not assume that the abbreviated form "$" is always valid. Because "$" is just an alias, other libraries can redefine the "$". So when you define a plug-in, it's best to use jquery to invoke the method, or redefine "$"

3. Create a new method for the jquery instance object

Extends the methods in all of the jquery instance objects.

3.1 Define one method at a time

1    jquery.fn.sayhello=function() {2     alert ("Hello!") ); 3    }4     Call: 5    $ ("div"). SayHello ();    

3.2 Define more than one method at a time

The previous definition of a method is too few, can we define a number of methods at a time? The JQuery library provides a JQuery.fn.extend method to define multiple methods at once

1    jQuery.fn.extend ({2     SayHello:function() {3             alert ("Hello"); 4     },5     Saybye:function() {6 alert ("Bye Bye"); 7 }8});        

You can see that the parameters of the Extend method are actually a JSON-formatted object. Calls can be called as follows: $ ("div"). SayHello () and $ ("div"). Saybye ();

4. Description of the This keyword inside the plug-in method

The above notation is equivalent to every jquery instance, which is no different from a global function. The instance methods we define are often required to be used in a particular environment. So when we write the plug-in method, we should consider the environment of the object method. The "This" keyword refers to the current jquery instance object within any plug-in method. Therefore, any jquery method can be called on this. It is important to note that the jquery selector we are using may have multiple elements selected, and the "current jquery instance" could be an element, multiple elements, or 0 elements. We must consider this situation. If we use selectors to select multiple elements, we can use the each () method to iterate over each element, within each method, and then use this, which refers to a reference to each HTML DOM element.

5. Method concatenating

When using the JQuery object method, you can basically use the concatenating approach. Then we must return a jquery instance object for the plug-in method when we use the plugin.

    jQuery.fn.extend ({     SayHello:function() {             alert ("Hello");               ; },06 Saybye:function() {alert ("Bye Bye" this; }10});     

6. Defining default values for Plug-in methods

By using the Jquery.extend () method, you can conveniently provide default values that can be overwritten by parameters that are passed in at any time, and the call to the method will remain approximately the same. Note: The Jquery.extend method is available in two places in the API, one in the "core". "Plug-in mechanism", and only one parameter. One in "Tools". "Array and object operations." Note Here we are using the latter, in the form: Jquery.extend (target, Object1) its role is to copy all the properties and methods from the following objects into the preceding object, and to copy the properties and methods in the Object1 into the target object. So when we define a plugin, we can specify the default value for the plug-in method in the following ways:

1    jquery.fn.sayhello=function(properties) {2     var defaults={3             name: "Zhang San", 4             Age : 205 };6 jquery.extend (defaults,properties); 7 alert ("First parameter:" +defaults.name+ "second argument" + this; 9} 

So that we can call the

    $ ("div"). SayHello ({"            John Doe",            age:3004    });     or:    $ ("div" ). SayHello ({Harry),              or: $ ("div"). SayHello ({one age:2512});   

7. Plug-in development tips-closures

We are in the process of developing the plug-in, the code is written in a JS file, then this JS file may define a lot of methods or some variables. Then these methods or variables may conflict with other JS file variables or methods, then how can we define the JS code "exposed" part of the hidden part of it? That is, although you define, but in other places do not access, the exposure of the exposed, should not be exposed to hide, to achieve this goal, you have to use the "closure" what is the "closure"? The simple point is that an intrinsic function is allowed, that is, to define another function in the function, and that the intrinsic function can access the variables and other intrinsic functions declared in the outer function. For example, there are the following definitions:

Define a function

1 function     A () {2     // define B function 3     var b=function() {4 alert ("This is B"); 5// return the B function to 7var c=a ();  at this point C is the B function 9 C (); // is actually called the B function              

As you can see, the inner function B executes outside the A function that contains it, which forms the closure. That is, B is executed after the external function a returns, and when B executes it can still access the local variables and other intrinsic functions defined in a. Using the characteristics of closures, we can expose the methods we need to expose, such as B, we can hide some local variables and functions, such as defining variables and functions in a, other functions other than a are inaccessible, but B can be accessed. In fact, the above code is to execute a function first, get the result, the result is a function, and then execute the B function is Var c=a (); C (); Since our goal is to get B to execute outside a, we can make the following modifications to the code:

1    var c;2    function A () {3     var b=function() {4 alert ("This is a B function"); 5 }6 C =b; // assign intrinsic function to C7}          

Let a function execute, after a executes, B assigns a value to c a ();

Now execute C, which is actually B's execution C ();

Pop-Up dialog "This is B function" Remove the middle variable c to rewrite it to A () (); This is the same as the effect above.

Can you get a to execute immediately after the definition? We can define an anonymous function to put in a pair of parentheses, and then execute it with a pair of parentheses:

1    var c;2    (function() {3     var b=function() {4 alert ("This is a B function"), 5 }6 C =b; // assign intrinsic function to C7}) ()

Now execute C, which is actually B's execution C (); Pop-Up dialog "This is a B function" Can you pass a parameter from the outside and give it to function B? Rewrite the code as follows:

1    (function($) {2     //// Here you can use the $ symbol ..... 3     // Add the B function to the instance object function of jquery 4 $.fn. b=function() {5 alert ("This is a B function"); 6 }7}) (jQuery);         

This code is loaded by the browser will be executed,jquery as a parameter passed in to the $ symbol, so the inside can use the $ symbol, in the code, we use $.FN for the instance of jquery to add a method B, the page used:

1    $ (document). Ready (function() {2            $ ("H1"). B (); 3    });  

Execution results so the common jquery plugin is the following: the benefit is that the code inside the method is defined by the plug-in access only, so that some code is hidden, the exposed plug-in method is exposed to the external part.

1    (function($) {2     // plug-in code 3    }) (jQuery)   

jquery Plugin Classification and writing detailed explanation