某“大神”挖了个陨石坑，我于是乎似懂非懂的接手，玩了一个月angular。现在项目告一段落，暂别了繁重的重复性工作，可以开始回顾、认真的折腾下之前犹抱琵琶的angular。
angular吸引人的特性之一就是双向绑定，model有变化view自动更新。一说到自动执行，首先浮到脑海的必须是监听和回调函数。angular也确实是这样做的，scope.$watch就是此行为的接口。一如所有的类库或框架，使用起来很简单，实现却并不容易。
我不是一个执念于从零开始的人，喜欢站在巨人的肩上，这篇随笔取材于此：创建你自己的AngularJS。
首先，先搭建一个单元测试环境，如果嫌麻烦当然可以不用，如果不会可以在node环境下输入以下命令行：
npm install -g grunt //安装grunt npm install -g bower //安装bower npm install -g yo //安装yeoman npm 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，一定能看到很多眼熟的东西。