avalon入门笔记（1）

最新推荐文章于 2025-01-12 00:47:46 发布

原创

最新推荐文章于 2025-01-12 00:47:46 发布 · 979 阅读

3 ·

CC 4.0 BY-SA版权

本文是关于avalon.js的入门笔记，介绍了avalon的基本概念和使用方法，包括框架的背景、如何开始使用、数据属性以及指令的三种形式：插值表达式、自定义标签和绑定属性。

avalon介绍

avalon是一个简单、迷你、易用、高性能的MVVM框架，它最早发布于2012.09.15。为解决同一业务逻辑存在各种视图呈现而开发出来的。

由司徒正美开发和维护，它可以轻松实现数据的隔离和双向绑定。

avalon将所有的前段代码彻底分成两部分，视图的处理通过绑定实现（angular中叫做指令），业务逻辑则集中一个一个叫VM的对象处理。我们只要通过操作VM的数据，它就自然而然地神奇地同步到视图。

开始

我们只需下载最新版本的avalonJS，然后将其引入页面

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>avalon</title>
        <script type="text/javascript" src="avalon.js"></script>
    </head>
    <body>
    <div ms-controller="wrap">{
  
  {name}}</div>
    </body>
    </html>

接着，类似于angular中的“ng-controller”，avalon的控制域属性名叫做“ms-controller”，你可以把它当作一个监听器，把它绑定到一个容器后，avalon就能扫描和监听这个容器内的所有（绑定了avalon方法或带有插值表达式的）元素了。

我们来给div加上这个监听器，并在里面写一个avalon插值表达式{ {}}。

然后我们在JavaScript中写一个简单的脚本