夏日博客

A-A+

jQuery 克隆对象的简单示例

2016年01月08日 前端设计 暂无评论 阅读 6 views 次

开始以为可以使用jQuery的clone（） 但后发现这个不能用了，于时gg之后发现现在jquery克隆对象使用extend插件了，下面来看看吧。

简单例子,代码如下:

  1. // 浅层复制（只复制顶层的非 object 元素）    
  2. var newObject = jQuery.extend({}, oldObject);    
  3.     
  4. // 深层复制（一层一层往下复制直到最底层）    
  5. var newObject = jQuery.extend(true, {}, oldObject);  

测试如下：

  1. var obj1 = {  
  2.   'a': 's1',  
  3.   'b': [1,2,3,{'a':'s2'}],  
  4.   'c': {'a':'s3', 'b': [4,5,6]}  
  5. }  
  6.   
  7. var obj2 = $.extend(true, {}, obj1);  
  8. obj2.a='s1s1';  
  9. obj2.b[0]=100;  
  10. obj2.c.b[0]=400;  
  11.   
  12. console.log(obj1);  
  13. console.log(obj2);  

obj2 内部元素的值改变之后，如果 obj1 的相应值保持不变，就说明复制成功。

ExtJS 也有类似的方法 Ext.apply，因此单独用 ExtJS 应该也能实现同样的功能。

后面在项目中原来使用了前端同学自己写的一个扩展 jQuery 的类库，而里边有些方法却没有实现，如live等。加上我们后台开发人员在项目中又使用了 jQuery，感觉显得很冗余。里边有个扩展的克隆对象的方法，如下：

  1. /** 
  2. 复制一个Object对像 
  3. * @param {Object} obj 要复制的Object对像 
  4. * @return {Object} 返回新对像 
  5. * @static 
  6. */  
  7. clone: function (obj) {  
  8.     var objClone;  
  9.     if (obj instanceof Array) {  
  10.         objClone = [];  
  11.         for (var i = 0; i < obj.length; i++)  
  12.             objClone[i] = Js.clone(obj[i]);  
  13.         return objClone;  
  14.     } else if (obj instanceof Object) {  
  15.         if (obj.constructor == Object) {  
  16.             objClone = new obj.constructor();  
  17.         } else {  
  18.             objClone = new obj.constructor(obj.valueOf());  
  19.         }  
  20.         for (var key in obj) {  
  21.             if (objClone[key] != obj[key]) {  
  22.                 if (typeof (obj[key]) == 'object') {  
  23.                     objClone[key] = Js.clone(obj[key]);  
  24.                 } else {  
  25.                     objClone[key] = obj[key];  
  26.                 }  
  27.             }  
  28.         }  
  29.         objClone.toString = obj.toString;  
  30.         objClone.valueOf = obj.valueOf;  
  31.         return objClone;  
  32.     }  
  33.     return obj;  
  34. }  

于是又得后台开发人员将所有引用的地方换成了使用jQuery实现，将这个方法改成了jQuery扩展，如下：

  1. $.extend({  
  2.     cloneObj: function (obj) {  
  3.         var objClone;  
  4.         if (obj instanceof Array) {  
  5.             objClone = [];  
  6.             for (var i = 0; i < obj.length; i++)  
  7.                 objClone[i] = $.cloneObj(obj[i]);  
  8.             return objClone;  
  9.         } else if (obj instanceof Object) {  
  10.             if (obj.constructor == Object) {  
  11.                 objClone = new obj.constructor();  
  12.             } else {  
  13.                 objClone = new obj.constructor(obj.valueOf());  
  14.             }  
  15.             for (var key in obj) {  
  16.                 if (objClone[key] != obj[key]) {  
  17.                     if (typeof (obj[key]) == 'object') {  
  18.                         objClone[key] = $.cloneObj(obj[key]);  
  19.                     } else {  
  20.                         objClone[key] = obj[key];  
  21.                     }  
  22.                 }  
  23.             }  
  24.             objClone.toString = obj.toString;  
  25.             objClone.valueOf = obj.valueOf;  
  26.             return objClone;  
  27.         }  
  28.         return obj;  
  29.     }  
  30. });  

试了下是没问题的，但总感觉有些多余。在What is the most efficient way to clone a JavaScript object?看到jQuery作者John Resig给出的回答是这样的,代码如下:

  1. // Shallow copy  
  2. var newObject = jQuery.extend({}, oldObject);  
  3.   
  4. // Deep copy  
  5. var newObject = jQuery.extend(true, {}, oldObject);  

可见，又是我们在造轮子了。自己扩展jQuery类库想法是好的，但想维护好不是一个人所能完成的，毕竟很多时候还要忙其他的项目。

标签：

给我留言