现在react大红大紫，但它也有一个致命的缺陷，就是依赖于babel编译。随着浏览器的进化，react社区的许多语法糖都可以直接用，但jsx这个facebook的私货则没有办法了。换言之，jsx是我们直接用react的最大障碍。不处理它，就怎么得上babel，就得上webpack。

随着react的升级，许多人连怎么运行react都不会了。这只能怪它的官网太烂了。 react使用了es6，这意味着要安装babel。 如果我们想像jQuery那么简单的开箱即用，早期是提供了browser.js。后来又莫名其妙不见了。这门槛太大了。 首先我们要集齐要用到的JS文件，从各个CDN站点上搜罗吧。 [链接] 这里有react, react-dom。 [...

原先表单验证是ms-duplex, ms-rules, ms-validate三个指令通力合作的结果。每个指令都需要写一些不属于自己的代码，犬牙交错在一起。这次重构，改成事件代理方式来动态收集要验证的元素节点。每个指令变得更加纯粹。

avalon2.2.3这次发布带许多好的东西 首先正式有了自己的LOGO 其次有了自己的QuickStart 样例工程， 这个工程整合了路由，表单，表格，切换卡等组件 [链接] 还有一套基于avalon2的UI库 [链接] 上面三样东西都是QQ群的朋友 提供的。 此外，还更新了电子书，这次使用体积更少的mobi格式 [链接] 添加了各种badge，有了持续集...

avalon2.2使用VBScript, Object.defineProperty, Proxy三种方式实现VM。现在市面上都是用Object.defineProperty。

es6要实现继承，需要用到两个东西extends与super， super必须在构造方法的最上面 {代码...} 下面这样写在chrome下报错 {代码...} 需要改成 {代码...} 组件的继承其实类似于 经典的组合寄生继承。我们需要在构造器里面调用它的父类。 我们创建一个工厂，只传入一个类名，生成一个继承于Avalon的子类 {代码...} 然后我们这...

avalon是一个比较保守的库，因此是市面上少数支持IE6的库。它的理念是操作数据即操作DOM，以工程化的方式来解决浏览器兼容性问题。有了babel, webpack, rollup等工具，avalon2.2.1已经用上es6的类，箭头函数等时髦东西。一味小补小修是跟不上时代的，因此必须有新东西了。

1.5.9的主要改进 修复evaluatorPool使用有缺陷 [链接] 这个应该在2.2.0前都存在，建议尽快升到1.5.9或2.2.1 修复IE6－8取透明度的BUG，这是2.2.0版本带来的改进 重构attr指令 重构监控数组的removeAll方法 [链接]

经过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代替。

avalon官方AJAX库fetch polyfill 发布0.02版，修复众多BUG。 [链接] 用法示例 {代码...} 安装fetch 库 {代码...} 运行例子 跑到koa目录下 {代码...} 浏览器下打开localhost: 4000

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

react社区起来后，不满足现在的AJAX方案，搞了一个fetch。fetch只有在一些非常新的浏览器才支持，而github上的fetch却最多兼容到IE8，并且麻烦得要死，需要安装一大堆polyfill才能运行起来。

给人印象中，树组件是非常令人畏惧的一个组件，超级复杂，超级难写。但使用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...

avalon2实现一个组件非常轻松，并且如何操作这个组件也比以前的avalon2，还是react, angular轻松多了，不需要flux这样奇怪的额外设施。

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中。如果没有这种机制，则需要引...