Detailed explanation of Jquery's extension method extend

Related recommendations: "jQuery Tutorial"

Jquery's extension method extend is a commonly used method when we write plug-ins. This method There are some overloaded prototypes. Here, we will learn about them together.

1. Jquery’s extension method prototype is: 　

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

It means merging src1, src2, src3... into dest , 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...)//也就是将"{}"作为dest参数。

In this way, you can merge src1, src2, src3... and then 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"}

means that if the following parameters have the same name as the previous parameters, then the latter ones will overwrite the previous parameter values.

2. Omit the dest parameter

#The dest parameter in the prototype of the extend method mentioned above can be omitted. If it is omitted, Then this 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');}
  });

is to merge the hello method into jquery in the global object.

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.

The following are some commonly used extension examples:

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

This is to extend a net namespace in the jquery global 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 the same as those introduced previously. , 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 sub-object location: {city: "Boston"} is nested in src1, and the sub-object location: {state: is also nested in src2. "MA"}, the first deep copy parameter is true, then the merged result is:

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, and if the first The parameter boolean is false. Let's see what the result of the merger is, as follows:

var result=$.extend( false, {},  
{ name: "John", location:{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 is that $.extend() is often used in projects Got some details.

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of Detailed explanation of Jquery's extension method extend. For more information, please follow other related articles on the PHP Chinese website!