一款轻量级前端框架Avalon.Js

Posted 2020-08-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一款轻量级前端框架Avalon.Js相关的知识，希望对你有一定的参考价值。

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的主要内容，如果未能解决你的问题，请参考以下文章

迷你MVVM框架 avalonjs1.5 入门教程

五款轻量级的web前端框架和H5前端框架的点评