Extended jquery static method: Extend (DEST,SRC1,SRC2,SRC3...SRCN)

Article Introduction: The extended method of jquery extend is a common method in the process of writing plug-ins, there are some overloaded prototypes, here we go to understand.

The extended method of jquery extend is a common method in the process of writing plug-ins, there are some overloaded prototypes, here we go to understand.

1. Extend (SRC), extending the jquery static method.

That is, you copy the properties and methods of the SRC object to jquery

Java code

1. $.extend ({
2. Test:function () {alert (' Test function ')}
3. })

2. Extend (DEST,SRC1,SRC2,SRC3...SRCN), merging multiple objects.

As an example of Jquery.extend (CSS1,CSS2), Css1,css2 has some properties (methods do the same, but only attributes).
The Extend function adds an attribute with Css2 and css2 to the CSS1, and if one of the CSS2 's properties is enjoyed with a Css1 property name, it overrides the Css2 attribute with the same name. Css1 is the final whole and object. Or you can also use:

var newcss = jquery.extend (CSS1,CSS2) NEWCSS is the new merged object.

var newcss = jquery.extend ({},css1,css2) NEWCSS is the new merged object. And there is no damage to the CSS1 structure.

Java code

1. Usage: jquery.extend (obj1,obj2,obj3,..)
2. AR css1={size: "10px", Style: "Oblique"}
3. var css2={size: "12px", Style: "Oblique", Weight: "Bolder"}
4. $.jquery.extend (CSS1,CSS2)
5. Result: The Size property of the Css1 is overwritten and inherits the Css2 weight property
6. Css1 = {size: "12px", Style: "Oblique", Weight: "Bolder"}7

3. Extend (Boolean,dest,src1,src2 ...), deep set of objects

The new extend () allows you to merge the nested objects more deeply. The following example is a good proof.

Java code

1. The former. Extend ()
2. Jquery.extend (
3. {Name: "John", Location: {City: "Boston"}},
4. {Last: ' Resig ', location: {state: ' MA '}}
5. );
6. Results:
7. => {name: ' John ', Last: ' Resig ', location: {state: ' MA '}}
8. New and deeper. Extend ()
9. Jquery.extend (True,
10. {Name: "John", Location: {City: "Boston"}},
11. {Last: ' Resig ', location: {state: ' MA '}}
12. );
13. Results
14. => {name: "John", Last: "Resig",
15. Location: {city: ' Boston ', State: ' MA '}} 1617
    

Unlike other class libraries, jquery's Extend method provides "deep copy" functionality, if the first argument you pass in is a Boolean variable, the variable is a deep copy flag, the second parameter is the target object of the Extend method, and the remainder is the parent class that needs to be inherited. ”。 If the value of the first argument is true (deep copy), and both the dest and SRC elements include object attributes of the same name, the methods and properties of the object's properties are replicated again.

* Finally, we can deepen our understanding of the inheritance mechanism by analyzing the source code:

Jquery.extend = JQuery.fn.extend = function () {
Copy reference to target object
var target = arguments[0] {}, i = 1, length = arguments.length, deep = false, options;

Handle a deep copy situation
if (Target.constructor = = Boolean) {
Deep = target;
target = arguments[1] {};
Skip the Boolean and the target
i = 2;
}

Handle case as Target is a string or something (possible in deep copy)

if (typeof target!= "Object" && typeof target!= "function")
target = {};

Extend JQuery itself if only one argument is passed
if (length = = i) {
target = this;
I.;
}

for (; i < length; i++)
Only deal with non-null/undefined values when the parameters are Non-null,
if (options = arguments[i])!= null)
Extend the Base Object
for (var name in options) {
var src = target[name], copy = options[name];

Prevent never-ending Loop
if (target = = copy)
Continue

Recurse If we re merging object values
if (deep && copy && typeof copy = = "Object" &&!copy.nodetype)
target[name] = Jquery.extend (Deep,
Never move original objects, clone them
SRC (copy.length!= null?) [ ] : { } )
, copy);

Don ' t bring in undefined values
else if (copy!== undefined)
target[name] = copy;

}

Return the Modified Object
return target;
};

Attention

There is also a special place where there is a jquery.extend = JQuery.fn.extend at the beginning of the function, and the Jquery.prototype is assigned to Jquery.fn before the program, so it appears in the following call Different invocations of Jquery.extend () and JQuery.fn.extend (), and the result of the two method invocations is not the same, the Jquery.extend () call does not extend the method to an instance of the object. The method of referencing it also needs to be implemented through the JQuery class, such as Jquery.init (), while the JQuery.fn.extend () call extends the method to the prototype of the object, so it has these methods when instantiating a JQuery object. This is very important, and it is reflected in the jquery.js.