一款輕量級前端框架Avalon.Js
阿新 • • 發佈：2017-08-25
必須 ase component 使用 per 簡單 itl 前端框架 引導
avalon2是一款基於虛擬DOM與屬性劫持的 迷你、 易用、 高性能 的 前端MVVM框架， 擁有超優秀的兼容性, 支持移動開發, 後端渲染, WEB Component式組件開發, 無需編譯, 開箱即用。上一個簡單的入門例子：
<!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>{{@[email protected]}} 這個性能好些</p> <p>{{@[email protected] | uppercase}} 選擇器必須放在表達值的後端</p> </body>
一款輕量級前端框架Avalon.Js