微信小程序入門(二) MVVM架構 命令式編程和聲明式編程

什麼是MVVM?

MVVM是Model-View-ViewModel的縮寫。MVVM是一種架構模式,並非一種框架,是一種思想,一種組織和管理代碼的藝術。它利用數據綁定、屬性依賴、路由事件、命令等特性實現高效靈活的架構。
MVVM源於MVC(Model-View-Controller)模式,期間還演化出MVP(Model-View-Presenter)模式。MVVM的出現促進了GUI前端開發和後端開發邏輯的分離,提高了前端開發效率。
MVVM的核心數據驅動即ViewModel,ViewModel是View和Model的關係映射。在MVVM中View和Model是不可以直接進行通信的,它們之間存在這ViewModel這個中介。ViewModel類似中轉站(Value Converter),負責轉換Model中的數據對象,使得數據變得更加易於管理和使用。MVVM本質就是基於操作數據來操作視圖進而操作DOM,藉助於MVVM無需直接操作DOM,開發者只需完成包含聲明綁定的視圖模板,編寫ViewModel中有業務,使得View完全實現自動化。當用戶操作View,ViewModel感知到變化,然後通知Model發生相應改變,反之亦然。ViewModel向上與視圖層View進行雙向數據綁定,向下與Model通過接口請求進行數據交互,起到承上啓下的作用。

Vue的MVVM和小程序MVVM對比

在這裏插入圖片描述

  • Model :一般存放數據
  • View:通過mustache語法綁定數據
  • Viewmodel:作爲view和model 兩個層次之間通信的橋樑

1.將model的數據通過data binding綁定到view上
2.View上產生的各種事件監聽model修改數據。Dom listeners
在這裏插入圖片描述

小程序框架MINA框架與Vue框架類似。
MVVM架構將我們從命令式編程轉移到聲明式編程

//編程範式
//命令式編程:原生操作DOM
//聲明式編程:Vue/React/Angular

命令式編程

在這裏插入圖片描述

聲明式編程

在這裏插入圖片描述

參考文件:https://www.jianshu.com/p/423a214757ba

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章