add dependency tracking and caching for computed properties

kbrsh · Mar 24, 2017 · 3669059 · 3669059
1 parent 7808294
commit 3669059
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 7 deletions.
diff --git a/dist/moon.js b/dist/moon.js
@@ -35,12 +35,42 @@
      */
     var initComputed = function (instance, computed) {
       var setComputedProperty = function (prop) {
+        // Create dependency map
+        instance.$observer.dep.map[prop] = [];
+
         // Create Getters/Setters
         var properties = {
           get: function () {
-            return computed[prop].get.call(instance);
+            // Property Cache
+            var cache = null;
+            // Any Dependencies of Computed Property
+            var deps = instance.$observer.dep.map[prop];
+            // If the computed property has changed
+            var changed = true;
+
+            // Iterate through dependencies, and see if any have been changed
+            for (var i = 0; i < deps.length; i++) {
+              changed = instance.$observer.dep.changed[deps[i]];
+              if (changed) {
+                break;
+              }
+            }
+
+            if (changed) {
+              // Dependencies changed, recalculate dependencies, cache the output, and return it
+              instance.$observer.dep.target = prop;
+              cache = computed[prop].get.call(instance);
+              instance.$observer.cache[prop] = cache;
+              instance.$observer.dep.target = null;
+            } else {
+              // Dependencies didn't change, return cached value
+              cache = instance.$observer.cache[prop];
+            }
+
+            return cache;
           }
         };
+
         if (computed[prop].set) {
           properties.set = function (val) {
             return computed[prop].set.call(instance, val);
@@ -60,9 +90,15 @@
     function Observer(instance) {
       this.instance = instance;
       this.cache = {};
+      this.dep = {
+        target: null,
+        map: {},
+        changed: {}
+      };
     }
 
-    Observer.prototype.notify = function () {
+    Observer.prototype.notify = function (key) {
+      this.dep.changed[key] = true;
       queueBuild(this.instance);
     };
 
@@ -93,6 +129,7 @@
         instance.$queued = true;
         setTimeout(function () {
           instance.build();
+          instance.$observer.dep.changed = {};
           callHook(instance, 'updated');
           instance.$queued = false;
         }, 0);
@@ -1169,6 +1206,9 @@
      * @return {String} Value of key in data
      */
     Moon.prototype.get = function (key) {
+      if (this.$observer.dep.target) {
+        this.$observer.dep.map[this.$observer.dep.target].push(key);
+      }
       return this.$data[key];
     };
 
@@ -1179,7 +1219,7 @@
      */
     Moon.prototype.set = function (key, val) {
       resolveKeyPath(this, this.$data, key, val);
-      this.$observer.notify();
+      this.$observer.notify(key);
     };
 
     /**

diff --git a/dist/moon.min.js b/dist/moon.min.js
diff --git a/src/instance/methods.js b/src/instance/methods.js
@@ -6,6 +6,9 @@
  * @return {String} Value of key in data
  */
 Moon.prototype.get = function(key) {
+  if(this.$observer.dep.target) {
+    this.$observer.dep.map[this.$observer.dep.target].push(key);
+  }
   return this.$data[key];
 }
 
@@ -16,7 +19,7 @@ Moon.prototype.get = function(key) {
  */
 Moon.prototype.set = function(key, val) {
   resolveKeyPath(this, this.$data, key, val);
-  this.$observer.notify();
+  this.$observer.notify(key);
 }
 
 /**

diff --git a/src/observer/computed.js b/src/observer/computed.js
@@ -5,12 +5,42 @@
  */
 var initComputed = function(instance, computed) {
   var setComputedProperty = function(prop) {
+    // Create dependency map
+    instance.$observer.dep.map[prop] = [];
+
     // Create Getters/Setters
     var properties = {
       get: function() {
-        return computed[prop].get.call(instance)
+        // Property Cache
+        var cache = null;
+        // Any Dependencies of Computed Property
+        var deps = instance.$observer.dep.map[prop];
+        // If the computed property has changed
+        var changed = true;
+
+        // Iterate through dependencies, and see if any have been changed
+        for(var i = 0; i < deps.length; i++) {
+          changed = instance.$observer.dep.changed[deps[i]];
+          if(changed) {
+            break;
+          }
+        }
+
+        if(changed) {
+          // Dependencies changed, recalculate dependencies, cache the output, and return it
+          instance.$observer.dep.target = prop;
+          cache = computed[prop].get.call(instance);
+          instance.$observer.cache[prop] = cache;
+          instance.$observer.dep.target = null;
+        } else {
+          // Dependencies didn't change, return cached value
+          cache = instance.$observer.cache[prop];
+        }
+
+        return cache;
       }
     };
+
     if(computed[prop].set) {
       properties.set = function(val) {
         return computed[prop].set.call(instance, val);

diff --git a/src/observer/observer.js b/src/observer/observer.js
@@ -1,8 +1,14 @@
 function Observer(instance) {
   this.instance = instance;
   this.cache = {};
+  this.dep = {
+    target: null,
+    map: {},
+    changed: {}
+  };
 }
 
-Observer.prototype.notify = function() {
+Observer.prototype.notify = function(key) {
+  this.dep.changed[key] = true;
   queueBuild(this.instance);
 }
diff --git a/src/util/util.js b/src/util/util.js
@@ -25,6 +25,7 @@ var queueBuild = function(instance) {
     instance.$queued = true;
     setTimeout(function() {
       instance.build();
+      instance.$observer.dep.changed = {};
       callHook(instance, 'updated');
       instance.$queued = false;
     }, 0);