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


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

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

Knockout

image

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

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

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

  • 收集需要被執行的函數,放入到棧中,形成一個隊列,最底的就是最先被執行的,它上面的就是此函數所依賴的函數,從而得到依賴關系。
  • 利用訂閱模式從上面的依賴檢測中,將依賴函數作為被依賴者(最先執行的那個的)的訂閱者,以后我們對被依賴者進行賦值時,就會通先訂閱者更新自身,從而形成一個雙向綁定鏈
  • ko會將視圖中的綁定屬性進行轉換,分解出求值函數與視圖刷新函數,視圖刷新函數依賴於求值函數,而求值函數亦依賴於我們VM中的某些屬性(這時,它們都轉換為函數)
  • 在第一次掃描時,它們會加入對應屬性的訂閱者列隊中, 從而VM中的某個屬性改變,就會自動刷新視圖。

 

豬腳上場 avalon

image

  • 正如司徒正美說所,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版本


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM