JQuery. extend function details, jquery. extend
JQuery. extend function details
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 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.
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');} });
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.
Below are some examples of 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.
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 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"}}
The above are some of the details that $. extend () often uses in projects.