一款輕量級前端框架Avalon.Js

時間 2019-11-25

標籤一款輕量級前端框架 avalon.js avalon 欄目 JavaScript 简体版

原文原文鏈接

avalon2是一款基於虛擬DOM與屬性劫持的迷你、易用、高性能的前端MVVM框架，擁有超優秀的兼容性, 支持移動開發, 後端渲染, WEB Component式組件開發, 無需編譯, 開箱即用。上一個簡單的入門例子：html

<!DOCTYPE html>
<html>
    <head>
        <title>first example</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",
                name: "測試",
                array: [11,22,33]
            })
            setTimeout(function(){
               vm.array.set(0, 444)
            }, 3000)
        </script>
    </head>

    <body ms-controller="test">
        <input ms-duplex="@name">
        <p>Hello,{{@name}}!</p>
        <ul>
           <li ms-for="($index,el) in @array">{{$index}}--{{el}}</li>
        </ul>
    </body>
</html>

這裏面涉及一些知識點前端

vm,使用avalon.define方法生成,必須帶$id屬性
指令,以ms-開頭的屬性及雙花括號的插值表達式
圈定做用域,使用ms-controller告訴框架,只處理這個範圍內的標籤
引導符,使用@或##來告訴框架這些變量是來自vm的
自動掃描機制

define

建立一個vm對象,必須指定$id後端

avalon.define({
  $id: 'aaa',
  bbb: 1
})

插值表達式

位於文本節點中的雙重花括號,固然這個能夠配置.此指令其中文本ms-text指令的簡單形式.框架

<body ms-controller="test">
    <script>
        avalon.define({
            $id: 'test',
            aaa: 'aaa',
            bbb: 'bbb'
        })

    </script>
    <p>{{@aaa}}{{@bbb}} 這個性能差些</p>
    <p>{{@aaa+@bbb}} 這個性能好些</p>
    <p>{{@aaa+@bbb  | uppercase}} 選擇器必須放在表達值的後端</p>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。