Jquery.extend function Detailed __javascript

Jquery.extend function Detailed

jquery's Extend extension method:

The extended method of jquery extend is a common method in the process of writing plug-ins, there are some overloaded prototypes, here we go to understand.

One, jquery extension method prototype is:

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

It means to src1,src2,src3 ... Merged into Dest, the return value is the merged dest, which shows that the method is modified to dest structure after merging. If you want to get the results of a merge but do not want to modify the structure of the dest, you can use the following:

var newsrc=$.extend ({},src1,src2,src3 ...) That is, "{}" as the Dest parameter

This can be src1,src2,src3 ... To merge, and then return the merge results to NEWSRC. The following example:

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

Then the combined results

Result={name: "Jerry", Age:21,sex: "Boy"}

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

Ii. omitting dest Parameters

The Dest parameter in the above extend method prototype can be omitted, and if omitted, the method can have only one src parameter, and the SRC is merged into an object that invokes the Extend method, such as:

1, $.extend (SRC)

The approach is to merge SRC into the global object of jquery, such as:

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

is to incorporate the Hello method into the global object of jquery.

2, $.fn.extend (SRC)

This method merges src into the instance object of jquery, such as:

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

is to merge the Hello method into the instance object of jquery.

The following example illustrates several common extension instances:

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

This is the extension of a net namespace in the jquery global object.

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

This is to extend the Hello method to the net namespace of the previously extended jquery.

Three, jquery extend method also has an overloaded prototype:

Extend (BOOLEAN,DEST,SRC1,SRC2,SRC3 ...)

The first argument Boolean represents whether to make a deep copy, the rest of the arguments are consistent with the previous description, and what is called a deep copy, let's look at an example:

var Result=$.extend (True, {}, 
  {name: "John", Location: {City: "Boston", County: "USA"}}, 
  {last: "Resig", Locatio N: {state: "MA", County: "" "});

We can see that the nested SRC1 in the location:{city: "Boston"},src2 also have a nested object location:{state: "MA"}, and the first depth copy parameter is true, Then the result of the merger is:

Result={name: "John", Last: "Resig",
    location:{city: "Boston", State: "MA", County: "The"

That is, it merges the nested subforms in SRC, and if the first argument is false, let's see what the result of the merge looks like:

var result=$.extend (False, {}, 
{name: "John", location:{city: "Boston", County: "USA"}}, 
{last: "Resig", Locati On: {state: "MA", County: "" "} 
          

Then the result of the merger is:

Result={name: "John", Last: "Resig", Location:{state: "MA", County: "Our"}

These are some of the details that $.extend () will often use in the project.

Add: We will often use the extend () method to write jquery plug-ins, then the types of jquery plug-ins are as follows:

types of jquery plug-ins

1. Encapsulation object method This plug-in is the most common type of plug-in that encapsulates object methods and is used to manipulate jquery objects obtained through selectors. Such plug-ins can play a powerful role in the jquery selector, and a significant portion of the jquery approach is "plugged" into the kernel within the jquery script library, such as the parent () method, the Appendto () method, and so on.

2. Encapsulating global functions can add separate functions to the jquery namespace. such as the commonly used Jquery.ajax () method, to the Jquery.trim () method, is the internal jquery as a global function plug-ins attached to the kernel.

3, selector plug-in Although the selection of jquery is very powerful, but in a few cases, or will need to use the selector plug-ins to expand some of their favorite selectors.

JQuery.fn.extend () is used to extend the first of the 3 types mentioned above, and Jquery.extend () is used to extend the latter two plug-ins. Both of these methods accept a parameter, which is type object. The "name/value pairs" of object objects represent the function or method name/function body respectively.

Jquery.extend function Usage Detailed

Recently in the study of jquery. Write down the usage of the jquery.extend extension function.

1, extend the jquery static method.

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

Usage: $.test ()

2. Merging multiple objects

For Jquery.extend (CSS1,CSS2), for example, CSS1,CSS2 has some attributes (the FA will be better than the processing, here's the attribute).
The Extend function adds an attribute with Css2 and css2 to the CSS1, and if one of the CSS2 's properties is enjoyed with a Css1 property name, it overrides the Css2 attribute with the same name. Css1 is the final whole and object. Or you can also use:

var newcss = jquery.extend (CSS1,CSS2) NEWCSS is the new merged object.


var newcss = jquery.extend ({},css1,css2) NEWCSS is the new merged object. And there is no damage to the CSS1 structure.

//Usage: jquery.extend (obj,obj,obj,..)
var css={size: "px", Style: "Oblique"}
var css={size: "px", Style: "Oblique", Weight: "Bolder"}
$.jquery.extend ( CSS,CSS)
//Result: The Size property of the CSS is overwritten and inherits the CSS weight attribute
//css = {size: "px", Style: "Oblique", Weight: "Bolder"}

3. The depth inserts the Set object

The new extend () allows you to merge the nested objects more deeply. The following example is a good proof.

 Extend () Jquery.extend ({name: "John", Location: {City: "Boston"}}, {LA  
   ST: "Resig", Location: {state: "MA"}}); Result://=> {name: "John", Last: "Resig", Location: {state: "MA"}}//New deeper. Extend () Jquery.extend (t  
 Rue, {name: ' John ', location: {city: ' Boston '}}, {last: ' Resig ', location: {state: "MA"}}); Result//=> {name: ' John ', Last: ' Resig ',//location: {city: ' Boston ', State: ' MA '}}