jquery 2.0.3 Version Source series (3): 285-348 lines, Extend method detailed

Directory

1. The basic use of jquery extend

Through 285 lines of source jquery.extend = JQuery.fn.extend = function() { , the Extend method is either a static method that hangs directly into JQuery, Either the attached to FN is actually the instance method on the prototype (referring to the assignment operation of 283 rows). The Extend method can pass an object, similar to a plug-in, or can be copied by multiple objects.

<script src= "Js/jquery-2.0.3.js" ></script> <script>$.extend ({aaa:function() {alert ("1"); }, BBB:function() {alert ("2"); }}) $.fn.extend ({aaa:function() {alert ("3"); }, BBB:function() {alert ("4"); }}) $.aaa ();//Popup 1, the static method can be called directly$ (). AAA ();//Popup 3, bound to the method on the FN, called as an object        //multiple object parameters, subsequent objects extend to the first object        varA={}; $.extend (A,{color:' #f40 '}); Console.log (a);//the object on which the color is located is extended to the A object</script>

Next focus on extend copy and shallow copy.

<script src= "Js/jquery-2.0.3.js" ></script> <script>varA={}; varB={name: "Hello"}; varC={name: "Hello-1"}; varD={name:{age:20}}; varE={name:{age:50}}; //Shallow Copy object B$.extend (A, b); A.name= "HI"; alert (b.name);//pop-up Hello        //Shallow Copy Object D$.extend (a,d); A.name.age=30; alert (d.name.age);//pop Up        //deep Copy object C$.extend (true, A,c); A.name= "HI"; alert (c.name);//Eject Hello-1        //deep Copy Object e$.extend (true, a,e); A.name.age=40; alert (e.name.age);//pop Up</script>

2. Simplified version of Code

Divided into 5 parts:

Defines a number of variables

if () {} is not a deep copy

if () {} parameter is correct

if () {} See if the plugin is not the case, the plug-in word passed in a JSON object containing the method

Case for incoming multiple objects

If prevent loop application, if deep copy, else if shallow copy.

Detail: 3.1 Defines a number of variables

var options, name, SRC, copy, Copyisarray, clone,         = Arguments[0] | |  {},         = 1,        = arguments.length,        false;

Here's a description of target. It is $.extend (a,d), the target object of a copy. The arguments here is a JavaScript built-in object, an array of classes, and the value of index 0 is, of course, parameter a.

Detailed article: 3.2 Look is not deep copy

// Case of deep copy processing    if typeof target = = = "Boolean" ) {        = target;         = Arguments[1] | |  {};         // if the first parameter passed in is true, then deep is set to true. The target object is adjusted to the second one.        // Skip Boolean and target        i = 2;    }

This is handled in cases where true is passed in, such as $.extend (true, a,c); .

Detailed article: 3.3 to pass the correct parameters

// if the pass-in is not an object and is not a function, then target is null.     iftypeof target!== "Object" &&!  Jquery.isfunction (target)) {        = {};    }

Detailed article: 3.4 Handling plug-in scenarios

// If a parameter is passed in, the target object is jquery itself.     If (length = = = I        ) {this;         --i;    }

Detailed article: 3.5 Actions to pass in multiple objects

The basic idea is to take a value from the arguments and get the parameters for each non-target object. A non-target object gets the property name through the in loop.

The overall feature is that a shallow copy can only copy one layer, and a deep copy may be copied even if the nested object is embedded.

In case of a shallow copy, then go to the Else branch and overwrite the corresponding value target[name] = copy; . You can see if the original target has the same properties, then overwrite, if not, then add it.

<script src= "Js/jquery-2.0.3.js" ></script>    <script>        var a={name:{age:20}} ;         var b={name:{age:50}};         // Shallow Copy object B        $.extend (false, A, b);        Console.log (a); // {name:{age:20}}        Console.log (b); // {name:{age:50}}    </script>

It encounters object nesting, copy here is {age:50}, through simple assignment is not modified.

<script>        var a={name:{age:20}};         var b={name:{age:50}};        A[name]=B[name];        Console.log (a); // {name:{age:20}}, there is no change oh.     </script>

Deep copy of the case. Copy is an array, and SRC is assigned to clone otherwise an empty array. Copy is an object, SRC is an object that is assigned to clone, otherwise it is an empty object.

<script src= "Js/jquery-2.0.3.js" ></script>    <script>        var a={name:{age:20}} ;         var b={name:{age:50}};         // Shallow Copy object B        $.extend (True, A, b);        Console.log (a); // {name:{age:50}}        Console.log (b); // {name:{age:50}}    </script>

Copy of deep copy equals {age:50},src equals {age:20}. The copy can then be given to SRC by means of cloning. This is actually a recursive call, so a deep copy will be copied to the end.

 for(; i < length; i++ ) {        //handling non-null or undefined conditions        if(options = arguments[i])! =NULL ) {            //extend the base object, in syntax, to take the attribute values out             for(Nameinchoptions) {src=target[name]; Copy=options[name]; //prevents infinite loops, similar to $.extend (A,{name:a}). So if a copy of a value is equal to target then the termination code continues to loop                if(target = = =copy) {                    Continue; }                //deep Copy and copy exist, and copy is either an object or an array                if(Deep && copy && jquery.isplainobject (copy) | | (Copyisarray =jquery.isarray (copy))) ) {                    if(Copyisarray) {Copyisarray=false; Clone= src && jquery.isarray (src)?src: []; } Else{Clone= src && jquery.isplainobject (src)?src: {}; }                    //do not move the original object, clone them. target[name] =jquery.extend (deep, clone, copy); //Don ' t bring in undefined values}Else if(Copy!==undefined) {target[name]=copy; }            }        }    }

jquery 2.0.3 Version Source series (3): 285-348 lines, Extend method detailed