前端MVVM架構設計及實作（一）

最近抽出點時間想弄個dom子產品化的模闆引擎，不過現在這種都是MVVM自帶的，索性就想自己造輪子寫一個簡單的MVVM架構了

架構是面向一個領域，提供一套解決方案，那麼我們用前端的MVVM能為我們帶來什麼便利？

關注點分離

操作資料即操作DOM

動态模闆

關注點分離是MVVM與身俱來的，操作資料即操作DOM，是VM中的通路器帶來的，動态模闆是流程綁定實作的。

關于MV*的讨論太多了，這裡不在讨論，我們重點就是分析如何實作前端MVMM架構

學會MVVM需要先會哪些東西？

1. javascript語言基礎（作用域，原型鍊，閉包等等）

2. 簡單設計模式，基本的資料結構

3. 閱讀或者寫過jQuery源碼

為什麼要這樣說呢，因為avalon就是這些東東的綜合體!

為什麼呢？簡單的說實作的手段有點另類，寫的代碼有點狂野（請原諒我不知道如何形容），不過使用者體驗倒是不錯!

簡單的看下代碼結構

<a></a>

針對這個代碼結構，我們要明白：

1：為什麼要自定義大量标記(聲明式綁定)

這就是MVVM 最原始的意義，資料邏輯展現分離。表現就是 資料 js邏輯代碼 htmlcss展現

是以再HTML裡加結構是自然而然的事情，如果html都用js生成，那就跟mvvm搭不上邊

2：avalon.define裡面為什麼不需要操作dom？

在MVVM中，資料是核心，由于VM與V之間的雙向綁定，操作了VM中的資料（當然隻能是監控屬性），就會同步到DOM，我們透過DOM事件監控使用者對DOM的改動，也會同步到VM。

本章我們就實作第一步：搭建基本的分層結構，實作雙向通知機制

針對上面2個問題，我們看看如何才能做到操作資料即操作dom呢？

簡單的說一下實作是思路：大家可以down下git的aaMVVM對照下，比原版的4000行代碼友愛多了！

我們知道在MVVM中，M隻是一個過客，它與其他表示業務狀态的東西融入VM（ViewModel）中。ViewModel是一個狀态的集合，當然還拖家帶口監控着大量的回調

是以ViewModel就承載的幾乎所有的功能，在avalon中ViewModel就包含所有的資料與方法的定義，溝通着V與M,起到承上啟下的作用~

視圖模型如何與資料跟視圖關聯起來？

通過avalon.define定義的vm中的屬性與方法都與對應的html結構中的标記有映射關系，是以改變vm中的資料與之關聯的dom就會自動重新整理

分析下

當模型的資料改變為100時，對應的視圖中div的寬度為100， 文本&lt;p&gt;100&lt;/p&gt;  ，可見修改一個資料在同一個控制器内與之關聯的2個映射動作都将會修改

一個是css操作,一個是text指派

從這個操作我們可以大膽推測下vm.v中應該有一個清單，記錄了目前控制器下對應的映射操作（多個）

為了實作set與get方法,avalon也類似emberjs,采用了Object.defineProperty

我用最簡單的代碼模拟下實作

也就是說

vm.w = 100  即要修改style也要修改p，就是一對多的關聯方式

是以在avalon中針對每一個監控屬性，都會生成set與get的通路控制器，那麼在每一個監控屬性的通路控制器裡面都會有一個

accessor[subscribers] = [] //訂閱者數組，這樣的東東來存放與之相關的依賴

當我們觸發  vm.w = 100時，就會觸發w:set方法，取出accessor[subscribers]中的依賴，進而各執執行，這樣就實作了依賴執行了

對應的方法：自動更新自身的依賴

上面隻是簡單的思路，真正實作的時候真要做到大而全的架構，考慮的問題可不是那麼簡單的事

1 架構是怎麼解釋聲明式綁定的文法

2 如何把解析後的文法生成對應的處理句柄

3 使用者的定義如何生成vm模型

4 如何收集這些依賴

5 如何自動更新依賴映射

本文轉自艾倫 Aaron部落格園部落格，原文連結：http://www.cnblogs.com/aaronjs/p/3614049.html，如需轉載請自行聯系原作者