(1)$.extend()之浅拷贝
common.ajax = function(param) {
var mergeParam = $.extend({
timeout : 10000
} , param , {
complete : function(response) {
alert("扩展的!");
}
}
});
$.ajax(mergeParam);
}
我们以对Ajax进行二次封装为例来进行讲解浅拷贝。
上述代码就是浅拷贝。mergeParam中有三个参数:timeout、param、complete,其中timeout和complete就是我们扩展的参数,而param就是我们调用Ajax方法传递进来的参数。
对于timeout而言,它在param前面,就代表,所用户调用Ajax方法时传递的参数param中有timeout参数,则会覆盖掉我们这里扩展的timeout,使用我们传递进来的timeout,比如:
common.ajax({
timeout: 2000
});
那么就会覆盖掉“timeout : 10000”。反过来说,若用户调用Ajax方法时传递的参数param中没有有timeout参数,则会在用户调用的Ajax方法中加入“timeout: 2000”,比如下面:
用户调用:
common.ajax({
url: ...,
type : ...
});
实际效果:
common.ajax({
url: ...,
type : ...,
timeout : 10000
});
而对于complete而言,它在param后面,则和timeout相反,若param中有complete方法,它会覆盖掉param中的方法,而采用我们这里扩展的complete方法,若param中没有complete方法,则会向param中添加complete方法。比如:
用户调用:
common.ajax({
url: ...,
type : ...
complete : function(response){
alter("用户调用的");
}
});
实际效果:
common.ajax({
url: ...,
type : ...,
complete : function(response){
alter("扩展的");
}
});
补充:显然,若用户调用的Ajax方法中有complete参数,却被我们覆盖掉了,这不是一个我们想要的效果,在这里我们可以做一个判断,若用户调用的Ajax方法中有complete参数,则使用用户的,否则使用这里的complete方法,具体判断代码如下:
if(param.complete && typeof param.complete === "function") {
param.complete();
}
(2)$.extend()之深拷贝
$.extend()
的深拷贝和$.extend()
的浅拷贝,在方法调用上,深拷贝多了一个true参数:深拷贝 $.extend(true,{timeout},param)
。
光是方法调用上的区别明显不是我想讲的,真正的区别在于拷贝数据的方式不同,比如下面代码:
option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
}
};
若我们对option参数进行扩展,比如:
//深度拷贝
$.extend(true,option,data);
此时若data如下:
grid: {
left: '10%',
}
那么最终得到的效果是:
option = {
grid: {
left: '10%',
right: '4%',
bottom: '3%',
containLabel: true
}
};
从上面的例子我们可以看到,若是深度拷贝,它不再是简单的数据覆盖,而是深入到数据之中,只覆盖或者增加与它匹配的那一项,其它的参数,它都不管。