Jquery plug-in classification and compilation

Jquery plug-in classification and compilation
1. Plug-In types plug-ins are actually an encapsulation of existing methods (or functions) to facilitate reuse and improve development efficiency. JQeury mainly has two types. 1) Instance Object method plug-in development allows all jquery instance objects to be called. That is to say, as long as the jquery instance object obtained through the $ () factory can call the method we developed. 95% of the plug-ins are of this type. 2) The global function plug-in can add independent functions to the jQuery namespace. You can use $. Function Name () or jQuery. Function Name () to call the function. It can be understood as a static method. 2. To add a global function, we can understand jquery as a class. $ is the alias of this class. Developing a global function is a static method for developing this class. For example, $. get (), $. post (). Adding a new global function is actually an extension of the jQuery "class" itself, adding a lot to the jQuery namespace. the name of the newly added global function is sayHello. The "hello" dialog box is displayed. 2.1 Add a global function 1 jQuery. sayHello = function (name) {2 alert ("hello," + name); 3} 4 call: 5 $. sayHello ('zhang san'); 6 or 7 jQuery. sayHello (""); 2.2 add multiple global functions. Use the global function extend provided by jQuery to add multiple functions at a time. extend ({2 sayHello: function (name) {3 alert ("hello" + name); 4}, 5 sayBye: function (name) {6 alert ("goodbye" + name); 7} 8} 9) the above Code adds two functions to the jquery namespace: sayHe For llo and syBye, calling the method before the namespace above 2.3 may cause a name conflict with other functions in the jQuery namespace, or it may have the same name as the method defined in other jQuery plug-ins, therefore, we can consider encapsulating all the functions we define into an object, which is equivalent to giving a namespace code for our function: 1 jQuery. wq = {2 sayHello: function (name) {3 alert ("hello" + name); 4}, 5 sayBye: function (name) {6 alert ("goodbye" + name); 7} 8} can be understood as follows: First, we added a wq attribute for jQuery, this attribute is an object, and we use JSON to define an object. This object has two methods. Therefore, the call is in the following format: 1 $. wq. sayHello ("Wang Wu"); 2 jQuery. wq. sayBye ("Zhao "); Note: even if the page contains a jQuery file, the abbreviated form "$" should not always be valid. Because "$" is just an alias, other libraries can redefine this "$ ". therefore, when defining a plug-in, it is best to use jQuery to call the method, or redefine "$" 3. create a new method for the jQuery instance object to extend the methods in all jQuery instance objects. 3.1 define a method 1 jQuery. fn. sayHello = function () {2 alert ("Hello! "); 3} 4 call: 5 $ (" div "). sayHello (); 3.2 too few methods are defined at a time. Can we define more methods at a time? The jQuery Library provides jQuery. fn. the extend method is used to define multiple methods at a time. fn. extend ({2 sayHello: function () {3 alert ("Hello"); 4}, 5 sayBye: function () {6 alert ("Bye "); 7} 8}); you can see that the parameter of the extend method is actually an object in JSON format. You can call it as follows: $ ("div "). sayHello () and $ ("div "). sayBye (); 4. the "this" keyword in the plug-in method indicates that the above statement is equivalent to that used by every jQuery instance, which is no different from the global function. The instance method we define often needs to be used in a specific environment. Therefore, when writing the plug-in method, we should consider the environment of the object method. The "this" keyword references the current jQuery Instance Object in any plug-in method. Therefore, you can call any jQuery Method on this. It should be noted that the jQuery selector we use may select multiple elements. Which of the following elements may be one element, multiple elements, or zero elements. We must consider this situation. If multiple elements are selected using the selector, you can use the each () method to iterate each element. Inside the each method, use this, this refers to the reference of each html dom element. 5. You can use the concatenation method when using the jQuery object method for method concatenation. When using the plug-in, we must return a jQuery instance object for the plug-in method. 01 jQuery. fn. extend ({02 sayHello: function () {03 alert ("Hello"); 04 return this; 05}, 06 sayBye: function () {07 alert ("Bye"); 08 return this; 09} 10}); 6. to define the default value for the plug-in method, use jQuery. extend () method, which can easily provide default values that may be overwritten by input parameters at any time. At this time, the call to the method will be roughly the same. note: jQuery. the extend method is available in two places in the API, one at the [core ]. the [plug-in mechanism] has only one parameter. In tool. array and object operations. Note that the latter is used in the form of jQuery. extend (target, object1) is used to copy all the attributes and methods of the subsequent objects to the previous objects, that is, copying the attributes and methods in object1 to the target object. Therefore, when defining a plug-in, you can use the following method to specify the default value for the plug-in method: 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 parameter" + defaults. age); 8 return this; 9} so that we can call 01 $ ("div "). sayHello ({02 name: "", 03 age: 3004}); 05 or: 06 $ ("div "). sayHello ({07 name: "" 08}); 09 or: 10 $ ("div "). sayHello ({11 age: 2512}); 7. plug-in development skills-closure is under development The code is written in a js file during plug-in development. Therefore, many methods or variables may be defined in this js file. These methods or variables may conflict with variables or methods in other js files. How can we "expose" A Part Of The js Code we define and hide it? That is to say, although you have defined it, but cannot access it elsewhere, the exposed exposure should be hidden if it should not be exposed. To achieve this goal, we need to use "closure". What is "closure"? To put it simply, internal functions are allowed, that is, to define another function in the function, and internal functions can access the variables declared in the external function and other internal functions. For example, define A function 1 function A () {2 // define B function 3 var B = function () {4 alert ("This is B "); 5} 6 return B; // return B function 7} 8 var c = A (); // C is B function 9 c (); // actually, the copy code of function B is called. As you can see, internal function B is executed outside of function A, which forms A closure. That is, B is executed after the external function A returns, and when B executes, it can still access the local variables defined in A and other internal functions. Using the closure feature, we can expose the methods we need to expose, such as B, and hide some local variables and functions, such as defining variables and functions in, functions other than A cannot be accessed, But B can. In fact, the above Code is to first execute function A and get the result. This result is A function, and then execute function B, that is, var c = A (); c (); since we want B to be executed outside of A, we can make the Code as follows: 1 var C; 2 function A () {3 var B = function () {4 alert ("This is B function"); 5} 6 C = B; // assign the internal function to C7} // Let function A execute, after A is executed, B is assigned to c a (); // now C is executed, which is actually B's execution C (); // In the pop-up dialog box "This is A function B", remove the intermediate variable c and rewrite it to A (). This is the same effect as the above. Can A be executed immediately after definition? We can define an anonymous function to put it 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 B function"); 5} 6 C = B; // assign the internal function to C7}) () // execute C now, in fact, it is B's execution C (); // the pop-up dialog box "this is function B". Can I transfer a parameter from outside to function B? The rewrite code is as follows: 1 (function ($) {2 // here you can use the $ symbol ..... 3 // Add function B to JQuery's instance object function 4 $. fn. B = function () {5 alert ("This is B function"); 6} 7}) (jQuery); this code will be executed when it is loaded by the browser, jquery is passed as a parameter to the $ symbol, so the $ symbol can be used internally. In the code, we use $. fn adds Method B to the jQuery instance object. The page uses: 1 $ (document ). ready (function () {2 $("h1 "). B (); 3}); execution results. Therefore, common jQuery plug-ins are in the following form: the advantage is that the internal method defined in the Code is accessible only by plug-ins, in this way, some code is hidden, and the exposed plug-in method is exposed externally. 1 (function ($) {2 // plug-in code 3}) (jQuery)