jQuery.extend function and usage details_jquery

Detailed explanation of jquery.extend function

JQuery’s extend method:

Jquery’s extension method extend 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...);

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...)//也就是将"{}"作为dest参数

In this way, src1, src2, src3... can be merged, and then the merged result will be returned 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 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 prototype of the extend method mentioned above can be omitted. If it is omitted, 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');}
 });

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');}
 });

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 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 deep copy. The other parameters are consistent with those introduced before. 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:"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"}}

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

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

Types of jQuery plug-ins

Detailed explanation of jquery.extend function usage

1. Extend jQuery static methods.

$.extend({
test:function(){alert('test函数')}
})

2. Merge multiple objects

The extend function will add attributes that css2 has but does not have in css2 to css1. If a certain attribute of css2 shares the same name as a certain attribute of css1, the attribute of css2 will be used to overwrite the attribute of the same name of css1. css1 is the final integration object. Or you can also use:

var newcss = jquery.extend(css1,css2) newcss就是合并的新对象。


var newcss = jquery.extend({},css1,css2) newcss就是合并的新对象.而且没有破坏css1的结构。

//用法: jQuery.extend(obj,obj,obj,..)
var Css={size: "px",style: "oblique"}
var Css={size: "px",style: "oblique",weight: "bolder"}
$.jQuery.extend(Css,Css)
//结果:Css的size属性被覆盖,而且继承了Css的weight属性
// Css = {size: "px",style: "oblique",weight: "bolder"}

 // 以前的 .extend()  
  jQuery.extend(  
   { name: “John”, location: { city: “Boston” } },  
   { last: “Resig”, location: { state: “MA” } }  
  );  
   // 结果:  
   // => { name: “John”, last: “Resig”, location: { state: “MA” } }
  // 新的更深入的 .extend()  
  jQuery.extend( true,  
  { name: “John”, location: { city: “Boston” } },  
   { last: “Resig”, location: { state: “MA” } }  
 );  
 // 结果  
  // => { name: “John”, last: “Resig”,  
 //   location: { city: “Boston”, state: “MA” } }