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. 用js判断页面是否加载完毕

    用document.onreadystatechange的方法来监听状态改变, 然后用document.readyState == "complete"判断是否加载完成 docum ...

  2. Hashtable和HashMap的区别举例

    我们先看2个类的定义 public class Hashtable extends Dictionary implements Map, Cloneable, java.io.Serializable ...

  3. c++写入txt文件

    简单方式: #include "stdafx.h" #include <iostream> #include <iomanip> #include < ...

  4. jquery验证手机号码和固定电话号码

    <pre name="code" class="javascript"> //验证手机号码或者电话号码 function checkContactN ...

  5. 【Eclipse】eclipse che 协作开发

    http://www.eclipse.org/che/ http://blog.csdn.net/ccfeng2008/article/details/50881024 http://www.osch ...

  6. git分支的合并

    原文: http://gitbook.liuhui998.com/3_3.html http://gitbook.liuhui998.com/5_3.html 一.如何分支的合并 在git中,可以使用 ...

  7. (转) Lambda表达式中的表达式lambda和语句lambda区别

    Lambda表达式可分为表达式lambda和语句lambda 表达式lambda:表达式位于 => 运算符右侧的lambda表达式称为表达式lambda (input parameters) = ...

  8. ubuntu下查找某个文件的路径

    参考:ubuntu下如何查找某个文件的路径      http://blog.csdn.net/lieyanhaipo/article/details/17055667 在Ubuntu有时候会遇到记得 ...

  9. poj 1125 (floyd)

    http://poj.org/problem?id=1125. 题意:在经纪人的圈子里,他们各自都有自己的消息来源,并且也只相信自己的消息来源,他们之间的信息传输也需要一定的时间.现在有一个消息需要传 ...

  10. Unity3d 残影效果（狂拽炫酷叼炸天）

    效果图,真的很叼啊 我根据别人的改进了一版,支持MeshFilter上的Mesh(需要确保Mesh的Read/Write是开启的否则不能正常工作) 非常感谢原作者给提供思路.http://blog.c ...