Example Analysis of extend usage in JQuery

Example Analysis of extend usage in JQuery

This article mainly introduces the use of extend in JQuery. The example analyzes extend functions, definitions, and related usage skills. For more information, see

 

 

The example in this article describes how to use extend in JQuery. Share it with you for your reference. The specific analysis is as follows:

Extend () is one of the basic functions of jQuery. It is used to expand existing objects. Extend is a commonly used method in the process of writing plug-ins. This method has some heavy-load prototypes. $. Extend (prop) is used to extend the jQuery object and can be used to add functions to the jQuery namespace.

I. jQuery. extend function source code

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

JQuery. extend = jQuery. fn. extend = function (){ Var options, name, src, copy, copyIsArray, clone, Target = arguments [0] | |{}, // target object of the Parameter I = 1, Length = arguments. length, // parameter length Deep = false; // whether deep replication is performed   // Handle a deep copy situation // If it is a deep copy, the target object and the original object cursor value I, and the depth value are updated. If (typeof target = "boolean "){ Deep = target; Target = arguments [1] || {}; // Skip the boolean and the target I = 2; }   // Handle case when target is a string or something (possible in deep copy) // When the value type of the target object is incorrect, it is reset {} If (typeof target! = "Object "&&! JQuery. isFunction (target )){ Target = {}; }   // Extend jQuery itself if only one argument is passed // When the parameter value length is 1, the target object is jQuery itself If (length = I ){ Target = this; -- I; }   For (; I <length; I ++ ){ // Only deal with non-null/undefined values If (options = arguments [I])! = Null) {// ignore null objects // Extend the base object For (name in options ){ Src = target [name]; Copy = options [name]; // store the object Value   // Prevent never-ending loop If (target = copy ){ Continue; }   // Recurse if we're merging plain objects or arrays // Deep replication only involves the structure of Object Relationships with more attribute depths than the two layers, such as {a: {s: 21, age: 11 }}or {: ['s '=> 21, 'age' => 11]} If (deep & copy & (jQuery. isPlainObject (copy) | (copyIsArray = jQuery. isArray (copy )))){ If (copyIsArray) {// if it is an array object CopyIsArray = false; Clone = src & jQuery. isArray (src )? Src: [];   } Else {// Common Object Clone = src & jQuery. isPlainObject (src )? Src :{}; }   // Never move original objects, clone them // Call itself for Recursive Replication Target [name] = jQuery. extend (deep, clone, copy );   // Don't bring in undefined values } Else if (copy! = Undefined) {// The non-depth CP directly overwrites the target attribute. Target [name] = copy; } } } }   // Return the modified object Return target; };

II. The extension method prototype of Jquery is:

1. extend (dest, src1, src2, src3 ...);

It means to merge src1, src2, src3... into the dest, and the returned value is the merged dest. It can be seen that the structure of the dest is modified after the method is merged. If you want to get the merged result but do not want to modify the dest structure, you can use the following:

2. var newSrc = $. extend ({}, src1, src2, src3...) // "{}" is used as the dest parameter.

In this way, you can merge src1, src2, src3... and return the merged result to newSrc.

For example:

 

1	Var result = $. extend ({}, {name: "Tom", age: 21 },{ name: "Jerry", sex: "Boy "})

Then the merged result

 

1	Result = {name: "Jerry", age: 21, sex: "Boy "}

That is to say, if the following parameter has the same name as the preceding parameter, the following parameter will overwrite the preceding parameter value.

3. extend (boolean, dest, src1, src2, src3 ...)

The first parameter boolean indicates whether to perform a deep copy. The other parameters are consistent with the previous descriptions.
For example:

 

1 2 3

Var result = $. extend (true ,{}, {Name: "John", location: {city: "Boston", county: "USA "}}, {Last: "Resig", location: {state: "MA", county: "China "}});

We can see that the child Object location: {city: "Boston"} is embedded in src1, and the sub-Object location: {state: "MA"} is also nested in src2. The first parameter for deep copy is true, the merged result is:

 

1	Result = {name: "John", last: "Resig", location: {city: "Boston", state: "MA", county: "China "}}

That is to say, it will merge nested sub-objects in src. If the first parameter boolean is false, let's look at what the merging result is, as shown below:

 

1 2 3

Var result = $. extend (false ,{}, {Name: "John", location: {city: "Boston", county: "USA "}}, {Last: "Resig", location: {state: "MA", county: "China "}});

The merged result is:

 

1	Result = {name: "John", last: "Resig", location: {state: "MA", county: "China "}}

Ii. dest parameter omitted by the extend method in Jquery

The dest parameter in the above extend method prototype can be omitted. If it is omitted, the method can only have one src parameter, in addition, the src is merged into the object that calls the extend method, for example:

1. $. extend (src)

This method combines src into jquery's global object, for example:

 

1 2 3

$. Extend ({ Hello: function () {alert ('hello ');} });

Is to merge the hello method into the global object of jquery.

2. $. fn. extend (src)

This method combines src into jquery's instance object, for example:

 

1 2 3

$. Fn. extend ({ Hello: function () {alert ('hello ');} });

Is to merge the hello method into the jquery instance object.

Iii. Below are several common extension instances:

 

1	$. Extend ({net :{}});

This is to expand a net namespace in the jquery global object.

 

1 2 3

$. Extend ($. net ,{ Hello: function () {alert ('hello ');} })

This is to extend the hello Method to the expanded Jquery net namespace.

I hope this article will help you with jQuery programming.