Jquery.extend function (reprint)

Reprinted from Http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html

jquery's Extend extension method:

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

One, the extension method of jquery prototype is:　　　

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

Its meaning is to be src1,src2,src3 ... Merge into Dest, the return value is the merged dest, so you can see that the method is merged, the structure of the dest is modified. If you want to get the results of the merge without modifying the structure of the dest, you can use the following:

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

This will allow the src1,src2,src3 ... Merge, and then return the merge results to NEWSRC. The following example:

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

Then the result of the merger

result={name:"Jerry", Age:+, Sex:"boy"}

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

second, omit the dest parameter

The Dest parameter in the Extend method prototype above can be omitted, if omitted, then the method can have only one src parameter, and it is to merge the src into the object calling the Extend method, such as:

1, $.extend (SRC)

The 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 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 examples illustrate 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 the extension of the Hello method into the net namespace of the previously extended jquery.

third, the Extend method of jquery also has an overloaded prototype:

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

The first parameter, Boolean, indicates whether to make a deep copy, the rest of the parameters are consistent with what was described earlier, what is called deep copy, and we look at an example:

var result=$.extend (True, {}, {name: "john" , location: {City: "boston ",county:" usa "resig ", Location: {state: "ma" ,county: "china" Span style= "color: #000000;" >} } );

We can see that the nested SRC1 in the location:{city: "Boston"},SRC2 also nested the object location:{state: "MA"}, the first deep copy parameter is true, then the result of the merge is:

result={name: "john" ,last: "resig location:{ City: "boston" ,state: "ma" ,county: "china" Span style= "color: #000000;" >}}

That is, it merges the nested objects in SRC as well, and if the first argument is a Boolean false, let's see what the result of the merge is, as follows:

var result=$.extend (False, {}, {name: "john" , location:{city: "boston ",county:" usa "resig ", Location: {state: "ma" ,county: "china" Span style= "color: #000000;" >} } );

Then the result of the merger is:

result={name:"John", Last:"resig", Location:{state:"MA ", County:"China"}}

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

=========================

Extend and Fn.extend of jquery

jquery has two methods for developing plug-ins, namely:

JQuery.fn.extend (object);

Jquery.extend (object);

Jquery.extend (object); To extend the jquery class itself. Adds a new method to the class.

JQuery.fn.extend (object); Adds a method to a jquery object.

What's the FN thing? If you look at the jquery code, it's not hard to find.

Jquery.fn = Jquery.prototype = {

Init:function (Selector, context) {//....

//......

};

The original Jquery.fn = Jquery.prototype. It's certainly not strange to prototype.

Although JavaScript does not have a clear class concept, it is more convenient to use a class to understand it.

jquery is a well-encapsulated class, such as we use the statement $ ("#btn1") to generate an instance of the jquery class.

Jquery.extend (object); Adding a class method to the jquery class can be understood as adding a static method. Such as:

$.extend ({

Add:function (A, b) {return a+b;}

});

Adds a "static method" for jquery to add, which can then be used where jquery is introduced,

$.add (3,4); Return 7

JQuery.fn.extend (object); The extension to Jquery.prototype is to add "member functions" to the jquery class. An instance of the jquery class can use this "member function".

For example, we want to develop a plugin, make a special edit box, when it is clicked, then alert the contents of the current edit box. You can do this:

Java code

2. $.fn.extend ({
4. Alertwhileclick:function () {
6. $ (this). Click (function () {
8. Alert (this). Val ());
10. });
12. }
14. });
18. $ ("#input1"). Alertwhileclick (); //page: <input id= "INPUT1" type= "text"/>

$ ("#input1") is a jquery instance, and when it calls the Member method Alertwhileclick, it implements the extension, which pops up the contents of the current edit each time it is clicked.

Jquery.extend function (reprint)