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"}}

That is to say, it will also merge the nested sub-objects in src, and if the first 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 merged result is:

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

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

To add: We also often use the extend() method to write jquery plug-ins, so the types of jquery plug-ins are as follows:

Types of jQuery plug-ins

1. Encapsulating object methods. This plug-in encapsulates object methods and is used to operate jQuery objects obtained through selectors. It is the most common plug-in. This type of plug-in can take advantage of the powerful advantages of jQuery selectors. A considerable number of jQuery methods are "inserted" into the kernel in this form within the jQuery script library, such as the parent() method and the appendTo() method. wait.

2. Encapsulating global functions can add independent functions to the jQuery namespace. For example, the commonly used jQuery.ajax() method and the jQuery.trim() method that removes leading and trailing spaces are all plugins attached to the kernel as global functions within jQuery.

3. Selector plug-in Although jQuery's selector is very powerful, in a few cases, you still need to use selector plug-in to expand some of your favorite selectors.

jQuery.fn.extend() is mostly used to extend the first of the three types mentioned above, and jQuery.extend() is used to extend the latter two plug-ins. Both methods accept one parameter, of type Object. The "name/value pairs" of the Object object respectively represent "function or method name/function body".

Detailed explanation of jquery.extend function usage

I’ve been studying jQuery recently. Record the usage of jQuery.extend extension function.

1. Extend jQuery static methods.

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

Usage: $.test()

2. Merge multiple objects

Take jQuery.extend(css1, css2) as an example. css1 and css2 have some attributes (the method will still deal with it, here we talk about attributes).

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"}

3.深度镶套对象

新的extend()允许你更深度的合并镶套对象。下面的例子是一个很好的证明。

 // 以前的 .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” } }