Example Analysis of extend usage in JQuery _ jquery-js tutorial

This article mainly introduces the use of extend in JQuery. The example analyzes extend functions, definitions, and related usage skills. If you need it, you can refer to the example in this article to describe 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

JQuery. extend = jQuery. fn. extend = function () {var options, name, src, copy, copyIsArray, clone, target = arguments [0] |{}, // parameter target object I = 1, length = arguments. length, // parameter length: deep = false; // whether deep copy is performed. // Handle a deep copy situation // If deep copy is performed, the cursor value of the target object and the original object is I, if (typeof target = "boolean") {deep = target; target = arguments [1] | {}; // skip the boolean and the target I = 2;} // Handle c Ase when target is a string or something (possible in deep copy) // when the value type of the target object is incorrect, it is reset to {} if (typeof target! = "Object "&&! JQuery. isFunction (target) {target ={};}// extend jQuery itself if only one argument is passed // when the length of the parameter value is 1, the target object is jQuery's own if (length = I) {target = this; -- I;} for (; I <length; I ++) {// Only deal with non-null/undefined values if (options = arguments [I])! = Null) {// ignore empty objects // Extend the base object for (name in options) {src = target [name]; copy = options [name]; // storage 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 the object relationship with the attribute depth greater than the two layers, for example, {a: {s: 21, age: 11 }}or {a: ['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 {// normal object clone = src & jQuery. isPlainObject (src )? Src: {};}// Never move original objects, clone them // call itself for Recursive copying 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:

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

Then the merged result

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:

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:

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:

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

The merged result is:

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:

$.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:

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

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

Iii. Below are several common extension instances:

$.extend({net:{}});

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

$.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.