Home >Web Front-end >JS Tutorial >JQuery extend extension
JQuery’s extend method:
Jquery’s extend method is a commonly used method when we write plug-ins. This method has some overloaded prototypes. Here, let’s learn about it together.
1. Jquery’s extension method prototype is:
extend(dest,src1,src2,src3...);
It means merging src1, src2, src3... into dest, and the return value is merge After dest, it can be seen that after the method is merged, the structure of dest is modified. If you want to get the merged result but don’t want to modify the dest structure, you can use it as follows:
var newSrc=$.extend({},src1,src2,src3...)//That is, use "{}" as dest parameter.
This way you can merge src1, src2, src3... and then return the merged result to newSrc. As an 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 later parameter has the same name as the previous parameter, then the later parameter will overwrite the previous parameter value.
2. Omit the dest parameter
The dest parameter in the extend method prototype above can be omitted. If it is omitted,
then the method can only have one src parameter, and the src is merged into the object that calls the extend method. , such as:
1. $.extend(src)
This method is to merge src into the global object of jquery, such as:
$.extend({ hello:function(){alert('hello') );}
});
It is to merge the hello method into the global object of jquery.
2. $.fn.extend(src)
This method merges src into the jquery instance object, such as:
$.fn.extend({
hello:function(){alert('hello');}
}); It is to merge the hello method into the jquery instance object.
$.extend($.net,{
hello:function(){alert('hello');}
})
This is to extend the hello method into the previously expanded Jquery net namespace.
3. Jquery’s extend method also has an overloaded prototype:
extend(boolean,dest,src1,src2,src3...)
The first parameter boolean represents whether to perform a deep copy, and the remaining parameters are as described before Consistent,
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 nested sub-object in src1 is location: {city: "Boston"},
The sub-object location:{state:"MA"} is also nested in src2. The first deep copy parameter is true,
Then the result after the merger is:
result={name: "John", last: "Resig",
Location:{city:"Boston",state:"MA",county:"China"}}
That means it will also merge the nested sub-objects in src,
And if the first parameter is boolean For false, 合 Let's see what the result of the merger is, as follows:
var result = $. Extend (false, {},
{name: "john", local: {city: "boston", county: "usa" } },
{ last: "Resig", location: {state: "MA",county:"China"} }
);
Then the result after the merger is:
result={name: "John", last: "Resig", location:{state:"MA",county:"China"}}
The above are some details that $.extend() is often used in projects.