JQuery. extend function details

Source: Internet
Author: User
Extend Extension Method of JQuery: The Extension Method of Jquery extend is a commonly used method in the process of writing plug-ins. This method has some heavy-load prototypes. Here, let's get to know about it. 1. The extension method prototype of Jquery is extend (dest, src1, src2, src3......);... SyntaxHigh

 

Extends of JQuery:

The Extension Method extend of Jquery is a commonly used method in the process of writing plug-ins. This method has some heavy-load prototypes. Here, let's get to know about it.

1. The extension method prototype of Jquery is:

 

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:

 

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 Merged Results

 

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 parameters will overwrite the preceding values.

 

Ii. dest parameter omitted

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') ;}}); combines 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') ;}}); combines the hello method into the jquery instance object.

 

Below are some examples of common extension instances:

 

$. Extend ({net :{}}); this is an extension of the 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.

 

III. The extend method of Jquery also has an overload prototype:

 

Extend (boolean, dest, src1, src2, src3 ...)

The first parameter 'boolean' indicates whether to perform a deep copy. The other parameters are the same as described above. What is "Deep copy"? Let's look at an 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 the nested sub-objects in src. If the first parameter boolean is false, let's look at the merging result, 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"} above is $. some details that extend () often uses in projects.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.