refactor($interpolate): optimize watched $interpolate functions perf

Author: rodyhaddad

src/ng/interpolate.js

@@ -127,12 +127,11 @@ function $InterpolateProvider() {
       var startIndex,
           endIndex,
           index = 0,
-          parts = [],
           length = text.length,
           hasInterpolation = false,
-          fn,
+          fn = null,
           exp,
-          concat = [];
+          parts = [];
 
       while(index < length) {
         if ( ((startIndex = text.indexOf(startSymbol, index)) != -1) &&
@@ -149,10 +148,9 @@ function $InterpolateProvider() {
         }
       }
 
-      if (!(length = parts.length)) {
+      if (!parts.length) {
         // we added, nothing, must have been an empty string.
         parts.push('');
-        length = 1;
       }
 
       // Concatenating expressions makes it hard to reason about whether some combination of
@@ -169,25 +167,29 @@ function $InterpolateProvider() {
       }
 
       if (!mustHaveExpression  || hasInterpolation) {
-        concat.length = length;
-        fn = function(context) {
+        var concat = new Array(parts.length),
+            expressions = {};
+        forEach(parts, function (value, index) {
+          if (isFunction(value)) {
+            expressions[index] = value;
+            concat[index] = '';
+          } else {
+            concat[index] = value;
+          }
+        });
+        // computes all the interpolations and returns the resulting string
+        // a specific index might already be computed (cz of the scope's dirty-checking),
+        // and so its expression shouldn't be executed a 2nd time
+        // also populates the lastValues of custom watchers for internal dirty-checking
+        var getTextValue = function (scope, computedIndex, computedValue, lastValues) {
           try {
-            for(var i = 0, ii = length, part; i<ii; i++) {
-              if (typeof (part = parts[i]) == 'function') {
-                part = part(context);
-                if (trustedContext) {
-                  part = $sce.getTrusted(trustedContext, part);
-                } else {
-                  part = $sce.valueOf(part);
-                }
-                if (part === null || isUndefined(part)) {
-                  part = '';
-                } else if (typeof part != 'string') {
-                  part = toJson(part);
-                }
-              }
-              concat[i] = part;
-            }
+            forEach(expressions, function (expression, index) {
+              concat[index] = index == computedIndex
+                  ? computedValue
+                  : getStringValue(expression(scope));
+
+              if (lastValues) lastValues[index] = concat[index];
+            });
             return concat.join('');
           }
           catch(err) {
@@ -196,10 +198,63 @@ function $InterpolateProvider() {
             $exceptionHandler(newErr);
           }
         };
+        var getStringValue = function (value) {
+          value = trustedContext
+              ? $sce.getTrusted(trustedContext, value)
+              : $sce.valueOf(value);
+
+          if (value === null || isUndefined(value)) {
+            return '';
+          }
+          return isString(value) ? value : toJson(value);
+        };
+
+        fn = function(scope) {
+          return getTextValue(scope);
+        };
         fn.exp = text;
         fn.parts = parts;
-        return fn;
+
+        // watches each interpolation separately for performance
+        fn.$$beWatched = function (scope, origListener, objectEquality) {
+          var lastTextValue, lastValues = {}, watchersRm = [];
+
+          forEach(expressions, function (expression, index) {
+            watchersRm.push(scope.$watch(function watchInterpolatedExpr(scope) {
+              try {
+                return getStringValue(expression(scope));
+              } catch (err) {
+                var newErr = $interpolateMinErr('interr', "Can't interpolate: {0}\n{1}",
+                  text, err.toString());
+                $exceptionHandler(newErr);
+              }
+            }, listenerOf(index), objectEquality));
+          });
+
+          function listenerOf(index) {
+            return function interpolatedExprListener(value, oldValue) {
+              // we only invoke the origListener if the current value
+              // is not equal to the last computed value
+              // ex: if in `{{a}}-{{b}}` both values change in a digest,
+              // the listener of `a` gets invoked first, we compute the string
+              // and invoke the origListener once,
+              // and ignore it when the listener of `b` gets triggered
+              // (unless the value of `b` changes again since the last computation)
+              if (value !== lastValues[index]) {
+                var textValue = getTextValue(scope, index, value, lastValues);
+                origListener.call(this, textValue,
+                  value === oldValue ? textValue : lastTextValue, scope);
+                lastTextValue = textValue;
+              }
+            };
+          }
+
+          return function compositeWatchersRm() {
+            forEach(watchersRm, function(wRm){ wRm(); });
+          };
+        };
       }
+      return fn;
     }
 
 
@@ -239,4 +294,3 @@ function $InterpolateProvider() {
     return $interpolate;
   }];
 }
-

src/ng/rootScope.js

@@ -315,6 +315,9 @@ function $RootScopeProvider(){
        * @returns {function()} Returns a deregistration function for this listener.
        */
       $watch: function(watchExp, listener, objectEquality) {
+        if (isFunction(watchExp.$$beWatched)) {
+          return watchExp.$$beWatched(this, listener, objectEquality, watchExp);
+        }
         var scope = this,
             get = compileToFn(watchExp, 'watch'),
             array = scope.$$watchers,

test/ng/interpolateSpec.js

@@ -10,7 +10,7 @@ describe('$interpolate', function() {
 
   it('should return undefined when there are no bindings and textOnly is set to true',
       inject(function($interpolate) {
-    expect($interpolate('some text', true)).toBeUndefined();
+    expect($interpolate('some text', true)).toBeNull();
   }));
 
   it('should suppress falsy objects', inject(function($interpolate) {
@@ -70,7 +70,7 @@ describe('$interpolate', function() {
   describe('interpolating in a trusted context', function() {
     var sce;
     beforeEach(function() {
-      function log() {};
+      function log() {}
       var fakeLog = {log: log, warn: log, info: log, error: log};
       module(function($provide, $sceProvider) {
         $provide.value('$log', fakeLog);
@@ -274,4 +274,50 @@ describe('$interpolate', function() {
     }));
   });
 
+  describe('custom $$beWatched', function () {
+    it('should call the listener correctly when values change during digest',
+        inject(function ($rootScope, $interpolate) {
+      var nbCalls = 0, value;
+      $rootScope.$watch($interpolate('{{a}}-{{b}}'), function (_value) {
+        value = _value;
+        switch(++nbCalls) {
+          case 1:
+          case 2:
+            $rootScope.b++;
+            break;
+          case 3:
+          case 4:
+            $rootScope.a++;
+            break;
+        }
+      });
+      $rootScope.$apply(function () {
+        $rootScope.a = $rootScope.b = 0;
+      });
+      expect(value).toBe("2-2");
+      expect(nbCalls).toBe(5);
+    }));
+
+    it('should call the listener correctly when the interpolation is watched multiple times',
+        inject(function ($rootScope, $interpolate) {
+      var interpolateFn = $interpolate('{{a}}-{{b}}'), nbCalls = 0;
+      $rootScope.$watch(interpolateFn, function(){
+        nbCalls++;
+      });
+      $rootScope.$watch(interpolateFn, function(){
+        nbCalls++;
+      });
+
+      $rootScope.$apply(function () {
+        $rootScope.a = $rootScope.b = 0;
+      });
+      expect(nbCalls).toBe(2);
+
+      $rootScope.$apply(function () {
+        $rootScope.a = $rootScope.b = 1;
+      });
+      expect(nbCalls).toBe(4);
+    }));
+  })
+
 });