Avalon学习
1.认识Avalon
Avalon是一个简单易用的迷你的MVVM框架，作者是博客园的司徒正美，去哪儿、搜狐等等都用这个框架。
没有任何依赖，兼容性非常好，支持IE6，不到5000行，压缩后不到50KB。
官网地址：http://avalonjs.github.io/，移动版本是avalon.modern.js。
2.作用域绑定(ms-controller, ms-important)
3.忽略扫描绑定(ms-skip)
4.数据填充(ms-text, ms-html)
5.类名切换(ms-class, ms-hover, ms-active)
6.事件绑定(ms-on)
7.显示绑定(ms-visible)
8.双工绑定(ms-duplex)
9.样式绑定(ms-css)
10.数据绑定(ms-data)用法为ms-data-name="value", 用于为元素节点绑定HTML5 data-*属性。
11.属性绑定(ms-attr)，1.3.5后，除了ms-src, ms-href，其他都吞入ms-attr-*
12.循环绑定(ms-repeat)
13.模块间通信及属性监控 $watch，$fire, $unwatch
14.过滤器
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
.red{ background-color: red;}
.active {
background-color: yellow;
}
.hover{ background-color: green;}
</style>
<script src="avalon.js"></script>
<script>
avalon.ready(function() {
var vm = avalon.define({
$id: "box", //ms-controller作用域ID
w: 100, //变量
h: 100,
click: function() {
vm.w = parseFloat(vm.w) + 10;
vm.h = parseFloat(vm.h) + 10;
},
b: 100,
$skipArray: ["b"], //不想监听b属性，可以直接将此属性名放到$skipArray数组中
text: "<b>1111</b>",
status: "",
callback: function(e) {
vm.status = e.type;
},
field: "",
check: function(e, par) {
vm.field = this.value + par;
},
isvisible: true,
array: "a,b,c,d,e,f,g".split(","),
checkboxArrayIds: [1, 3],
aaa: "http://www.yxl.com/1",
A: "ABCD" });
vm.$watch("w", function(newValue,oldValue) {
avalon.log(newValue);
avalon.log(oldValue);
});
setTimeout(function() {
vm.w = 222; }, 5000); avalon.filters.myfilter = function (str, args, args2) {//str为管道符之前计算得到的结果，默认框架会帮你传入，此方法必须返回一个值
/* 具体逻辑 */
str = str + 1;
return str;
}
avalon.filters.add=function(num2) {
return num2+5;
}
avalon.define({
$id: "ddd", //ms-important作用域如果viewmodel中没有定义变量不会向上一级查找
w: 100 //变量
});
avalon.scan();
});
//下面的这种写法也可以
//avalon.ready(function () {
// avalon.define("box", function(vm) {
// vm.w = 100;
// vm.h = 100;
// });
// avalon.scan();
//});
</script>
</head>
<body>
<div ms-controller="box">
<div style=" background: #a9ea00;" ms-css-width="w" ms-css-height="h" ms-click="click"></div>
<p>{{ w }} x {{ h }}</p>
<p ms-skip>{{ w }} x {{ h }}</p>
<p>W: <input type="text" ms-duplex="w" data-duplex-event="change" /></p>
<p>H: <input type="text" ms-duplex="h" /></p>
<p>b: <input type="text" ms-duplex="b" /></p>{{b}}
<div ms-important="ddd">
<p>H: <input type="text" ms-duplex="h" /></p>
</div>
<div ms-controller="ddd">
<p>H: <input type="text" ms-duplex="h" /></p>
</div>
<p ms-text="text"></p>
<p ms-html="text"></p>
<p ms-class="red" ms-hover="hover" ms-active="active" style="width:100px; height:100px;"></p>
<p ms-mouseenter="callback" ms-mouseleave="callback">
<input type="text" ms-on-input="check($event,'我是传过来的参数')" />{{status}}{{field}}
</p>
<p ms-visible="isvisible">显示绑定</p>
<p>
<ul ms-each-item="array">
<li ms-click="$remove" ms-if="$index % 2 == 0">{{ item }} --- {{$index}}</li>
</ul>
</p>
<p>
<p>
ms-duplex-number
<input ms-duplex-number="checkboxArrayIds" type="checkbox" value="1" />
<input ms-duplex-number="checkboxArrayIds" type="checkbox" value="2" />
<input ms-duplex-number="checkboxArrayIds" type="checkbox" value="3" />
<input ms-duplex-number="checkboxArrayIds" type="checkbox" value="4" />
{{checkboxArrayIds}} </p>
<p>
<input type="text" ms-data-relateid="1">
</p>
<p>
<a ms-href="aaa + '.html'">xxxx</a>
<a ms-href="{{aaa}}.html">xxxx</a>
</p> <p>
<ul>
<li ms-repeat-item="array">{{ item }} --- {{$index}}</li>
</ul>
</p>
<p>{{A|lowercase}}</p>
<p>{{ new Date | date("yyyy年MM月dd日 HH:mm:ss")}}</p>
<p>{{ 1|add }}</p>
</div>
</body>
</html>
Avalon学习的更多相关文章
- avalon学习笔记
背景: 刚刚到一家新的公司,我新接手的项目采用的mvvm框架是avalon,当然我以前没有学过angular,但是用过react,所以对于这类框架应该不算陌生.但毕竟是一个新的框架,所以还是先学起来, ...
- avalon学习笔记一 列表及条件过滤
好长时间都没有更新博客了,不是因为没有学习新的东西,而是到了新的单位每天玩命加班实在是太累了!经过一年的努力吧,终于可以轻松一下了.废话少说,直接干货吧! 由于是学习阶段,就直接拿了公司的二级页面做了 ...
- avalon学习教程
最近在项目中发现了个很不错的前端MVVM框架 avalon,对于基础的使用大概学习了一遍,有些深入的没应用场景还没细看. 收藏好,估计以后要用 http://www.html-js.com/artic ...
- Avalon总线学习 ---Avalon Interface Specifications
Avalon总线学习 ---Avalon Interface Specifications 1.Avalon Interfaces in a System and Nios II Processor ...
- 迷你MVVM框架 avalonjs 学习教程22、avalon性能大揭密
avalon之所以能在页面处理1W个绑定(angular对应的数字是2000),出于两个重要设计--基于事件驱动的双向绑定链及智能CG回收机制. avalon的双向绑定链是通过Object.defin ...
- 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾
avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...
- 迷你MVVM框架 avalonjs 学习教程17、avalon的一些配置项
本章节,主要是介绍avalon.config方法,通过它来制定一些更贴心的功能. 一般情况下,我们在使用ms-controller绑定时,需要添加一个ms-controller类名,目的是为了防止网速 ...
- 迷你MVVM框架 avalonjs 学习教程1、引入avalon
avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
随机推荐
- Eclipse/MyEclipse 安装国际化资源文件编辑插件（i18n tools）
一.JInto 官网:http://www.guh-software.de/index_en.html http://www.guh-software.de/jinto_en.html 下载地址:ht ...
- HDU 3535 分组混合背包
http://acm.hdu.edu.cn/showproblem.php?pid=3535 题意:有n组工作,T时间,每个工作组中有m个工作,改组分类是s,s是0是组内至少要做一件,是1时最多做一件 ...
- BZOJ 1090: [SCOI2003]字符串折叠
Sol 区间DP. 转移很简单,枚举会形成的断长转移就行,话说上一题我就跟这个是差不多的思路,转移改了改,然后死活过不了... 同样都是SCOI的题...相差4年... Code /********* ...
- livezilla账号或密码修改方法
livezilla的账号和密码不在数据库,保存在php文件里面. 今天想修改一下网站livezilla系统管理员账号和密码,去数据库找了半天没找到,推测可能是存在文件中.搜索了一下,果然是在livez ...
- javascript最容易混淆的作用域、提升、闭包
一.函数作用域 1.函数作用域 就是作用域在一个“Function”里,属于这个函数的全部变量都可以在整个函数的范围内使用及复用. function foo(a) { var b = 2; funct ...
- 【Networkk】一篇文章完全搞清楚 scoket read/write 返回码、阻塞与非阻塞、异常处理 等让你头疼已久的问题
浅谈TCP/IP网络编程中socket的行为 我认为,想要熟练掌握Linux下的TCP/IP网络编程,至少有三个层面的知识需要熟悉: 1. TCP/IP协议(如连接的建立和终止.重传和确认.滑动窗 ...
- Appium根据xpath获取控件
如文章< Appium基于安卓的各种FindElement的控件定位方法实践>所述,Appium拥有众多获取控件的方法.其中一种就是根据控件所在页面的XPATH来定位控件. 本文就是尝试通 ...
- VS2010调试速度很慢
1.使用vs2010,感觉速度越来越慢.重新设置了vs2010的环境(在vs2010命令提示符下,执行devenv.exe /resetuserdata),居然解决了这个问题,速度跑的很好.网上有人说 ...
- selenium 右键下载图片，结合sikuli
上一次写右键下载是结合robot,这次是使用selenium+sikuli 上一次日志:http://www.cnblogs.com/tobecrazy/p/3969390.html 有关sikuli ...
- Excel保护工作表
最近见到一个Excel文件,其中的表不能选中,不能编辑,今天研究了一下 明白了其设置方法 excel中开始--格式--保护工作表--去掉所有勾选,输入保护密码 即可