構建自己的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指定如下兩個函數，就可以創建一個監聽器：