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. jquery版悬浮模块demo

    在做在线客服时,代码就是按照该模块命名.现在,我要添加一个返回主页的功能,我觉得再复制一遍之前的代码,那个量有点多,如果我再添加一个功能,那个量会很多……现在我用创建对象字面量的方式来创建(其实我还想 ...

  2. NSOperation

    自定义operation 相比GCD,可以中断任务,也可使用 addDependency,对要执行的任务进行排序.. // // CustomOperation.h // Test // // Cre ...

  3. AJAX 页面数据传递

    $.ajax({ //一个Ajax过程 type: "post", //以post方式与后台沟通 url: "personstockajax.php", //与 ...

  4. 写一个迷你版Smarty模板引擎，对认识模板引擎原理非常好（附代码）

    前些时间在看创智博客韩顺平的Smarty模板引擎教程,再结合自己跟李炎恢第二季开发中CMS系统写的tpl模板引擎.今天就写一个迷你版的Smarty引擎,虽然说我并没有深入分析过Smarty的源码,但是 ...

  5. Best Time to Buy and Sell Stock with Cooldown

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  6. UESTC 250

    windy数 基本的数位DP,需要判断当前位是否为起始位. #include <cstdio> #include <cmath> #include <cstring> ...

  7. 解读Unity中的CG编写Shader系列八（多光源漫反射）

    转自http://www.itnose.net/detail/6117338.html 前文中完成最简单的漫反射shader只是单个光源下的漫反射,而往往场景中不仅仅只有一个光源,那么多个光源的情况下 ...

  8. C# 静态函数调用窗体控件

    回调函数方法是静态函数,需要调用窗体控件,赋值或取值. 定义 public static Form1 mainFrm;   mainFrm = this; public partial class F ...

  9. UIWebView内嵌网页 Xcode7.0以后的用法

    UIWebView* webPage=[[UIWebView alloc]initWithFrame:CGRectMake(0, 0, screenWidth, screenHeight-64)]; ...

  10. Effective C++ -----条款46：需要类型转换时请为模板定义非成员函数

    当我们编写一个class template,而它所提供之“与此template相关的”函数支持“所有参数之隐式类型转换”时,请将那些函数定义为“class template内部的friend函数”.