Vue、Angular、Avalon 框架比较
Categories: Study
前端开发已经不是前几年的那种前端开发了，已经有农业时代进入工业时代了，这几年出现了很多优秀的 JavaScript 方面的 MVVM 框架，今天我们来比较下 Vue，Angular，AAvalon 这些框架优缺点。
Vue
Vue 尤雨溪老师写的一个用于创建 web 交互界面的库，是一个精简的 MVVM。从技术角度讲，Vue 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了 Directives 和 Filters。Vue 和其他库相比是一个小而美的库，作者的主要目的是通过一个尽量简单的 API 产生可反映的数据绑定和可组合的视图组件，感觉作者的思路非常清晰。
优点
- 简单：官方文档很清晰，比 Angular 简单易学。
- 快速：异步批处理方式更新 DOM。
- 组合：用解耦的、可复用的组件组合你的应用程序。
- 紧凑：~18kb min+gzip，且无依赖。
- 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
- 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。
缺点
- 新生儿：Vue 是一个新的项目，2014 年 3 月 20 日发布的 0.10.0ReleaseCandidate 版本，目前 github 上面最新的是 0.11.4 版本，没有 angular 那么成熟。
- 影响度不是很大：google 了一下，有关于 Vue 多样性或者说丰富性少于一些有名的库。
- 不支持 IE8：哈哈不过 Angular 1.3 也抛弃了对 IE8 的支持，但是 @司徒正美 老师的 avalon 是支持 IE6+的，应该下了很多努力去优化。这一点对于那些需要支持 IE8 的项目就不好了，不过这也是 web 前端开发的一个趋势，像 IE 低版本就应该退出历史舞台了，通过改变我们的前端思维，而不是顺应那些使用老版本而不去升级的人。玉伯老师就说过一句话，我觉得说的非常好“这年头，支持 IE6、7 早就不再是特性，而是耻辱。努力推动支付宝全面不支持 IE6、7，期待更多兄弟加盟”。
Angular
Angular 最近很火，追随者也很多，Superheroic JavaScript MVW Framework。官方说得很朴素：“完全使用 JavaScript 编写的客户端技术。同其他历史悠久的 Web 技术（HTML、CSS 和 JavaScript）配合使用，使 Web 应用开发比以往更简单、更快捷“。当你学习它的时候，我相信你会被它的很多新特效所吸引。
优点
- 动态视图：以前从来没有想过 js 可以如此扩展 HTML 的属性，但是 Angular 做到了，它替我们静态的 HTML 加了很多扩展性功能，有一种让 HTML 由死变活的感觉。
- 完善：是一个比较完善的前端 MVW 框架，包含模板，数据双向绑定，路由，模块化，服务，依赖注入等所有功能，模板功能强大丰富，并且是声明式的，自带了丰富的 Angular 指令。
- Google 维护：Angular 有 Google 来维护，无疑有了一个强大的后台，对于推广和维护明显比 Vue 和 avalon 有优势，社区也非常活泼，能够很好促进它的发展。
- Angular & Ionic：Ionic，这俩就是一个好基友，Ionic 通过用 Angular 为了创建一个框架，最适合开发的丰富和强大的应用程序。上次于知乎回答了链接。
缺点
- 大而全：学习起来有难度，对于我来讲学习曲线很曲折，比较难理解一些。
- 推翻重写：前段时候逛社区发现 Angular2 会把之前的推翻重写，两个框架的改变很大，基本是两个框架了，等于是说等到 2.0 出来后又需要从头开始。正如徐飞所说 2.0 的流行至少还要 3 年。不跳票的情况下，1 年 之后才有稳定版，这个稳定版应该不支持很多浏览器了，稳定版一段时间内是没有任何周边的，所以，目前学 1.3 不能算是无效投资。
- 不支持 IE8 以下，貌似 2.0 变得只支持移动端了，等到出来后再看吧。
AAvalon
AAvalon是司徒正美老师所写的个简单易用迷你的 MVVM 框架，它最早发布于 2012.09.15，为解决同一业务逻辑存在各种视图呈现而开发出来的。常常可以看到老师推广他的 AAvalon，出了很多教程，无疑对国内学习 AAvalon 的人提供了巨大方便。
优点
- 使用简单，在 HTML 中添加绑定，在 JS 中用 avalon.define 定义 ViewModel，再调用 avalon.scan 方法，它就能动了！
- 兼容到 IE6 (其他 MVVM 框架，KnockoutJS(IE6), Angular(IE9), EmberJS(IE8), WinJS(IE9) )，另有 avalon.mobile，它可以更高效地运行于 IE10 等新版本浏览器中。
- 没有任何依赖，不到 5000 行，压缩后不到 50KiB。
- 支持管道符风格的过滤函数，方便格式化输出。
- 局部刷新的颗粒度已细化到一个文本节点，特性节点。
- 要操作的节点，在第一次扫描就与视图刷新函数相绑定，并缓存起来，因此没有选择器出场的余地。
- 让 DOM 操作的代码近乎绝迹。
- 使用类似 CSS 的重叠覆盖机制，让各个 ViewModel 分区交替地渲染页面。
- 节点移除时，智能卸载对应的视图刷新函数，节约内存。
- 操作数据即操作 DOM，对 ViewModel 的操作都会同步到 View 与 Model 去。
- 自带 AMD 模块加载器，省得与其他加载器进行整合。
缺点
- 不能监听数组元素的属性变化，在 ng 中我们可以通过$watch一个表达式实现这功能（这是引起ng性能瓶颈的元凶之一），但avalon的$watch 只能监听当前 VM 的当前这一层的属性变动。
- 没有公开出来的前端集成解决方案（负责生成当前项目的手脚架，上线代码检测，JS，CSS 合并，图片合并，压缩，上传到目标服务器……）。
- OniUI 的皮肤不够好看，许多人说要配合 boostrap，但社区还没有人主动站出来做这事。
备注
这其实是我知乎上面答得一个问题的总结，写了一个晚上，故收藏下来了。