Explain the extend method in jQuery plug in development

  • 2020-03-29 23:50:20
  • OfStack

Jquery's extend method, called extend, is a common method we use when writing plug-ins, and it has some overloaded prototypes,
Dest is the space to be consolidated so that {} or no write

SRC is a javascript object represented by a JSON expression... So you can add method properties and so on...

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

Define in jQuery & PI; JQuery. The extend = jQuery. Fn. Extend  So these two functions are the same

  1. The prototype of Jquery extension method is:

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

It means that src1,src2,src3... Merge into dest and return the value as the merged dest, so you can see that this method has modified the structure of dest after merging. If you want to get the results of the merge but do not want to modify the structure of dest, you can use the following:

Var newSrc = $. The extend ({}, src1, src2, src3...). // that is, take "{}" as the dest parameter.

This will allow src1,src2,src3... Merge and return the result to newSrc. The following cases:

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

So the result of the merge


That is, if the following parameter has the same name as the previous parameter, then the following parameter will override the previous parameter value.

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, which is merged into the object that calls the extend method, such as:
1, $. The extend (SRC)
The method is to merge SRC into the global object of jquery, such as:

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

This is to merge the hello method into jquery's global object.
2, $. Fn. The extend (SRC)
This method merges SRC into jquery instance objects, such as:

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

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

Here are some examples of commonly used extensions:

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

This is to extend a net namespace in jquery global objects.

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

This is to extend the hello method into the previously extended Jquery's net namespace.

Jquery's extend method also has an overloaded prototype:

The extend (Boolean, dest, src1, src2, src3...).

The first parameter, Boolean, indicates whether or not to make a deep copy. The rest of the parameters are the same as the previous ones. What is a deep copy?

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

We can see that the nested subobject location:{city:"Boston"} in src1 is nested, and the nested subobject location:{state:"MA"} in src2 is also nested. The first depth copy parameter is true, so the merged result is:

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

That is to say, it will also merge nested child objects in SRC. If the first parameter Boolean is false, let's see what the merged result is, as follows:

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

The result is:


Those are the details of $.extend() that are commonly used in projects.

Related articles: