Vue、Angular、Avalon 框架比较

Categories: Study

前端开发已经不是前几年的那种前端开发了,已经有农业时代进入工业时代了,这几年出现了很多优秀的 JavaScript 方面的 MVVM 框架,今天我们来比较下 Vue,Angular,AAvalon 这些框架优缺点。

Vue

Vue 尤雨溪老师写的一个用于创建 web 交互界面的库,是一个精简的 MVVM。从技术角度讲,Vue 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了 Directives 和 Filters。Vue 和其他库相比是一个小而美的库,作者的主要目的是通过一个尽量简单的 API 产生可反映的数据绑定和可组合的视图组件,感觉作者的思路非常清晰。

优点

  1. 简单:官方文档很清晰,比 Angular 简单易学。
  2. 快速:异步批处理方式更新 DOM。
  3. 组合:用解耦的、可复用的组件组合你的应用程序。
  4. 紧凑:~18kb min+gzip,且无依赖。
  5. 强大:表达式 & 无需声明依赖的可推导属性 (computed properties)。
  6. 对模块友好:可以通过 NPM、Bower 或 Duo 安装,不强迫你所有的代码都遵循 Angular 的各种规定,使用场景更加灵活。

缺点

  1. 新生儿:Vue 是一个新的项目,2014 年 3 月 20 日发布的 0.10.0ReleaseCandidate 版本,目前 github 上面最新的是 0.11.4 版本,没有 angular 那么成熟。
  2. 影响度不是很大:google 了一下,有关于 Vue 多样性或者说丰富性少于一些有名的库。
  3. 不支持 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 应用开发比以往更简单、更快捷“。当你学习它的时候,我相信你会被它的很多新特效所吸引。

优点

  1. 动态视图:以前从来没有想过 js 可以如此扩展 HTML 的属性,但是 Angular 做到了,它替我们静态的 HTML 加了很多扩展性功能,有一种让 HTML 由死变活的感觉。
  2. 完善:是一个比较完善的前端 MVW 框架,包含模板,数据双向绑定,路由,模块化,服务,依赖注入等所有功能,模板功能强大丰富,并且是声明式的,自带了丰富的 Angular 指令。
  3. Google 维护:Angular 有 Google 来维护,无疑有了一个强大的后台,对于推广和维护明显比 Vue 和 avalon 有优势,社区也非常活泼,能够很好促进它的发展。
  4. Angular & Ionic:Ionic,这俩就是一个好基友,Ionic 通过用 Angular 为了创建一个框架,最适合开发的丰富和强大的应用程序。上次于知乎回答了链接

缺点

  1. 大而全:学习起来有难度,对于我来讲学习曲线很曲折,比较难理解一些。
  2. 推翻重写:前段时候逛社区发现 Angular2 会把之前的推翻重写,两个框架的改变很大,基本是两个框架了,等于是说等到 2.0 出来后又需要从头开始。正如徐飞所说 2.0 的流行至少还要 3 年。不跳票的情况下,1 年 之后才有稳定版,这个稳定版应该不支持很多浏览器了,稳定版一段时间内是没有任何周边的,所以,目前学 1.3 不能算是无效投资。
  3. 不支持 IE8 以下,貌似 2.0 变得只支持移动端了,等到出来后再看吧。

AAvalon

AAvalon是司徒正美老师所写的个简单易用迷你的 MVVM 框架,它最早发布于 2012.09.15,为解决同一业务逻辑存在各种视图呈现而开发出来的。常常可以看到老师推广他的 AAvalon,出了很多教程,无疑对国内学习 AAvalon 的人提供了巨大方便。

优点

  1. 使用简单,在 HTML 中添加绑定,在 JS 中用 avalon.define 定义 ViewModel,再调用 avalon.scan 方法,它就能动了!
  2. 兼容到 IE6 (其他 MVVM 框架,KnockoutJS(IE6), Angular(IE9), EmberJS(IE8), WinJS(IE9) ),另有 avalon.mobile,它可以更高效地运行于 IE10 等新版本浏览器中。
  3. 没有任何依赖,不到 5000 行,压缩后不到 50KiB。
  4. 支持管道符风格的过滤函数,方便格式化输出。
  5. 局部刷新的颗粒度已细化到一个文本节点,特性节点。
  6. 要操作的节点,在第一次扫描就与视图刷新函数相绑定,并缓存起来,因此没有选择器出场的余地。
  7. 让 DOM 操作的代码近乎绝迹。
  8. 使用类似 CSS 的重叠覆盖机制,让各个 ViewModel 分区交替地渲染页面。
  9. 节点移除时,智能卸载对应的视图刷新函数,节约内存。
  10. 操作数据即操作 DOM,对 ViewModel 的操作都会同步到 View 与 Model 去。
  11. 自带 AMD 模块加载器,省得与其他加载器进行整合。

缺点

  1. 不能监听数组元素的属性变化,在 ng 中我们可以通过$watch一个表达式实现这功能(这是引起ng性能瓶颈的元凶之一),但avalon的$watch 只能监听当前 VM 的当前这一层的属性变动。
  2. 没有公开出来的前端集成解决方案(负责生成当前项目的手脚架,上线代码检测,JS,CSS 合并,图片合并,压缩,上传到目标服务器……)。
  3. OniUI 的皮肤不够好看,许多人说要配合 boostrap,但社区还没有人主动站出来做这事。

备注

这其实是我知乎上面答得一个问题的总结,写了一个晚上,故收藏下来了。

Read More

JavaScript 的加载和执行性能优化

【2015-02-03】管理浏览器中的JavaScript代码是一个棘手的问题,因为代码在执行过程中会阻塞浏览器的其他进程,比如用户界面的绘制。每次遇到 script 标签,页面都必须停下来等待代码下载(如果是外链文件)并执行,然后继续处理其他部分。尽管如此,还是有一些方法减少 JavaScript 对性能的影响 ...