angular之scope.$watch

某“大神”挖了个陨石坑，我于是乎似懂非懂的接手，玩了一个月angular。现在项目告一段落，暂别了繁重的重复性工作，可以开始回顾、认真的折腾下之前犹抱琵琶的angular。

angular吸引人的特性之一就是双向绑定，model有变化view自动更新。一说到自动执行，首先浮到脑海的必须是监听和回调函数。angular也确实是这样做的，scope.$watch就是此行为的接口。一如所有的类库或框架，使用起来很简单，实现却并不容易。

我不是一个执念于从零开始的人，喜欢站在巨人的肩上，这篇随笔取材于此：创建你自己的AngularJS。

首先，先搭建一个单元测试环境，如果嫌麻烦当然可以不用，如果不会可以在node环境下输入以下命令行：

npm install -g grunt //安装gruntnpm install -g bower //安装bowernpm install -g yo //安装yeomannpm install -g generator-angular //安装angular生成器yo angular //生成angular项目文件npm install //安装项目依赖包bower install //安装前端依赖库grunt test //执行单元测试

以上命令来自记忆，或有遗漏，总之如果执行成功表示环境搭建完毕。

接下来开始编写自己的scope，我们先整理下测试环境，在angular/test/spec下建立两个文件夹，命名随意，我是define和unit。

修改angular/test/karma.conf.js中的files字段：

files: ["test/spec/define/*.js","test/spec/unit/*.js"]

然后可以新建Scope类了，在spec/define中新建scope.js：

'use strict';function Scope() {}

是的，只是一个简单的构造函数。

然后在spec/unit中新建test.js，编写单元测试语句：

'use strict';describe("Scope", function() {it("can be constructed and used as an object", function() {var scope = new Scope();scope.prop = 1;expect(scope.prop).toBe(1);})});

如无意外，打印出来的结果是这样的：

PhantomJS 1.9.8 (Windows 8): Executed 1 of 1 SUCCESS (0 secs / 0.001 secs)

其中PhantomJS是一个不展示用户界面的浏览器，测试的代码就是在这里面跑的。

模型已经搭建完成，现在我们要实现的是监听scope内部prop属性的变动。要实现监听，首先内部要有监听器的队列，其次要有添加监听器的函数，最后还要有轮询检测的函数，分别在scope.js中添加这三个内容：

'use strict';function Scope() {this.$$watchers = [];}Scope.prototype.$watch = function() {var watcher = {};this.$$watchers.unshift(watcher);}Scope.prototype.$digest = function() {}

一般类库框架，对于添加监听器的函数都支持两个参数，字符串和回调函数，比如jquery中的on。对于我们来说，字符串应该是要监听的属性。修改$watch函数如下：

Scope.prototype.$watch = function(prop, callback) {var watcher = {prop: prop,callback: callback};this.$$watchers.unshift(watcher);}

现在轮到$digest函数，轮询函数的任务在于遍历所有的监听器，比较当前属性和上一个属性是否不同，不同则执行监听器中的callback。等等，上一个属性怎么获取的，看来添加监听器的时候应该保存一个初始值，于是两个函数都要修改：

Scope.prototype.$watch = function(prop, callback) {var watcher = {prop: prop,callback: callback,last: this[prop]};this.$$watchers.unshift(watcher);};Scope.prototype.$digest = function() {var scope = this;scope.$$watchers.forEach(function(watcher) {if(scope[watcher.prop] !== watcher.last) {watcher.last = scope[watcher.prop];watcher.callback();} });};

现在感觉功能已经实现了，但实际上有没有用呢，要写个单元测试验证一下，修改test.js：

