Detailed explanation of the extend method in jQuery plug-in development_jquery

Jquery’s extension method extend is a commonly used method when we write plug-ins. This method has some overloaded prototypes.
dest is the space to be integrated. It can be {} or not

src is a javascript object represented by a JSON expression.... Therefore, method attributes can be added to it...

We can integrate our own methods into the jQuery space through different applications....to achieve plug-in development

Defined in jQuery jQuery.extend = jQuery.fn.extend So these two functional expressions are the same

1. Jquery’s extension method prototype is: 　

extend(dest,src1,src2,src3...);

Its meaning is to merge src1, src2, src3... into dest, and the return value is the merged dest. It can be seen that this method modifies the structure of dest after merging. If you want to get the merged result but don’t want to modify the structure of dest, you can use it as follows:

var newSrc=$.extend({},src1,src2,src3...)//That is, use "{}" as the dest parameter.

In this way, src1, src2, src3... can be merged, and then the merged result will be returned to newSrc. For example:

Copy code The code is as follows:

var result=$.extend({} ,{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

Then the merged result

Copy the code The code is as follows:

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, the method can only have one src parameter, and the dest parameter is Merge src 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:

Copy code 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 merges src into the jquery instance object, such as:

Copy code The code is as follows:

$.fn.extend({ hello:function(){alert('hello');} });

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

The following are some commonly used extension examples:

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

This is to extend a net namespace in the jquery global object.

Copy code The code is as follows:

$.extend($.net,{ hello:function (){alert('hello');} })

This is to extend the hello method into the previously extended 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. The other parameters are the same as those introduced before. What is a deep copy? Let’s look at an example:

Copy code 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 the nested sub-objects in src1 location:{city:"Boston"}, the sub-object location:{state:"MA"} is also nested in src2. The first deep copy parameter is true, then the merged result is:

Copy code The code is as follows:

result={name:"John",last:"Resig", location:{city :"Boston",state:"MA",county:"China"}}

That is to say, it will also merge the nested sub-objects in src. If the first parameter boolean is false, let’s see what the result of the merger is, as follows:

Copy code The code is as follows:

var result=$.extend( false, {}, { name: "John", location: {city: "Boston",county:"USA"} }, { last: "Resig", location: {state: "MA",county:"China"} } );

Then The merged result is:

Copy the code The code is as follows:

result={name:" John",last:"Resig",location:{state:"MA",county:"China"}}

The above are some details that $.extend() is often used in projects.