JQuery kernel explanation and practice Reading Notes 1: Prototype Technology decomposition 2

JQuery kernel explanation and practice Reading Notes 1: Prototype Technology decomposition 2
7. continuation-Function Extension the jQuery framework extends functions through the extend () function. The extend () function is also very easy to implement, it just copies the method of the specified object to the jQuery object or jQuery. prototype object. The following sample code defines an extended function extend () for the jQuery class and prototype (). Copy code 1 var $ = jQuery = function (selector, context) {// define class 2 return new jQuery. fn. init (selector, context); // returns the selector instance 3}; 4 jQuery. fn = jQuery. prototype = {// prototype object of the jQuery Class 5 init: function (selector, context) {// define selector constructor 6 selector = selector | document; // set the default value to document 7 context = context | document; // set the default value to document 8 if (selector. nodeType) {// If the separator is Node object 9 this [0] = selector; // pass the parameter node to the instance Array 10 this. length = 1; // set the length attribute of the Instance Object and define the number of elements contained in the object. 11 this. context = selector; // set the attributes of the instance. The return value ranges from 12 to return this; // returns the current instance 13} 14 if (typeof selector = "string ") {// If the separator is string 15 var e = context. getElementsByTagName (selector); // obtain the element 16 for (var I = 0; I <e. length; I ++) {// traverses the Element Set and fills all elements in the current instance array 17 this [I] = e [I]; 18} 19 this. length = e. length; // set the length attribute of the instance, that is, the number of elements included in the definition 20 this. context = context; // set Returns the selection range 21 return this; // returns the current instance 22} else {23 this. length = 0; // otherwise, set the instance length attribute value to 024 this. context = context; // set the attributes of the instance, return the selection range 25 return this; // return the current instance 26} 27}, 28 jquery: "1.3.2 ", // prototype property 29 size: function () {// Prototype Method 30 return this. length; 31} 32}; 33 jQuery. fn. init. prototype = jQuery. fn; // use the jQuery prototype object to overwrite the init prototype object 34 // jQuery Function Extension function 35 jQuery. extend = jQuery. fn. extend = function (obj) {36 for (var Prop in obj) {37 this [prop] = obj [prop]; 38} 39 return this; 40}; 41 // extension jQuery object Method 42 jQuery. fn. extend ({43 test: function () {44 alert ("test extended function"); 45} 46}); copy the code in the above Code, first define a Function Extension function extend (), and then for jQuery. the fn prototype object calls the extend () function and adds a test method to it (). This can be applied in practice, such as $ ("div"). test (). The extend () function defined by the jQuery framework is much more powerful. It not only extends basic functions, but also implements functions such as object merging. The code and explanation are as follows: copy code 1 var $ = jQuery = function (selector, context) {// define class 2 return new jQuery. fn. init (selector, context); // returns the selector instance 3}; 4 jQuery. fn = jQuery. prototype = {// prototype object of the jQuery Class 5 init: function (selector, context) {// define selector constructor 6 selector = selector | document; // set the default value to document 7 context = context | document; // set the default value to document 8 if (Selector. nodeType) {// If the separator is Node object 9 this [0] = selector; // The parameter node is passed to the array 10 this of the Instance Object. length = 1; // set the length attribute of the Instance Object and define the number of elements contained in the object. 11 this. context = selector; // set the attributes of the instance. The return value ranges from 12 to return this; // returns the current instance 13} 14 if (typeof selector = "string ") {// If the separator is string 15 var e = context. getElementsByTagName (selector); // obtain the element 16 for (var I = 0; I <e. length; I ++) {// traverses the Element Set and fills all elements in the current instance array 17 this [I] = e [I]; 18} 19 this. length = E. length; // set the length attribute of the instance, that is, the number of elements included in the definition 20 this. context = context; // set the attributes of the instance. The return value ranges from 21 to return this; // returns the current instance 22} else {23 this. length = 0; // otherwise, set the instance length attribute value to 024 this. context = context; // set the attributes of the instance, return the selection range 25 return this; // return the current instance 26} 27}, 28 jquery: "1.3.2 ", // prototype property 29 size: function () {// Prototype Method 30 return this. length; 31} 32}; 33 jQuery. fn. init. prototype = jQuery. fn; // use the jQuery prototype object to overwrite the init prototype object 34 // jQuery Functions Extensible function 35 jQuery. extend = jQuery. fn. extend = function (obj) {36 // define the target object of the replication operation 37 var target = arguments [0] |{}, I = 1, length = arguments. length, deep = false, options; 38 // get whether to perform deep copy processing 39 if (typeof target = "boolean") {40 deep = target; 41 target = arguments [I] | |{}; 42 // jump out of the Boolean value and target object 43 I = 2; 44} 45 // if the first parameter is a string, then it is set to null object 46 if (typeof target! = "Object "&&! JQuery. isFunction (target) {47 target ={}; 48} 49 // if there is only one parameter, the method of the parameter object is copied to the current object, set target to this50 if (length = I) {51 target = this; 52 -- I; 53} 54 for (; I <length; I ++) {55 // if the parameter value is not null, process 56 if (options = arguments [I])! = Null) {57 // extended base class Object 58 for (var name in options) {// traverses the parameter object 59 var src = target [name], copy = options [name]; 60 // prevent endless loops 61 if (target = copy) {62 continue; 63} 64 // recursive operation 65 if (deep & copy & typeof copy = "object "&&! Copy. nodeType) {66 target [name] = jQuery. extend (deep, 67 // do not copy the original object 68 src | (copy. length! = Null? []: {}), Copy); 69} else if (copy! = Undefined) {// do not pass undefined value 70 target [name] = copy; 71} 72} 73} 74} 75 // return the modified object 76 return target; 77}; copy the code and the above Code is the Function Extension Code provided by the jQuery framework. 8. continuation-the parameter processing jQuery method requires that the passed parameters be the object structure, because many methods in the jQuery framework contain a large number of parameters and are optional, there is no fixed requirement on the location, so using the direct volume of objects is the only solution. How to parse and propose parameters using the direct object quantity as the carrier of parameter transfer? How do I handle the default parameter values? You can copy code 1 var $ = jQuery = function (selector, context) {// define class 2 return new jQuery. fn. init (selector, context); // returns the selector instance 3}; 4 jQuery. fn = jQuery. prototype = {// prototype object of the jQuery Class 5 init: function (selector, context) {// define selector constructor 6 selector = selector | document; // set the default value to document 7 context = context | document; // set the default value to document 8 if (selector. nodeType) {// If the separator is Node object 9 this [0] = selector; // Parameter node passed to the Instance Object array 10 this. length = 1; // set the length attribute of the Instance Object and define the number of elements contained in the object. 11 this. context = selector; // set the attributes of the instance. The return value ranges from 12 to return this; // returns the current instance 13} 14 if (typeof selector = "string ") {// If the separator is string 15 var e = context. getElementsByTagName (selector); // obtain the element 16 for (var I = 0; I <e. length; I ++) {// traverses the Element Set and fills all elements in the current instance array 17 this [I] = e [I]; 18} 19 this. length = e. length; // set the length attribute of the instance, that is, the number of elements included in the definition 20 this. context = co Ntext; // set the attributes of the instance, return range 21 return this; // return current instance 22} else {23 this. length = 0; // otherwise, set the instance length attribute value to 024 this. context = context; // set the attributes of the instance, return the selection range 25 return this; // return the current instance 26} 27}, 28 setOptions: function (options) {29 this. options = {// default value of the method, which can be expanded by 30 StartColor: "#000", 31 EndColor: "# DDC", 32 Background: false, 33 Step: 20, 34 Speed: 1035}; 36 jQuery. extend (this. options, options | {}); // If a parameter is passed, the original Default parameter 37} 38}; 39 jQuery. fn. init. prototype = jQuery. fn; // use the jQuery prototype object to overwrite the init prototype object 40 // jQuery Function Extension function 41 jQuery. extend = jQuery. fn. extend = function (destination, source) {// redefine extend () function 42 for (var property in source) {43 destination [property] = source [proprty]; 44} 45 return destination; 46}; the copy Code defines a prototype method setOptions () in the preceding example. This method can process the passed parameter object and overwrite the default value. In the jQuery framework, the extend () function includes all functions, which can be used to expand methods for the current object, process parameter objects, and override the default values. 9. Nirvana-before introducing this content, namespace first introduces a core concept in a JavaScript function: closure, which is actually an anonymous function. A very important function of the closure is to encapsulate the code inside the closure in a closed space without exposing the internal information, other code cannot access functions or variables in the closure at will. You only need to provide an interface that can be accessed by an external user to easily contact the external user. When we look at jQuery source code, we will find that thousands of lines of code are encapsulated in a closure, in this way, the variable names in the framework conflict with the names of other frameworks or JavaScript code. In addition, $ of the jQuery framework and jQuery name may also conflict with each other. How does the jQuery framework solve this problem? First, all jQuery code is encapsulated in a closure (namely, an anonymous function). Second, jQuery provides a noConfilit () function, which disables the jQuery framework to use these two names. Then how is it done? At the beginning of the Framework, jQuery first uses the _ $ and _ jQuery temporary variables to store the content of the $ and jQuery variables. When you need to disable the name of the jQuery framework, you can use a Temporary Variable _ $ and _ jQuery to restore the actual content of the variables $ and jQuery. The Code is as follows: Copy code 1 (function () {2 var window = this, 3 undefined, 4 _ jQuery = window. jQuery, // cache jQuery variable content 5 _ $ = window. $, 6 jQuery = window. jQuery = window. $ = function (selector, context) {7 return new jQuery. fn. init (selector, context); 8}, 9 quickExpr =/^ [^ <] * (<(. | \ s) +>) [^>] * $ | ^ # ([\ w-] +) $/, 10 isSimple =/^. [^: # \ [\.,] * $/; 11 jQuery. fn = jQuery. prototype = {12 init: function (selector, context) {} 13 }; 14}) (); copy the code so far, the simple prototype of the jQuery framework has been set up. Although the functions of the jQuery framework are extremely powerful, but it is also built on this architecture. The subsequent work is to use the extend () function to continuously expand the tool functions of the jQuery framework and jQuery object methods based on application needs or functional needs.