AvalonJS学习笔记（一）

时间 2019-11-20

标签 avalonjs 学习笔记繁體版

原文原文链接

1、关于AvalonJSjavascript

avalon是国内的一个MVVM框架，是从knockout发展起来的css

分为两个版本html

avalon.js版本，支持IE6及很是老的标准浏览器。这里的标准浏览器特指W3C阵营中的safari, opera, firefox, chromejava

avalon.modern.js版本，兼容IE10与标准浏览器git

若是想作移动端开发，有一个mobile.js，能够直接将它的源码拷贝到avalon.modern.js里最后一个花括号的前面angularjs

2、得到源码github

项目地址：https://github.com/RubyLouvre/avalonchrome

如何从github获取源码请查看：http://limodou.github.io/avalon-learning/zh_CN/installation.html后端

源码下载后的目录如图：浏览器

.min.js是压缩版

examples文件夹里面是例子，里面有index.html，能够跳转到各个实例页面，对于学习avalonJs事半功倍

3、又见 hello,world

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <script src="js/avalon.js" ></script>
        <script>
            var model = avalon.define('test', function(vm) {
                vm.aaa = "world"
            })
        </script>
    </head>
    <body ms-controller="test">
        <p>hello,{{aaa}}</p>
    </body>
</html>

在浏览器打开这个文件，结果是 Hello,world

<body ms-controller="test">中的 ms-controller ，用来声明avalon的控制域。相似于angularjs中的 ng-controller。

一个HTML文件中能够定义多个 `ms-controller`

avalon使用 `ms-` 开头的属性。因此只要涉及到Avalon动态处理功能的，都要注意定义`ms-` 开头的属性。

目前，Avalon并不存在以 `ms-` 开头的 TAG，因此所有都是属性。

<p>hello,{{aaa}}</p>，也与angularjs的语法同样，使用{{}}进行插值，为动态变化的模板变量

一个控制域与一个Model相对应，当Model中的数据发生变化，与之对应的控制域的DOM会自动进行变化。

var model = avalon.define('test', function(vm) {
vm.aaa = "world"
})

第一个参数是和前面 ms-controller 对应的名字。这里是 test
第二个是一个函数，这个函数须要一个参数，名字能够随便起，可是习惯上使用 vm (在 Avalon中表示是 ViewModel 的意思)。 vm 能够理解为Model的引用。

vm.aaa = "world"，在VM上定义了一个aaa属性，和{{aaa}}对应

4、绑定

先看下avalonJs的全部绑定

一、上面已经说了做用域绑定：ms-controller（继承）, ms-important（组合），做用域的绑定能够嵌套

二、模板绑定：ms-include

想在模板加载后，加工一下模板，可使用 data-include-loaded来指定回调的名字

想在模板扫描后，隐藏loading什么的，可使用 data-include-rendered来指定回调的名字

外部模板经过 ms-include-src="src"进行加载

<div ms-include-src="'tmpl.html'"></div>（须要后端服务器支持）

要用两种引号强制让它的内部不是一个变量

三、数据绑定： ms-text, ms-html，{{}}

<script>

avalon.define("test", function(vm) {

vm.text = "<b> 1111 </b>"

})

</script>

<div ms-controller="test">

<div><em>用于测试是否被测除</em>xxxx{{text}}yyyy</div>

<div><em>用于测试是否被测除</em>xxxx{{text|html}}yyyy</div>

<div ms-text="text"><em>用于测试是否被测除</em>xxxx yyyy</div>

<div ms-html="text"><em>用于测试是否被测除</em>xxxx yyyy</div>

</div>

结果：

四、类名切换与样式绑定： ms-class, ms-hover, ms-active，ms-css

ms-css的用法为ms-css-样式名="样式值"

如：

ms-css-width="prop"(会自动补px)，

ms-css-height="{{prop}}%",

ms-css-color="prop",

ms-css-background-color="prop",

ms-css-font-size="{{prop}}px"。

ms-class="aaa"， xxx为类名

ms-hover="类名"，规则同ms-class，当用户的鼠标悬浮在元素上方时，添加一个或多个类名，移走时移除它们。

ms-active="类名"，规则同ms-class，当用户点击它时为它添加一个类名或多个类名，鼠标弹起时移除它们。

五、事件绑定： ms-on

ms-click
ms-dblclick
ms-mouseout
ms-mouseover
ms-mousemove
ms-mouseenter
ms-mouseleave
ms-mouseup
ms-mousedown
ms-keypress
ms-keyup
ms-keydown
ms-focus
ms-blur
ms-change
ms-scroll
ms-animation
ms-on-*

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>有关事件回调传参</title>
        <script src="js/avalon.js" type="text/javascript"></script>
        <script>
            var a = avalon.define("simple", function(vm) {
                vm.array = ["aaa", "bbb", "ccc"]
                vm.loopClick = function(a) {
                    alert(a)
                }
            });
        </script>
    </head>
    <body>
        <fieldset ms-controller="simple">
            <div ms-each-el="array" >
                <p ms-click="loopClick(el)">{{el}}</p>
            </div>
        </fieldset>
    </body>
</html>

六、显示绑定： ms-visible

<!DOCTYPE HTML> <html> <head> <title>ms-visible</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script src="../avalon.js" ></script> <script> var model = avalon.define("test", function(vm) { vm.a = true }) </script> <style> .rect{ display: none; } </style> </head> <body> <h3>ms-visible</h3> <div ms-controller="test"> <p>点我隐藏或显示下面的方块<input ms-duplex="a" type="radio"></p> <div class="rect" ms-visible="a" >visible</div> </div> </body> </html>

AvalonJS学习笔记（一）

<body ms-controller="test">中的 ms-controller ，用来声明avalon的控制域。相似于angularjs中的 ng-controller。

一个HTML文件中能够定义多个 ms-controller

avalon使用 ms- 开头的属性。因此只要涉及到Avalon动态处理功能的，都要注意定义ms- 开头的属性。