在时间属性上慎用Angular.js1.4的“angular.merge”函数

谁践踏了优雅 2022-08-10 08:47 192阅读 0赞

# 在时间属性上慎用Angular.js1.4的“angular.merge”函数 #

原文：[Pay Attention to “angular.merge” in 1.4 on Date Properties][Pay Attention to _angular.merge_ in 1.4 on Date Properties]

今天我将应用从Angular.js1.3.9升级到1.4的时候，发现了一些Bug。在经过一翻研究后，发现它们与时间属性及1.4中的“angular.merge”函数有关。

在官方文档中，“angular.merge”的表述如下：

> 复制src对象中的可枚举属性到dst对象中，以深度扩展目标对象“dst”。

同时也提到了与先前版本中的”angular.extend“的区别。

> 与”extend()”不同，在进行深度复制时，”merge()”支持递归复制。

让我们来看一个简单的例子，在下面的代码中，作用域内有一个源对象和一个自定义对象，接着我用”angular.extend“将自定义对象复制到源对象中。

$scope.source = {
       name: 'Shaun',
       age: 35,
       birthDate: new Date(1997, 5, 27),
       skills: {
         dotNet: {
           level: 'expert',
           years: 10
         },
         javaScript: {
           level: 'newbie',
           years: 2
         }
       },
       mvp: [
         2011,
         2012,
         2013,
         2014,
         2015
       ]
     };
    
     $scope.custom = {
       name: 'Ziyan',
       age: 35,
       skills: {
         dotNet: {
           level: 'hero', 
           years: 100,
           active: true
         },
       },
       mvp: [
         2016
       ]
     };
    
     $scope.extend = angular.extend({}, $scope.source, $scope.custom);

从结果中我们可以看到，“angular.extend”执行的是浅拷贝，像“name”,”age”和“birthDate”这些原始属性值已经合并了，但因为“skills”和”mvp”是对象和数组，”angular.extend“会复制全部值，而不是数组或对象中的成员。

![这里写图片描述][image_4.png]

现在让我们用“angular.merge”来复制：

$scope.merge = angular.merge({}, $scope.source, $scope.custom);

我们可能看到，当用“angular.merge”的时候，对象属性是递归复制的。

![这里写图片描述][image_thumb_2.png]

到目前为止，一切看起来还不错。但是有些人可能会发现，在使用“angular.merge”的时候，其中一个属性“birthDate”被设成了空对象。

![这里写图片描述][image_thumb_3.png]

如果深入研究angular.js的源码，我们会发现，无论是“angular.extend”还是“angular.merge”都调用了“baseExtend”这个内部函数。它将多个对象合并到目标对象，用一个标志参数来表明是否为深度合并。

在这个函数内部，会遍历每个可枚举属性，将值复制到目标对象。如果源属性是一个对象并且需要深度复制，Angular.js会在目标对象中创建一个空对象，并且对这个属性递归执行这个函数。

除了日期之外，它几乎可以处理所有情况。如果我们定义了一个日期属性，例如“birthDate”，它就会用“angular.isObject”检查这个属性是否是为对象，返回的是“true”。所以它会在目标对象中创建一个属性名为“birthDate”的空对象，并且对“birthDate”调用“baseExtend”。但是因为“birthDate”的属性为Date，并不是可枚举属性，所以这个对象不会分配到任何数据。这就是为什么结果中”birthDate”属性为空的原因。

如果我将Angular.js 中的“baseExtend”函数复制到作用域内，并将代码改成如下形式，当属性为Date时，也会执行简单的复制了。

$scope.$baseExtend = function (dst, objs, deep) { 
       for (var i = 0, ii = objs.length; i < ii; ++i) {
         var obj = objs[i];
         if (!angular.isObject(obj) && !angular.isFunction(obj)) {
          console.log('[' + obj + '] = (skip)');
           continue;
         }
         var keys = Object.keys(obj);
         for (var j = 0, jj = keys.length; j < jj; j++) {
           var key = keys[j];
           var src = obj[key];
           // perform deep copy if
           // 1. spcified by user
           // 2. source property is an object
           // 3. source property is NOT a date
           if (deep && angular.isObject(src) && !angular.isDate(src)) {
             if (!angular.isObject(dst[key])) {
               console.log('[' + key + '] = (Try copy an object to an non-object, create an empty for deep copy.)');
               dst[key] = angular.isArray(src) ? [] : {};
             }
             $scope.$baseExtend(dst[key], [src], true);
           } 
           else {
             dst[key] = src;
    
             console.log('[' + key + '] = ' + src);
           }
         }
       }
       return dst;
     };
    
     $scope.sample = $scope.$baseExtend({}, [$scope.source, $scope.custom], true);

结果如下：

![这里写图片描述][image_thumb_4.png]

## 总结： ##

将框架升级到新版本是一种冒险行为。我们需要进行大量的回归测试，以确保不会出现任何问题。我在执行E2E测试时发现了这个问题。我想这是Angular.js的Bug，我已经将这个[问题][Link 1]贴了出来。在他们确认和修改之前，在你的应用中，慎用“angular.merge”这个函数。

[Pay Attention to _angular.merge_ in 1.4 on Date Properties]: http://geekswithblogs.net/shaunxu/archive/2015/05/29/pay-attention-to-quotangular.mergequot-in-1.4-on-date-properties.aspx
[image_4.png]: /images/20220731/16ab18cbbe094d328dc4a89b6fa9b035.png
[image_thumb_2.png]: /images/20220731/6b20e0be4784474a8765b2b1c0bccafe.png
[image_thumb_3.png]: /images/20220731/842f4e158bb14c6e846fd14be198f44b.png
[image_thumb_4.png]: /images/20220731/9d34e649630c4a92bfc5e054dafeadd4.png
[Link 1]: https://github.com/angular/angular.js/issues/11974