'use strict';describe("Scope", function() {it("can be constructed and used as an object", function() {var scope = new Scope(),callback = jasmine.createSpy(); //创建一个可检测是否被调用的回调函数scope.prop = 1; //初始化值scope.$watch('prop', callback); //添加监听函数scope.prop = 2; //重新赋值scope.$digest(); //轮询一遍expect(callback).toHaveBeenCalled(); //检测回调函数是否被调用 });});

执行grunt test，得到的结果如下：

PhantomJS 1.9.8 (Windows 8): Executed 1 of 1 SUCCESS (0.004 secs / 0.003 secs)

可见是正常可用的，但是不是哪里写错了导致怎么执行都正常呢，我们注释掉重新赋值的这行：

//scope.prop = 2;

得到的测试结果如下：

PhantomJS 1.9.8 (Windows 8): Executed 1 of 1 (1 FAILED) ERROR (0.01 secs / 0.002 secs)

严格测试下，添加两个监听器：

'use strict';describe("Scope", function() {it("can be constructed and used as an object", function() {var scope = new Scope(),callback1 = jasmine.createSpy(),callback2 = jasmine.createSpy();scope.prop1 = 1;scope.prop2 = 1;scope.$watch('prop1', callback1);scope.$watch('prop2', callback2);scope.prop1 = 2;scope.prop2 = 2;scope.$digest();expect(callback1).toHaveBeenCalled();expect(callback2).toHaveBeenCalled();});});

结果也是没有问题的：

PhantomJS 1.9.8 (Windows 8): Executed 1 of 1 SUCCESS (0.004 secs / 0.002 secs)

基本功能是没问题了，但还需要优化。

首先，代码不够“优雅”。监听器中的prop属性唯一的用处就是在$digest中供取值，而且为此$digest需要将this重新付给scope变量导致$digest中代码偏乱。把scope.js的代码整理一下：

'use strict';function Scope() {this.$$watchers = [];}Scope.prototype.$watch = function(prop, callback) {var scope = this,watcher = {get: function() {return scope[prop];},callback: callback,last: scope[prop]};scope.$$watchers.unshift(watcher);};Scope.prototype.$digest = function() {this.$$watchers.forEach(function(watcher) {if(watcher.get() !== watcher.last) {watcher.last = watcher.get();watcher.callback();} });};

这样是不是整洁多了？

还有，回调函数现在是不传入参数的，而按照习惯来说，应该传入新值和旧值吧。所以要对$digest和test.js作出修改：

Scope.prototype.$digest = function() {this.$$watchers.forEach(function(watcher) {if(watcher.get() !== watcher.last) {watcher.callback(watcher.get(), watcher.last);watcher.last = watcher.get();} });};

'use strict';describe("Scope", function() {it("can be constructed and used as an object", function() {var scope = new Scope(),newValue, oldValue,callback = function(newV, oldV) {newValue = newV;oldValue = oldV;};scope.prop = 1;scope.$watch('prop', callback);scope.prop = 2;scope.$digest();expect(newValue).toBe(2);expect(oldValue).toBe(1);});});

测试的结果是ok的。

最后，当我们在回调函数中对设置了监听器的属性进行赋值时，会出现问题，比如修改test.js：

'use strict';describe("Scope", function() {it("can be constructed and used as an object", function() {var scope = new Scope(),callback1 = function(newV, oldV) {scope.prop2 = 2;scope.counter++;},callback2 = function(newV, oldV) {scope.prop1 = 2;scope.counter++;};scope.prop1 = 1;scope.prop2 = 1;scope.counter = 0;scope.$watch('prop1', callback1);scope.$watch('prop2', callback2);scope.prop1 = 2; //失败//scope.prop2 = 2; //成功 scope.$digest();expect(scope.counter).toBe(2);});});

注意注释的部分，为什么会产生这种偏差呢？因为在$watch中，我们是使用unshift插入监听器的，当在callback1中设置prop2的时候，prop2的监听器已经被轮询过了，所以不再会调用。

那怎么解决这一问题呢？这里就要使用到dirty-checking了。在$digest中不停的对监听器进行轮询，但最少轮询一次，也就是do...while...。当有回调函数被调用时，则置整个轮询的dirty为true，需要进行下一次轮询；当一次轮询中没用任何回调函数被调用，则终止轮询。修改$digest如下：

Scope.prototype.$digest = function() {var dirty;do {dirty = false;this.$$watchers.forEach(function(watcher) {if(watcher.get() !== watcher.last) {dirty = true;watcher.callback(watcher.get(), watcher.last);watcher.last = watcher.get();} });} while(dirty)};

但这样做有一个致命的问题就是，当回调函数这样的时候：

callback1 = function(newV, oldV) {scope.prop2 += 1;scope.counter++;},callback2 = function(newV, oldV) {scope.prop1 += 1;scope.counter++;};

PhantomJS表示，你根本停不下来：

WARN [PhantomJS 1.9.8 (Windows 8)]: Disconnected (1 times), because no message in 10000 ms.Warning: Task "karma:unit" failed. Use --force to continue.

这里就要设置一个while循环的上限值TTL（Time To Live）：

Scope.prototype.$digest = function() {var dirty, ttl = 10;do {dirty = false;ttl--;this.$$watchers.forEach(function(watcher) {if(watcher.get() !== watcher.last) {dirty = true;watcher.callback(watcher.get(), watcher.last);watcher.last = watcher.get();} });} while(dirty && ttl > 0)};

好了，到这里就结束了。现在去看angular中scope的source code，一定能看到很多眼熟的东西。

如果觉得《angular之scope.$watch》对你有帮助，请点赞、收藏，并留下你的观点哦！