Summary of extend usage in jquery plug-in development ExtJS _jquery

Source: Internet
Author: User
Tags extend
In jquery, extend actually do plug-in when still use more, today at the same time summary jquery and Ext JS
Extend usage, first look at jquery.
1) Extend (dest,src1,src2,src3 ...);
Copy Code code as follows:

var start = {
Id:123,
COUNT:41,
Desc: ' This is information ',
Title: ' Base Object ',
Tag: ' Uncategorized ',
Values: [1,1,2,3,5,8,13]};
var more = {name: ' Los techies ', tag: ' JavaScript '};
var extra = {count:42, title:null, desc:undefined, values: [1,3,6,10]};
var extended = $.extend (start, more, extra);
Console.log (Json.stringify (extended));

The output results are:
{"id": 123,
"Count": 42,
"desc": "This is Information",
"title": null,
"Tag": "JavaScript",
"Values": [1, 3, 6, 10],
"Name": "Los Techies"}
Can see that is actually
Extend (dest,src1,src2,src3 ...);
, Will 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.
Like what:
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.
Also note that in the first example, "desc": Undefined does not appear in the result,
The original value of DESC is still retained when the spell is combined. But title:null words that will appear in the Extend results
In
2 use of other jquery extend
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.
3 Deep Copy
The former. Extend ()
Jquery.extend (False,
{Name: "John", Location: {City: "Boston"}},
{Last: ' Resig ', location: {state: ' MA '}}
);
Results:
=> {name: ' John ', Last: ' Resig ', location: {state: ' MA '}}
Jquery.extend (True,
{Name: "John", Location: {City: "Boston"}},
{Last: ' Resig ', location: {state: ' MA '}}
);
Results
=> {name: "John", Last: "Resig",
Location: {city: ' Boston ', State: ' MA '}}
3 If it is Ext JS, look at what is different
Copy Code code as follows:

var start = {
Id:123,
COUNT:41,
Desc: ' This is information ',
Title: ' Base Object ',
Tag: ' Uncategorized ',
Values: [1,1,2,3,5,8,13]};
var more = {name: ' Los techies ', tag: ' JavaScript '};
var extra = {count:42, title:null, desc:undefined,
Values: [1,3,6,10]};
var extended = ext.apply (start, more, extra); Console.log (Json.stringify (extended));

Output
{"id": 123, "Count":, "title": null, "tag": "JavaScript", "Values": [1,3,6,10], "name": "Los Techies"}
Can see, ExtJS use is apply, and Desc incredibly in the result of the combination of lost, because Ext JS think undefind things should not appear in the result of the combination, think is wiped away the original value, this should pay attention to

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.