最近用到一个web ui插件,不过他的调用时全局变量,
也就是说一个页面只能用一次,这个插件挺好用的只是我的页面需要2个以上
这样的插件,所以我想到了js对象的克隆。
思路:克隆一个对象(不是引用,引用还是同一个对象),然后
把新的对象的关键属性(比如id)改改,这样就变成了2个不同的对象。
我可以在页面对这2个对象进行改动而互不影响。
遗憾的是js没有现成的clone方法,需要自己写。
网上也有人写过这样的方法,不过会有问题,因为要递归。
而我试了一下,真的出了问题,根本不能用。
不过jquery的extend可以实现,这个经过实际测试,所以今天记录下来。
// 浅层复制(只复制顶层的非 object 元素)
//var newObject = jQuery.extend({}, oldObject);
// 深层复制(一层一层往下复制直到最底层)
//var newObject = jQuery.extend(true, {}, oldObject);
function clone(o) {
if (!o) {
return o;
} else {
var c;
if (Object.prototype.toString.apply(o) === '[object Array]') {
c = [];
for (var i = 0; i < o.length; i++) {
c.push(clone(o[i]));
}
// 采用这种判断,而非typeof(o) === 'object',这里只处理Object,
//而不处理其他包括Array、String、Date、Function等,但由new创建的Function对象的也是Object
} else if (Object.prototype.toString.call(o) === '[object Object]') {
c = {};
for (var p in o) {
c[p] = clone(o[p]);
}
} else {
return o;
}
return c;
}
}
function clonedd(myObj){
if(typeof(myObj) != 'object') return myObj;
if(myObj == null) return myObj;
var myNewObj = new Object();
for(var i in myObj)
myNewObj[i] = clonedd(myObj[i]);
return myNewObj;
}
function myclone(obj){
var arr1 = new Array();
arr1.push(obj);
var arr2 = [].concat(arr1);
var res=arr2[0];
return res;
}
// 浅层复制(只复制顶层的非 object 元素)
//var newObject = jQuery.extend({}, oldObject);
// 深层复制(一层一层往下复制直到最底层)
//var newObject = jQuery.extend(true, {}, oldObject);
下面是我使用全局变量navTab,
复制这个变量得到a,再改变它的一个属性id,ok完成复制。
$(function(){
navTab.init({id:"navTab"});
var a = jQuery.extend(true, {}, navTab);
a.init({id:"navTab2"});
});