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学习的更多相关文章

  1. avalon学习笔记

    背景: 刚刚到一家新的公司,我新接手的项目采用的mvvm框架是avalon,当然我以前没有学过angular,但是用过react,所以对于这类框架应该不算陌生.但毕竟是一个新的框架,所以还是先学起来, ...

  2. avalon学习笔记一 列表及条件过滤

    好长时间都没有更新博客了,不是因为没有学习新的东西,而是到了新的单位每天玩命加班实在是太累了!经过一年的努力吧,终于可以轻松一下了.废话少说,直接干货吧! 由于是学习阶段,就直接拿了公司的二级页面做了 ...

  3. avalon学习教程

    最近在项目中发现了个很不错的前端MVVM框架 avalon,对于基础的使用大概学习了一遍,有些深入的没应用场景还没细看. 收藏好,估计以后要用 http://www.html-js.com/artic ...

  4. Avalon总线学习 ---Avalon Interface Specifications

    Avalon总线学习 ---Avalon Interface Specifications 1.Avalon Interfaces in a System and Nios II Processor ...

  5. 迷你MVVM框架 avalonjs 学习教程22、avalon性能大揭密

    avalon之所以能在页面处理1W个绑定(angular对应的数字是2000),出于两个重要设计--基于事件驱动的双向绑定链及智能CG回收机制. avalon的双向绑定链是通过Object.defin ...

  6. 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾

    avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...

  7. 迷你MVVM框架 avalonjs 学习教程17、avalon的一些配置项

    本章节,主要是介绍avalon.config方法,通过它来制定一些更贴心的功能. 一般情况下,我们在使用ms-controller绑定时,需要添加一个ms-controller类名,目的是为了防止网速 ...

  8. 迷你MVVM框架 avalonjs 学习教程1、引入avalon

    avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前 ...

  9. 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 的目的是 ...

随机推荐

  1. PHP学习路线

    0x1 0x2

  2. BZOJ 1004: [HNOI2008]Cards

    Description 给你一个序列,和m种可以使用多次的置换,用3种颜色染色,求方案数%p. Sol Burnside定理+背包. Burnside定理 \(N(G,\mathbb{C})=\fra ...

  3. OS X 添加环境变量

    这个方法相对靠谱,可用: 1, cd 到home 2, touch .bash_profile 3,open -e .bash_profile 把各个路径按如下填写: export PATH=${PA ...

  4. 使用GitHub

    1. 进入 1.1 建立账号 打开网站https://github.com/主页上就可以注册.注册之后会有一个简单的帮助文档,在帮组文档上可以下载一个PC客户端(如果是WINDOWS平台,需要.NET ...

  5. 【GoLang】GoLang 单元测试、性能测试使用方法

    单元测试代码: ackage test import ( // "fmt" "testing" ) func Test_FlowControl(t *testi ...

  6. 【GoLang】GoLang 中 make 与 new的区别

    make.new操作 make用于内建类型(map.slice 和channel)的内存分配.new用于各种类型的内存分配. 内建函数new本质上说跟其它语言中的同名函数功能一样:new(T)分配了零 ...

  7. Spring4 学习笔记

    [9]SpEL语法 [10]Bean的生命周期:(五步)

  8. ios 跟踪UITextField更改的简单方法

    如图,用xib链接,用到的消息是Editing Changed 消息.

  9. FFmpeg frei0r water 滤镜

    FFmpeg frei0r water 滤镜, 在 linux 环境中很流畅,但在 XP 环境中抛出异常 研究一段时间修改了代码,能在 XP 里跑得动. sample.water.avi water. ...

  10. yii框架详解 之 CWebApplication 运行流程分析

    在 程序入口处,index.php 用一句 Yii::createWebApplication($config)->run();  开始了app的运行. 那么,首先查看 CWebApplicat ...