perf(ngClass): optimize the case of static map of classes with large objects by refactor

Author: drpicox

src/ng/directive/ngClass.js

@@ -9,11 +9,10 @@ function classDirective(name, selector) {
       link: function(scope, element, attr) {
         var oldVal;
 
-        // shortcut: if it is clearly a map of classes do not copy values, they are supposed to be boolean (truly/falsy)
-        scope[staticMapClassRegEx.test(attr[name]) ? '$watchCollection' : '$watch'](attr[name], ngClassWatchAction, true);
+        scope.$watch(ngClassParseClasses, ngClassWatchAction);
 
         attr.$observe('class', function(value) {
-          ngClassWatchAction(scope.$eval(attr[name]));
+          ngClassWatchAction(ngClassParseClasses());
         });
 
 
@@ -22,7 +21,7 @@ function classDirective(name, selector) {
             // jshint bitwise: false
             var mod = $index & 1;
             if (mod !== (old$index & 1)) {
-              var classes = arrayClasses(scope.$eval(attr[name]));
+              var classes = stringClasses(scope.$eval(attr[name])).split(' ');
               mod === selector ?
                 addClasses(classes) :
                 removeClasses(classes);
@@ -70,17 +69,23 @@ function classDirective(name, selector) {
           }
         }
 
+        function ngClassParseClasses() {
+          var classVal = scope.$eval(attr[name]);
+          var classes = stringClasses(classVal);
+          return classes;
+        }
+
         function ngClassWatchAction(newVal) {
           if (selector === true || scope.$index % 2 === selector) {
-            var newClasses = arrayClasses(newVal || []);
+            var newClasses = newVal.split(' ');
             if (!oldVal) {
               addClasses(newClasses);
-            } else if (!equals(newVal,oldVal)) {
-              var oldClasses = arrayClasses(oldVal);
+            } else {
+              var oldClasses = oldVal.split(' ');
               updateClasses(oldClasses, newClasses);
             }
+            oldVal = newVal;
           }
-          oldVal = shallowCopy(newVal);
         }
       }
     };
@@ -99,24 +104,18 @@ function classDirective(name, selector) {
       return values;
     }
 
-    function arrayClasses(classVal) {
-      var classes = [];
+    function stringClasses(classVal) {
+      var classes;
       if (isArray(classVal)) {
-        forEach(classVal, function(v) {
-          classes = classes.concat(arrayClasses(v));
-        });
+        classes = classVal.map(stringClasses).join(' ');
         return classes;
-      } else if (isString(classVal)) {
-        return classVal.split(' ');
       } else if (isObject(classVal)) {
-        forEach(classVal, function(v, k) {
-          if (v) {
-            classes = classes.concat(k.split(' '));
-          }
-        });
+        classes = Object.keys(classVal).filter(function(k) {
+          return classVal[k];
+        }).join(' ');
         return classes;
       }
-      return classVal;
+      return classVal || '';
     }
   }];
 }

test/ng/directive/ngClassSpec.js

@@ -415,7 +415,7 @@ describe('ngClass', function() {
     $rootScope.verylargeobject = {very: 'largeobject'};
     $rootScope.$digest();
 
-    expect($rootScope.$$watchers[0].last).toEqual(jasmine.any(Number));
+    expect(JSON.stringify($rootScope.$$watchers[0].last)).not.toContain('largeobject');
   }));
 
 });