jquery plug-in development summary of extend usage in extjs_jquery

In jquery, extend is actually used more often when making plug-ins. Today we will summarize the use of extend in jquery and ext js at the same time. Let’s look at the extend usage in jquery first.

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

Copy code The code is 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 result is:
{ "id": 123,
"count": 42,
"desc": "this is information",
"title": null,
"tag": "javascript",
"values": [1, 3, 6, 10],
"name": "Los Techies"}
As you can see, it is actually
extend(dest,src1,src2,src3...);
, extending src1,src2,src3.. .Merge into dest, and the return value is the merged dest. It can be seen that this method modifies the structure of dest after merging. If you want to get the merged result but don't want to modify the structure of dest, you can use it as follows:
var newSrc=$.extend({},src1,src2,src3...)//That is, change "{}" as dest parameter.
For example:
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
Then after merging The result
result={name:"Jerry",age:21,sex:"Boy"}
That is to say, if the following parameters have the same name as the previous parameters, then the latter ones will overwrite the previous ones. parameter value.
Also note that in the first example, "desc": undefined will not appear in the result.
When combined, the original value of desc is still retained. But if title:null, it will appear in the result of extend
.

2) Other usages of jquery extend 1. $.extend(src)
This method is to merge src into the global object of jquery, such as:
$ .extend({ hello:function(){alert('hello');} });
It is to merge the hello method into the global object of jquery.
　2. $.fn.extend(src)
This method merges src into the jquery instance object, such as:
$.fn.extend({ hello:function(){alert(' hello');} });
　 is to merge the hello method into the jquery instance object.
Here are some commonly used extension examples:
$.extend({net:{}});
This is to extend a net namespace in the jquery global object.
$.extend($.net,{ hello:function(){alert('hello');} })
This is to extend the hello method into the previously extended Jquery net namespace.
3 Deep copy
// Previous.extend()
jQuery.extend( false,
{ name: “John”, location: { city: “Boston” } },
{ last: “Resig”, location: { state: “MA” } }
);
// result:
// => { name: “John”, last: “Resig”, location: { state: “MA” } }
jQuery.extend( true,
{ name: “John”, location: { city: “Boston” } },
{ last: “Resig”, location: { state: “MA” } }
);
// result
// => { name: “John”, last: “Resig”,
// location: { city: “Boston”, state: “MA” } }

3) If it is ext js, look at the difference :

Copy code The code is 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": 42, "title": null, "tag": "javascript", "values": [1,3,6,10], "name": "Los Techies"}
You can see that apply is used in extjs, and desc is actually lost in the combined result, because extjs thinks that the undefind thing should not appear in the combined result, and thinks that the original one is erased. It’s worth it, you should pay attention to this