深入理解Angularjs 脏值检测

构建自己的AngularJS，第一部分：Scope和Digest

Angular是一个成熟和强大的JavaScript框架。它也是一个比较庞大的框架，在熟练掌握之前，需要领会它提出的很多新概念。很多Web开发人员涌向Angular，有不少人面临同样的障碍。Digest到底是怎么做的？定义一个指令（directive）有哪些不同的方法？Service和provider有什么区别？

Angular的文档挺不错的，第三方的资源也越来越丰富，想要学习一门新的技术，没什么方法比把它拆开研究其运作机制更好。

在这个系列的文章中，我将从无到有构建AngularJS的一个实现。随着逐步深入的讲解，读者将能对Angular的运作机制有一个深入的认识。

在第一部分中，读者将看到Angular的作用域是如何运作的，还有比如$eval, $digest, $apply这些东西怎么实现。Angular的脏检查逻辑看上去有些不可思议，但你将看到实际并非如此。

基础知识

在Github上，可以看到这个项目的全部源码。相比只复制一份下来，我更建议读者从无到有构建自己的实现，从不同角度探索代码的每个步骤。在本文中，我嵌入了JSBin的一些代码，可以直接在文章中进行一些互动。（译者注：因为我在github上翻译，没法集成JSBin了，只能给链接……）

我们将使用Lo-Dash库来处理一些在数组和对象上的底层操作。Angular自身并未使用Lo-Dash，但是从我们的目的看，要尽量无视这些不太相关的比较底层的事情。当读者在代码中看到下划线（_）的时候，那就是在调用Lo-Dash的功能。

我们还将使用console.assert函数做一些特别的测试。这个函数应该适用于所有现代JavaScript环境。

下面是使用Lo-Dash和assert函数的示例：

http://jsbin.com/UGOVUk/4/embed?js,console

Scope对象

Angular的Scope对象是POJO（简单的JavaScript对象），在它们上面，可以像对其他对象一样添加属性。Scope对象是用构造函数创建的，我们来写个最简单的版本：

function Scope() {
}

现在我们就可以使用new操作符来创建一个Scope对象了。我们也可以在它上面附加一些属性：

var aScope = new Scope();
aScope.firstName = 'Jane';
aScope.lastName = 'Smith';

这些属性没什么特别的。不需要调用特别的设置器（setter），赋值的时候也没什么限制。相反，在两个特别的函数：$watch和$digest之中发生了一些奇妙的事情。

监控对象属性：$watch和$digest

$watch和$digest是相辅相成的。两者一起，构成了Angular作用域的核心：数据变化的响应。

使用$watch，可以在Scope上添加一个监听器。当Scope上发生变更时，监听器会收到提示。给$watch指定如下两个函数，就可以创建一个监听器：