輕量級前端MVVM框架avalon - 初步接觸

迷你簡單易用的MVVM框架

avalon的介紹 http://rubylouvre.github.io/mvvm/

按照做者的介紹,在HTML中添加綁定,在JS中用avalon.define定義ViewModel，再調用avalon.scan方法，它就能動了！

神奇的代碼:

 

如上圖所示：

開發者：

　　1 定義一個帶有自定義標籤的HTML結構

      2 定義一個簡單的JS代碼

用戶操做：

      用戶在input文本框中改變值時,你就會發現對應的多條相關聯的記錄都被同步修改

問題：

1. 事件是何時綁定的,由於開發者都沒有操做dom
2. js代碼中定義的值,如何關聯到html代碼中
3. html代碼中如何實現自動同步視圖（input輸入更改一條記錄,多條相關聯的同步被修正）

帶着這幾個問題，咱們一塊兒走入avalon源碼部分

 

首先對於MVVM模式,咱們理解幾個概念:

• M，模型，一個數據體，用於填允咱們的頁面，一般PHP交給咱們時數據已經填好了，想改變，就要再發出請求，而後經過jQuery尋找節點，修改它的innHTML與innerText。固然DOM操做是很是繁鎖的，什麼透明度，背景，位置等CSS屬性咱們都須要經過操做類名來修改。咱們有時忙乎於這些細節，而把咱們業務混在其中了。所以調試時，業務好了，但樣式壞了，樣好修好，這時務業又爆開了……

• 在MVVM中，M只是一個過客，它與其餘表示業務狀態的東西融入VM（ViewModel）中。ViewModel是一個狀態的集合，固然還拖家帶口監控着大量的回調。狀態聽起來是個深奧的概念，其實就是一個開關。好比if(aaa){}語句中的aaa，就是表示true與false，switch(bbb){}語句，它表示有多個值的狀態，就像有人幼年，童年，少年，青年，中年，老年這幾個階段，它們都指向同一個東西。

• 在MVVM中，數據是核心。而jQuery則以DOM爲核心。而DOM只是HTML在JS的世界的抽象，是一個很易變的東西。所以若是業務代碼遍歷選擇器表達式會很是難維護。但不能否認，jQuery是操做DOM的王者，讓咱們操做DOM順手拈來。但若是不讓你操做DOM，不是更好嗎？就像jQuery不讓你用getElementById，getElementsByTagName, querySelecterAll，你們都不知道里面有多少坑，短短几個字母$(expr)是背後sizzle選擇器引擎1700行的實現！！！！jQuery實際上是在用戶代碼與原生API中提供一層厚厚的粘合層，所以摸起來光溜溜。在MVVM中，DOM操做基本是水下運做了。因爲VM與V之間的雙向綁定，操做了VM中的數據（固然只能是監控屬性），就會同步到DOM，咱們透過DOM事件監控用戶對DOM的改動，也會同步到VM。DOM隱形了，就像軟件公司，處處跑出來活動的是業務員與不寫代碼的經理老總，程序員所有關起來加班！雖然這比喻有點殘酷，但這正體現了各司其職的威力。能說會道去拉風投接單子沒什麼不妥，喜歡呆在電腦前的就讓他呆吧。jQuery的世界就是一個混亂的公司，全能的程序員什麼都作                                                 
• 爲了各司其職，必須有良好的分層。MVVM劃分三層，M，VM，V，M是原始數據，用於轉換爲VM，VM管理狀態與綁定回調，V經過綁定獲得VM的狀態與回調，渲染頁面，綁定事件，切換類名，什麼髒活都攬了——但用戶只須要聲明

 

avalon與其餘前端MVVM框架最大的不一樣是：

• VM是用ecma262v5的新API， Object.defineProperties生成的一個充滿訪問器的對象，這樣的對象，能經過用戶對它的屬性的讀寫，觸發定義時的getter, setter函數。getter, setter對rubyer, pythoner, C#er應該很熟悉，我就不展開了。舊式IE，avalon利用VBScript的類實例，它也存在其餘語言的訪問器。不過，VBS對象不像JS對象那樣隨意添加新屬性，刪除已有屬性，所以咱們就沒法監後添加的新屬性。Object.defineProperties也同樣，它能處理的屬性也只是它定義時的屬性，想監控後來的，須要再調用一次Object.defineProperties。儘管如此，也比其餘MVVM框架魔幻多了

 

 @author Aaron