AngularJS Data Binding 機制

一開始沒特別注意,前陣子看 PolymerJS 的時候才發現 AngularJS 的 data binding 是只要改 POJSO(Plain Old JavaScript Object) 的值,然後魔法就發生了,如果有寫 JS 應該都了解,目前其實沒辦法偵測某個物件的屬性是否被更改,所以 AngularJS 到底怎麼辦到的就引起我的興趣了,以下內容如有錯誤還請告知,畢竟我還沒有 AngularJS 開發經驗,可能有誤解。

結果又是在 StackOverflow 找到重要的參考資料,說到$digest$apply這兩個 method,$apply最主要是給外部的程式來用(還有 AngularJS 內部),如果是外部的程式改動你 scope 內的值,那還要順便執行$apply(),然後$apply會去執行 angular expression,然後接著執行$digest檢查資料變化並讓對應的變化發生。所以 AngularJS 的 data binding 作法實際上是,AngularJS Framework 內的 controller function 有經手過的 scope,它會自己接在 function 的後面執行$apply()來套用變動,算是一種 dirty check,不過是檢查的很乾淨。

另外還剛好看到今年 JSConf EU 有一場 A comparison of the two-way binding in AngularJS, EmberJS and KnockoutJS 的演講,不長,二十分而已內容也很不錯,推薦花點時間看看:

講者 Marius Gundersen 比較了 AngularJS、EmberJS 和 KnockoutJS 三套 framework 的 data binding 機制,結果是各有優缺點,在最後的問與答也說到現在制定中的 Object.observer 的 JavaScript 未來新功能,等到這功能正式可以用時,就可以解決現在這些實作大部分的問題。

還有一篇文章 Accessors vs Dirty-checking in Javascript Frameworks 有蠻深入的比較現在不同 data binding 實作的特性,就如標題是 Dirty-checking 和 Accessor 兩類實作為主,Accessor 的實作其實就是像 Backbone 那樣,要修改 model 的屬性要用他的set()方法來作,才能順便觸發後面的動作。

最後文章寫完才看到 AngularJS 社群第四次聚會 Ticore 已經講過這個主題了,投影片內容也還蠻深入的。