Deep Analysis of jQuery. extend source code

Deep Analysis of jQuery. extend source code
During website development, some jQuery plug-ins are often written for easy use. Naturally, a key method is indispensable-> jQuery. extend (), which is used to expand jQuery objects. Let's talk about the implementation principle of this function today. This method not only implements plug-ins, but also has its own functions and extends objects. Like this: var person = {name: 'lily'}; var person2 = $. extend (person, {age: 20}, {sex: 'male'}); // person. name = 'Li si'; // person. age = 20; // person. sex = 'male'; after person2 and person are extended, they are the same object. The first function of this function refers to the object to be expanded (target ), the second and third functions are appended objects. In the popular version, jQuery checks the attributes not in the target but exists in the next two objects. These attributes will be added to the target. So what is the case for writing plug-ins? We only use one parameter, like this: $. extend ({myExtendMethod: function () {alert ('This is my method') ;}}); like in the above example, our $. there is only one parameter of the Object type in the extend method, namely: {myExtendMethod}. How can we extend the parameter at this time? What is target? Of course we need to expand jQuery! Source code: Copy code 1 jQuery. extend = jQuery. fn. extend = function () {2 var options, name, src, copy, copyIsArray, clone, 3 target = arguments [0] |{}, 4 I = 1, 5 length = arguments. length, 6 deep = false; 7 8 // not met, because we passed in Object 9 if (typeof target = "boolean") {10 deep = target; 11 target = arguments [1] | |{}; 12 // skip the boolean and the target13 I = 2; 14} 15 16 // also does not meet 17 if (typeof target! = "Object "&&! JQuery. isFunction (target) {18 target = {}; 19} 20 21 // length is 1, I is also 1, therefore, the condition 22 if (length = I) {23 target = this; 24 -- I; 25} 26 27 for (; I <length; I ++) is used) {28 // Only deal with non-null/undefined values29 if (options = arguments [I])! = Null) {30 // Extend the base object31 for (name in options) {32 src = target [name]; 33 copy = options [name]; 34 35 // Prevent never-ending loop36 if (target = copy) {37 continue; 38} 39 40 // Recurse if we're re merging plain objects or arrays41 if (deep & copy & (jQuery. isPlainObject (copy) | (copyIsArray = jQuery. isArray (copy) {42 if (copyIsArray) {43 copyIsArray = false; 44 clon E = src & jQuery. isArray (src )? Src: []; 45 46} else {47 clone = src & jQuery. isPlainObject (src )? Src: {}; 48} 49 50 // Never move original objects, clone them51 target [name] = jQuery. extend (deep, clone, copy); 52 53 // Don't bring in undefined values54} else if (copy! = Undefined) {55 target [name] = copy; 56} 57} 58} 59} 60 61 // Return the modified object62 return target; 63 }; copy the code to see the definition of the first line through this code, $. extend and $. fn. extend defines the method as the same anonymous function, that is, they are implemented by a method, but the extended object is jQuery, and the latter is jQuery. fn = jQuery. prototype is a jQuery instance ($ ('div ')). $. Fn. extend () is the method for adding an instance to jQuery. Ps: if you do not understand the concept of js prototype, you can refer to my previous article on js object creation or other garden articles. Source code: jQuery. fn = jQuery. prototype. Let's take a look at how the $. extend function is executed when there is only one parameter. Check the target variable of the three lines of code and specify arguments [0] as its value. According to the plug-in we just defined, it is {myExtendMethod: function (){...}} this object; continue to look down. Let's look at the comments in line 21. this refers to the jQuery object, then assigns jQuery to the target variable, and changes I to 0; then, enter the for loop. When the code is in line 55th, our parameter Object will be assigned to the jQuery Object. In this way, the myExtendMethod method will be added to the jQuery Object. Copy code 1 $. extend ({2 testMethod: function () {3 alert (111); 4} 5}); 6 $. fn. extend ({7 testMethod2: function () {8 alert (222); 9} 10}); 11 // call the extended Method 12 $. testMethod (); // The 11113 $ ("# List1") is displayed "). testMethod2 (); // 222 is displayed