avalon入门笔记（1）

来源：互联网发布：openstack基础网络编辑：程序博客网时间：2024/05/17 01:13

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中写一个简单的脚本

    <script type="text/javascript">        var abc = avalon.define({  //abc是随便起的一个名字，用作该Model的载体            $id: "wrap",   //告诉avalon这个Model是作用于哪个ms-controller的            name: "ddtx1222"   //定义一个avalon对象属性“name”，其值是“ddtx1222”        });    </script>

这里写图片描述

在avalon中，我们用 avalon.define({ … }) 的形式来定义一个Model实例（其参数可以看做一个avalon数据对象），其中的 $id 是内置属性，对应所要扫描和监控的控制域名。

我们还在内部定义了一个属性”name”，故在对应的控制域（如这段代码对应的域是绑定ms-controller=”wrap”的div标签）里，我们使用avalon插值表达式{{name}}的话，可以自动绑定其值“ddtx1222”。

在avalon中，两个作用域（ms-controller）之间可以互相访问彼此的数据，还记得我们给avalon.define的前面定义了一个载体么（var XX = avalon.define），利用它就能轻松获取：

   <body>   <div ms-controller="wrap">{{name}}</div>   <div ms-controller="wrap2">       <p>name：{{name}}</p>       <p>年龄：{{age}}</p>   </div>   <script type="text/javascript">       var abc = avalon.define({           $id: "wrap",           name: "ddtx1222"       });       var def = avalon.define({           $id: "wrap2",           age: "12",           name: abc.name   //获取第一个Model里的属性值       });   </script>   </body>

这里写图片描述

属性

VM中以$开头的属性都是框架保留使用的特殊属性,大家为数据起名字时要小心避开

    $id, vm的名字    $watch, 用于添加监听函数    $fire, 用于触发监听函数    $events, 用于储存监听函数    $model, 返回一个纯净的JS对象    $element, 2.0新增, 当我们用ms-controller, ms-important指定一个VM的作用域,对应元素节点会放到这个属性上.    $computed, 2.2.1新增,用来集中定义计算属性

另外，avalon在VBScript或Object.defineProperty模式下不支持追加新属性与方法

     var vm = avalon.define({            $id: "test",            test1: "点击测试按钮没反应 绑定失败"        })        vm.aaa  = 'newProp'        vm.newMethod = function () { //不能再追加此方法            vm.test1 = "绑定成功"        }

但我们可以通过以下方式，实现添加子属性。

    var vm = avalon.define({        $id: "test",        placehoder: {}    });        vm.placehoder = {//我们必须要通过 = ，直接添加一个对象来添加子属性， 不能            aaa: 1, //vm.placehoder.aaa =1; vm.placehoder.bbb = 2这样分散地添加子属性            bbb: 2        }

指令

avalon的指令是一个非常重要的东西,它用来引入一些新的HTML语法, 使元素拥有特定的行为。

指令一共有3种形式

插值表达式
自定义标签
绑定属性

其中绑定属性的种类是最多的，它们都位置于元素节点中，以ms-开头或以:开头(avalon2.1.7新增)

绑定属性的属性名是以-分成几段其中第二个就是指令的名字, 如ms-css, ms-attr, ms-html, ms-text, ms-on都是来源于jQuery同名方法名, 简单好记. 这里写图片描述

参考文档：http://avalonjs.coding.me/directive.html

阅读全文

0 0