经过avalon2.0.*与avalon2.1.*这30多个小版本的迭代，avalon终于实现自己一套html parser, 虚拟DOM系统与两个数组的精致diff算法，再结合mobx的一些源码阅读所得，终于催生了avalon2.2。

avalon2.1.16也是一个Fix BUG版本，没有增加任何新特征。不同的是内部源码已经全部用es6 modules重新编写了。之前使用nodejs风格的CommonJS编写，webpack进行合并。现在改成es6标准模块，rollup.js进行合并，再用webpack进行一些修改，框架的体积得到巨大的改善：

angular的ViewModel有一个专门的官方术语叫$scope, 它只是一个普通构造器（Scope）的实例。换言之，它是一个普通的JS对象。为了实现MVVM框架通常宣传的那种“改变数据即改变视图”的魔幻效果，它得装备上更多更强大的外挂。

不是有了Object.defineProperty, Proxy或Reflect，放进一个对象就new出一个ViewModel出来。只能说，它们是必要条件。我们需要将要监听的属性变成访问器属性，所有访问器属性都是共用同一套setter, getter方法。getter里面做依赖收集(不是必须的)，setter里做视图刷新或触发该属性的$watch回调。在此之前，我们需要完成一...

前端框架最重要的目的是将页面渲染出来。“渲染”（render）这个词最初不是前端的东西的。前端之前叫做切图，将设计师做的PSD变成一个静态页面，然后加上动态交互。但是我们有许多数据是来自后端，如何将数据加入静态页面呢？于是又多了一套工序叫“套页面”。套页面的过程实际就是将静态页面变成切割成一块块，每一块都是一...

一. xmp, wbr, template可以直接使用is属性代替ms-widget来申明组件类型。想当于把原来的is配置项提了出来。 如果还要申明其他配置项，还是需要ms-widget配置对象。

3 不要动态添加新页面。比如你用想用$(id).append(newHTML)在某元素底下加一些东西，这个不起作用，又会逼使你再次用avalon.scan。这就违背第二条规则了。最好使用ms-html代替。

虚拟DOM的一个好处是能大大提高性能，另一个好处是能过错整描述我们的页面结构。因此在非浏览器环境下，虚拟DOM也能正常运行。并且avalon2自一开始，就努力隔离DOM API。基于这两点，avalon2可以原封不动地运行于nodejs中，进行定义VM，渲染视图等操作。

给人印象中，树组件是非常令人畏惧的一个组件，超级复杂，超级难写。但使用avalon2来做，这却是级其简单的一件事。首先从样式入做，无序列表是天然可用的树结构，几个UL元素套在一起，它们就自然处理好缩进问题。换言之，我们用UL元素作为树的节点，那么树组件内部也需要存在树组件，需要形成递归结构。avalon2的slot机...

grid组件（表格）是非常常用的组件，尤其是后台系统。它的制定也是五花八门的。因此jQuery有大量的grid组件，每个都庞大无比，集成各种功能，复杂得像Excel。但即便是这样，我们的产品经理总是能提出一些需求，让你死去活来。因此有时我们不需要一个功能丰富的grid，而是一个扩展性极好的grid。

slot是WEBComponent引进的东西，叫做插槽。在浏览器中，它为一个content元素。不过有资料表明，它会更名为slot。 并且在其他语言的模板引擎中，slot标签更为常用。因此avalon2的组件机制使用slot元素。

[TOC] avalon拥有两大利器，强大的组件化功能以应对复杂墙问题，顶级的虚拟DOM机制来解决性能墙问题。 组件可谓是指令的集合，但1＋1 > 2! 组件容器 组件容器是一个占位用的元素节点. 当avalon扫描到此位置上时将它替换成组件. 在avalon2中有4类标签可以用作组件容器,分别是wbr, xmp, template, 及ms-开头的自定义标...

移动端与PC端最大的区别是事件系统不一样，并且移动端上的浏览器对新API支持比较好。因为我们可以用avalon.modern.js作为核心，加上移动事件构建avalon.mobile.

