什麼是MVVM

引言

2008年，V8 引擎隨 Chrome 瀏覽器橫空出世，JavaScript 這門通用的 Web 腳本語言的執行效率獲得質的提高。 V8 引擎的出現，註定是 JavaScript 發展史上一個光輝的里程碑。它的出現，讓當時研究高性能服務器開發、長時間束手無策的 Ryan Dahl 有了新的、合適的選擇，不久，在2009年的柏林的 JSConf 大會上，基於 JavaScript 的服務端項目 Node.js 正式對外發布。Node.js 的發佈，不只爲開發者帶來了一個高性能的服務器，還很大程度上推進了前端的工程化，帶來了前端的大繁榮。與此同時，由於 JavaScript 執行效率的巨大提高，愈來愈多的業務邏輯開始在瀏覽器端實現，前端邏輯愈來愈重，前端架構隨之提上日程。因而，咱們談論的主角，MVVM 模式，走進了 Web 前端的架構設計中。

概念

MVVM 模式，顧名思義即 Model-View-ViewModel 模式。它萌芽於2005年微軟推出的基於 Windows 的用戶界面框架 WPF ，前端最先的 MVVM 框架 knockout 在2010年發佈。

一句話總結 Web 前端 MVVM：操做數據，就是操做視圖，就是操做 DOM（因此無須操做 DOM ）。

無須操做 DOM ！藉助 MVVM 框架，開發者只需完成包含 聲明綁定 的視圖模板，編寫 ViewModel 中業務數據變動邏輯，View 層則徹底實現了自動化。這將極大的下降前端應用的操做複雜度、極大提高應用的開發效率。MVVM 最標誌性的特性就是 數據綁定 ，MVVM 的核心理念就是經過 聲明式的數據綁定 來實現 View 層和其餘層的分離。徹底解耦 View 層這種理念，也使得 Web 前端的單元測試用例編寫變得更容易。

MVVM，說到底仍是一種分層架構。它的分層以下：

• Model: 域模型，用於持久化

• View: 做爲視圖模板存在

• ViewModel: 做爲視圖的模型，爲視圖服務

Model 層

Model 層，對應數據層的域模型，它主要作域模型的同步。經過 Ajax/fetch 等 API 完成客戶端和服務端業務 Model 的同步。在層間關係裏，它主要用於抽象出 ViewModel 中視圖的 Model。

View 層

View 層，做爲視圖模板存在，在 MVVM 裏，整個 View 是一個動態模板。除了定義結構、佈局外，它展現的是 ViewModel 層的數據和狀態。View 層不負責處理狀態，View 層作的是 數據綁定的聲明、 指令的聲明、 事件綁定的聲明。

ViewModel 層

ViewModel 層把 View 須要的層數據暴露，並對 View 層的 數據綁定聲明、 指令聲明、 事件綁定聲明 負責，也就是處理 View 層的具體業務邏輯。ViewModel 底層會作好綁定屬性的監聽。當 ViewModel 中數據變化，View 層會獲得更新；而當 View 中聲明瞭數據的雙向綁定（一般是表單元素），框架也會監聽 View 層（表單）值的變化。一旦值變化，View 層綁定的 ViewModel 中的數據也會獲得自動更新。

前端 MVVM 圖示

如圖所示，在前端 MVVM 框架中，每每沒有清晰、獨立的 Model 層。在實際業務開發中，咱們一般按 Web Component 規範來組件化的開發應用，Model 層的域模型每每分散在在一個或幾個 Component 的 ViewModel 層，而 ViewModel 層也會引入一些 View 層相關的中間狀態，目的就是爲了更好的爲 View 層服務。

開發者在 View 層的視圖模板中聲明 數據綁定、 事件綁定 後，在 ViewModel 中進行業務邏輯的 數據 處理。事件觸發後，ViewModel 中 數據 變動， View 層自動更新。由於 MVVM 框架的引入，開發者只需關注業務邏輯、完成數據抽象、聚焦數據，MVVM 的視圖引擎會幫你搞定 View。由於數據驅動，一切變得更加簡單。

MVVM框架的工做

不可置否，MVVM 框架極大的提高了應用的開發效率。It's amazing！But，MVVM 框架到底作了什麼？

• 視圖引擎

視圖引擎：我是視圖引擎，我爲 View 層做爲視圖模板提供強力支持，開發者，大家不須要操做 DOM ，丟給我來作！

• 數據存取器

數據存取器：我是數據存取器，我能夠經過 Object.defineProperty() API 輕鬆定義，或經過自行封裝存取函數的方式曲線完成。個人內部每每封裝了 發佈/訂閱模式，以此來完成對數據的監聽、數據變動時通知更新。我是 數據綁定 實現的基礎。

• 組件機制

組件機制：我是組件機制。有追求的開發者每每但願按照面向將來的組件標準 － Web Components 的方式開發，我是爲了知足你的追求而生。MVVM 框架提供組件的定義、繼承、生命週期、組件間通訊機制，爲開發者面向將來開發點亮明燈。

• more...

結語

有了前端 MVVM 框架，應用開發如此簡單!

前端 MVVM 已經是趨勢，是大型 Web 應用開發效率提高的利器。由百度 EFE 出品的 MVVM 框架 － san，在保持功能強大、特性支持完整的前提下，還兼顧到IE8的市場份額，對老版本瀏覽器提供了良好的兼容性，更難能難得的是 GZip 後體積僅 11k， 現已爲百度內多個產品提供了強勁驅動，可謂百度 EFE 又一精工之做！開源的 san 歡迎廣大開發者體驗、使用，更歡迎廣大開發者加入到 san 生態 的建設中來，讓 san 變得更好！