輕量級前端MVVM框架avalon源碼分析-總結

距avalon0.7版本發佈有一段時間，因爲以前的穩定性，就中止一段時間更新，期間研究了下Knockout源碼，也嘗試寫了一個小型的mvvm的實現模型，僅僅只是仿造ko的核心實現，把無關的東西給剝離掉了，有時間總結一下發布出來。

ko算很早就出現的MVVM庫了，實現是手段也是異常的巧妙，可是把監聽的東西都轉成函數表達，調用的時候也必須是函數形式，但使用習慣上，我就不太喜歡了

Knockout

監控屬性經過observable內部轉換成後，返回帶有一個觀察者模式的的函數(執行調用與賦值的時候都會有不一樣的處理)，因此在使用的時候還要 this.firstName()執行才行，

observable() 是一個特殊的javascript對象，能夠通知用戶有關變化並自動檢測依賴，這樣在Model屬性的值被修改時，就可使Model和ViewModel保持同步

值的學習的是對依賴關係的處理:

• 收集須要被執行的函數，放入到棧中，造成一個隊列，最底的就是最早被執行的，它上面的就是此函數所依賴的函數，從而獲得依賴關係。
• 利用訂閱模式從上面的依賴檢測中，將依賴函數做爲被依賴者（最早執行的那個的）的訂閱者，之後咱們對被依賴者進行賦值時，就會通先訂閱者更新自身，從而造成一個雙向綁定鏈
• ko會將視圖中的綁定屬性進行轉換，分解出求值函數與視圖刷新函數，視圖刷新函數依賴於求值函數，而求值函數亦依賴於咱們VM中的某些屬性（這時，它們都轉換爲函數）
• 在第一次掃描時，它們會加入對應屬性的訂閱者列隊中， 從而VM中的某個屬性改變，就會自動刷新視圖。

 

豬腳上場 avalon

• 正如司徒正美說所，avalon是在徹底消化了knockout發展起來的，通過不斷的修正重構，利用emberjs的defineProperties方法把監控屬性替換成defineProperties方式，利用訪問器屬性setter,getter，借鑑了angular的插值表達式，過濾器機制，控制器綁定。。。等等。
• 從另外一個角度來講，正美是前端出身，那麼avalon是從JSer的角度去詮釋MVVM模式的，angular很好很強大，可是它是一幫搞後端Java的人弄的，因此設計的層面角度徹底不同了，上手難度，包括源碼實現，難度很高

MVVM在實際開發中仍是有缺點的

1 簡單的UI，真是大炮打蚊子 大材小用

2 數據綁定聲明式，那麼調試就很蛋疼了

3 大型應用數據綁定產生的大量的標記，那麼務必的問題綁定比被綁定的對象還要多（ava會刪除節點滴）

4 產生大量的VM對象，由於都是閉包嵌套滴

5 在VM和View之間須要進行解析，性能仍是有成本的

固然啦，存在便是道理，合理的採用，而不是一味的盲目追從，我我的偏向迷你的只關注分離邏輯框架便可

計劃

avalon要發佈穩定版了，做爲學習，因此打算從新把新版的avalon源碼給從新寫一遍 ~ ~

本身正在寫一個公司內部MVVM版本