Detailed description of extend methods in jQuery plug-in development

Source: Internet
Author: User

The Extension Method extend of Jquery is a common method in the process of writing plug-ins. This method has some heavy-load prototypes,
Dest is the space to be integrated so that {} or not to write

Src is a javascript Object represented by a JSON expression... so you can add method attributes and so on...

I can integrate my methods into jQuery space through different applications... to implement plug-in development.

JQuery. extend = jQuery. fn. extend is defined in jQuery. Therefore, the two function types are the same.

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:
Copy codeThe Code is as follows:
Var result = $. extend ({}, {name: "Tom", age: 21 },{ name: "Jerry", sex: "Boy "})

Then the merged result
Copy codeThe Code is as follows:
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.

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:
Copy codeThe Code is as follows:
$. 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:
Copy codeThe Code is as follows:
$. Fn. extend ({hello: function () {alert ('hello ');}});

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

Below are some examples of common extension instances:

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

This is to expand a net namespace in the jquery global object.
Copy codeThe Code is as follows:
$. 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:
Copy codeThe Code is as follows:
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:
Copy codeThe Code is as follows:
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:
Copy codeThe Code is as follows:
Var result = $. extend (false, {}, {name: "John", location: {city: "Boston", county: "USA" }}, {last: "Resig", location: {state: "MA", county: "China "}});

The merged result is:
Copy codeThe Code is as follows:
Result = {name: "John", last: "Resig", location: {state: "MA", county: "China "}}

The above are some of the 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.