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 the extend Extension Method 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:
The Code is as follows:
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:
The Code is as follows:
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:
The Code is as follows:
Var result = $. extend ({}, {name: "Tom", age: 21 },{ name: "Jerry", sex: "Boy "})
Then the merged result
The 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, such as: 1, $. extend (src) This method combines src into jquery's global object, for example:
The 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:
The 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:
The Code is as follows:
$. Extend ({net :{}});
This is to expand a net namespace in the jquery global object.
The 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:
The Code is as follows:
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:
The 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:
The 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:
The 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:
The 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.
