avalon2學習教程01

時間 2019-11-09

標籤 avalon2 avalon 學習教程简体版

原文原文鏈接

通過難苦奮戰，avalon2終於面世了。這花了大半年時間，其中1.6還胎死腹中。長達半年沒有產出，我都擔憂本身會被裁掉……html

avalon2許多API與1.4.×保持一致，固然也添加了一些1.5的功能，此外隨着react的紅紅火火，對它的研究，也集成到此框架中。node

咱們先來一個簡單的例子react

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="./dist/avalon.js"></script>
        <script>
            var vm = avalon.define({
                $id: "test",
                a: 111
            })
        </script>
        <style>
            .ms-controller{
                display:none;
            }
        </style>
    </head>
    <body>
        <div ms-controller="test">
            <input ms-duplex="@a" />
            <p>{{@a}}</p>
        </div>
    </body>
</html>

若是你們學過avalon1.*就好辦，沒學也不要緊。做爲時下兼容性最好及上手最快的MVVM框架，avalon絕對是值得你進行智力投智的。緩存

avalon.define要求入傳一個帶$id屬性的對象，它會返回一個vm的特殊對象，之後咱們對它進行賦值就會自動同步頁面。這比jQuery每次都取CSS選擇器來找元素進行操做方便多。框架

這也就是爲何MVVM框架一會兒鋪天蓋地的火起來的緣由。性能

這是JS部分，在頁面部分，或者叫HTML部分，咱們須要一些特殊標記來圈定這個vm的做用範圍，這就是ms-controller的出場。$id也是在這裏用到的。code

在這做用範圍內，咱們還有另外兩個指令，一個是ms-duplex指令，至關於ng-model(若是你們學過angular的話)，另外一個是插值表達式{{}}，這是位於元素內部的innerText中的。htm

ms-duplex是雙向指令，它既能將vm中對應的屬性顯示在頁面上，爲了標識這是vm上的屬性，咱們要求用@符號帶頭。這可能與.NET的一些模板引擎（如Razor）相沖突，但據我所知，這些在.NET 中都是能夠配置的。{{}}是純粹的文本指令，它與ms-text很像，但更方便，用於單向將數據拍到頁面上。對象

當咱們改動文本域的內容時，ms-duplex會經過一些事件將元素的value值取出來同步到vm上。vm再比較下它的這個屬性值與以前是否同樣，不同就再次同步到視圖。這期間涉及到虛擬DOM 複雜處理，但虛擬DOM遠遠比真實DOM輕量，所以有了這緩存層，咱們的性能就大大提升。而且更新是最小化刷新的，不會將ms-controller圈定的全部元素都替換掉（如backbone自帶的模板引擎）。它只是將{{}}那個區域的文本節點的nodeValue改一下（由於input.value是同樣的，此次刷新只改一個地方）。模板引擎

咱們也能夠看到ms-duplex其實也作了光標處理。固然ms-duplex的威力遠遠不止這些，之後咱們再分說。

總而言之，MVVM其實將咱們的程序劃分兩部分，讓專業的語言作它們的擅長的事。JS用於處理業務邏輯，但類啊，模塊啊，太複雜，那隻給你一個相似普通對象的vm大家操做就行了。在視圖部分，如何顯示，如何變更，如何交互，就交給HTML，咱們只要給它添加一些指令與綁定屬性，它就像活着同樣，替咱們幹活了。

總結一下本節課的內容。