JQuery. extend functions and Usage Details, jquery. extend usage

JQuery. extend functions and Usage Details, jquery. extend usage

Jquery. extend function details

Extends of JQuery:

The Extension Method extend of Jquery is a commonly used method in the process of writing plug-ins. This method has some heavy-load prototypes. Here, let's get to know about it.

1. The extension method prototype of Jquery is:

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

It means to merge src1, src2, src3... into the dest, and the returned value is the merged dest. It can be seen that the structure of the dest is modified after the method is merged. If you want to get the merged result but do not want to modify the dest structure, you can use the following:

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

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

That is to say, if the following parameter has the same name as the preceding parameter, the following parameter will overwrite the preceding parameter value.

Ii. dest parameter omitted

The dest parameter in the above extend method prototype can be omitted. If it is omitted, the method can only have one src parameter, in addition, the src is merged into the object that calls the extend method, for example:

1. $. extend (src)

This method combines src into jquery's global object, for example:

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

Is to merge the hello method into the global object of jquery.

2. $. fn. extend (src)

This method combines src into jquery's instance object, for example:

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

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

Below are some examples of common extension instances:

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

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

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

This is to extend the hello Method to the expanded Jquery net namespace.

III. The extend method of Jquery also has an overload prototype:

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

The first parameter 'boolean' indicates whether to perform a deep copy. The other parameters are the same as described above. 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 nested child object in src1Location: {city: "Boston"}, src2Also nesting sub-objectsLocation: {state: "MA "},If the first deep copy parameter is true, the merged result is:

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

That is to say, it will merge nested sub-objects in src. If the first parameter boolean is false, let's look at what the merging result is, as shown below:

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

The merged result is:

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

The above are some of the details that $. extend () often uses in projects.

In addition, we often use the extend () method to compile jquery plug-ins. The jquery plug-ins are of the following types:

Types of jQuery plug-ins

1. Object encapsulation method this plug-in encapsulates object methods and is used to operate jQuery objects obtained by selector. It is the most common plug-in. This type of plug-in can take advantage of the powerful advantages of the jQuery selector. A considerable number of jQuery methods are "inserted" in the kernel in the jQuery script library in this form, such as parent () method, appendTo () method, and so on.

2. encapsulate global functions to add independent functions to the jQuery namespace. For example, the commonly used jQuery. ajax () method and jQuery. trim () method with spaces at the beginning and end are all attached to the kernel as the global function plug-in.

3. selector plug-in although jQuery's selector is very powerful, in a few cases, you still need to use the 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. jQuery. extend () is used to extend the last two types of plug-ins. Both methods accept a parameter of the Object type. The "name/value pair" of the Object represents the "function or method name/function subject ".

Usage of jquery. extend Functions

JQuery is currently being studied. Record the usage of jQuery. extend extension functions.

1. Extend the jQuery static method.

$. Extend ({test: function () {alert ('test function ')}})

Usage: $. test ()

2. Merge multiple objects

For jQuery. extend (css1, css2) as an example, css1 and css2 have some attributes (the method will be similar to the processing, here we will talk about attributes ).
The extend function adds the attributes that css2 has but css2 does not have to css1. If a property of css2 and a property name of css1 are used, the attributes of css2 are used to overwrite the attributes of CSS 1 with the same name. Css1 is the final sum object. Or you can use:

Var newcss = jquery. extend (css1, css2) newcss is the new object to be merged. Var newcss = jquery. extend ({}, css1, css2) newcss is the new object to be merged, and does not destroy the structure of css1. // Usage: jQuery. extend (obj ,..) var Css = {size: "px", style: "oblique"} var Css = {size: "px", style: "oblique", weight: "bolder"} $. jQuery. extend (Css, Css) // result: the size attribute of Css is overwritten and inherits the weight attribute of Css. // Css = {size: "px", style: "oblique", weight: "bolder "}

3. Deep set object

The new extend () allows you to more deeply combine inlaid objects. The example below is a good proof.

// Previous. extend () jQuery. extend ({name: "John", location: {city: "Boston" },{ last: "Resig", location: {state: "MA "}}); // result: // =>{ name: "John", last: "Resig", location: {state: "MA" }}// new more in-depth. extend () jQuery. extend (true, {name: "John", location: {city: "Boston" }}, {last: "Resig", location: {state: "MA"}); // result // => {name: "John", last: "Resig", // location: {city: "Boston", state: "MA "}}