本章节，我们做分页组件，这是一个非常常用的组件。grid, listview都离不开它。因此其各种形态也有。 本章节教授的是一个比较纯正的形态，bootstrap风格的那种分页栏。 我们建立一个ms-pager目录，控制台下使用npm init初始化仓库。 然后我们添加dependencies配置项，尝试使用一些更强大的loader! {代码...} 然后npm ins...

MVVM的成功很大一语分是来自于其指令，或叫绑定。让操作视图的功能交由形形式式的指令来代劳。VM，成了一个大管家。它只一个反射体。我们对它的操作，直接影响到视图。因此俗称“操作数据即操作视图”！至于它是怎么影响视图，avalon视其版本的不同，也有不同的解法。如果抛开avalon，纵观世上所有MVVM框架，大抵有如下几...

css3动画要求我们至少添加4个类名。这个是从angular那里学过来的。因此如何你以前的项目是基于angular，它那些CSS动画类可以原封不动地搬过来用。

avalon2最引以为豪的东西是，终于有一套强大的类Web Component的组件系统。这个组件系统媲美于React的JSX，并且能更好地控制子组件的传参。

avalon2砍掉了不少功能（如ms-include,ms-data），腾出空间加了其他更有用的功能。数据验证就是其中之一。现在avalon2内置的验证指令是参考之前的oniui验证框架与jquery validation。

在许多表单应用，我们经常遇到点击一个复选框（或下拉框）会引发旁边的复选框（或下拉框）发生改变，这种联动效果用avalon来做是非常简单的。因为avalon拥有经典MVVM框架的一大利器，双向绑定！绝大部分的指令是从vm单向拍到页面，而双向绑定，则通过监听元素的value值变化，反向同步到vm中。如果没有这种机制，则需要引...

其次，this直接指向vmodel，元素节点则通过e.target获取。如果要传入多个参数，需要指定事件对象，还是与原来一样使用$event

avalon2的循环指令的用法完全改变了。avalon最早期从knockout那样抄来ms-each,ms-with，分别用于数组循环与对象循环。它们都是针对元素内容进行循环。后来又从angular那里抄来了ms-repeat， 这是循环元素内部的。

本节介绍的ms-if指令与ms-visible很相似，都是让某元素“看不见”，不同的是ms-visible是通过CSS实现，ms-if是通过移除插入节点实现。

avalon2的类名操作涉及到ms-class,ms-active,ms-hover，但用法也全变了，行为类似于前两节说的ms-attr,ms-css，目的是将相同行为集中在一起定义。

avalon2的ms-css的变革思路与ms-attr一样，将多个操作合并成到一个对象里面处理，因此没有ms-css-name="value"，只有ms-css="Object"或ms-css="Array".

有多少个属性就写多个ms-attr-。其中不能省略。此外，还存在ms-title, ms-alt，ms-src, ms-href, ms-selected, ms-checked等等缩略写法。但估计很少人知道，到底哪些属性可以缩写，哪些不能。

今天的主角是ms-visible，它的效果类拟于jQuery的toggle，如果它后面跟着的表达式为真值时则显示它所在的元素，为假值时则隐藏。不过显示不是 display:none这么简单，众所周知，display拥有inline, inline-block, block, list-item, table, table-cell等十来个值，比如用户之前是让此LI元素表示inline-block，实现水平菜...

在avalon1中，存在四种数据填充的手段 {{expr}}, {{expr|html}}, ms-text, ms-html 其实第一种与第三种一样，用于输出纯文本，第二种与第四种一样，如果用户的数据是一些HTML标签，那么会转换成元素节点插入到当前位置。 在avalon2中，只有三种数据填充的手段，原第二种使用html过滤器的方式由于在虚拟DOM不好实现，被移...

avalon2的vm是一个非常重要的东西，其设计原型最初脱胎于knockout.js，但到avalon1.6中，终于寻得自己的方案，更精简，更易用，更魔幻。

经过难苦奋战，avalon2终于面世了。这花了大半年时间，其中1.6还胎死腹中。长达半年没有产出，我都担心自己会被裁掉…… avalon2许多API与1.4.×保持一致，当然也添加了一些1.5的功能，此外随着react的红红火火，对它的研究，也集成到此框架中。 我们先来一个简单的例子 {代码...} 如果大家学过avalon1.*就好办，没学也没关...