vue,angular,avalon这三种MVVM框架优缺点

文章分析

Vue.js、AngularJS与Avalon.js：三大MVVM框架的优缺点详解

本文将带你一起三个主流的MVVM框架：Vue.js、AngularJS和Avalon.js。无论是初学者还是经验丰富的开发者，本文都将为你提供深入的参考和比较。

一、Vue.js：小巧精悍的MVVM框架

Vue.js，由尤雨溪老师创建，是一个用于构建用户界面的渐进式框架。它专注于MVVM模型的ViewModel层，通过双向数据绑定将View层和Model层紧密连接。Vue.js的官方文档清晰易懂，使得学习曲线相对平缓。其优点包括快速更新DOM、可复用的组件组合应用程序，且文件大小紧凑。作为一个相对较新的项目，Vue.js的成熟度与AngularJS相比略显不足，且对于IE8及以下版本的支持有限。

二、AngularJS：功能丰富的MVW框架

AngularJS是一个超级英雄般的JavaScript MVW框架。其动态视图和丰富的模板功能使其在众多开发者中颇受欢迎。AngularJS包含模板、数据双向绑定、路由、模块化、服务等所有功能，且是声明式的，带有丰富的Angular指令。有Google作为后盾，社区活跃，推广和维护具有优势。但学习曲线较为陡峭，对于一些开发者来说可能较难理解。AngularJS 2.0将会推翻之前的版本，这对于已经熟悉1.x的开发者来说可能需要重新学习。AngularJS对IE8及以下版本的支持也有限。

三、Avalon.js：简单易用的迷你MVVM框架

Avalon.js由司徒正美老师开发，是一个简单易用且迷你的MVVM框架。它最早为了解决同一业务逻辑存在的各种视图呈现问题而开发。Avalon.js支持IE6+，对于需要支持老旧浏览器的项目更为友好。与Vue.js和AngularJS相比，Avalon.js的知名度和社区活跃度可能稍逊一筹。

每个框架都有其独特的优点和缺点。Vue.js简洁易用，AngularJS功能丰富但学习曲线较陡，Avalon.js简单易用且对老旧浏览器友好。选择哪个框架取决于项目的具体需求和开发团队的技能与偏好。希望本文能为你提供足够的参考信息，帮助你做出明智的选择。时常听到老师们热情地向大家推广Avalon.js框架，为此推出了众多教学教程，这无疑为国内学习Avalon.js的开发者们带来了极大的便利。

Avalon.js的优点在于其使用极其简单。只需在HTML中添加相应的数据绑定，然后在JS中使用avalon.define定义ViewModel，接着调用avalon.scan方法，你的应用就能立刻动起来！更令人欣喜的是，Avalon.js具有广泛的浏览器兼容性，支持到古老的IE6浏览器。对于其他现代MVVM框架如KnockoutJS、AngularJS等，Avalon.js同样表现出强大的兼容性。Avalon还推出了针对移动设备的版本——avalon.mobile，使其在新版浏览器如IE10中运行更加高效。

值得一提的是，Avalon.js几乎没有任何依赖，整个框架的代码量不到5000行，压缩后更是小到不到50KiB，非常适合在项目中轻巧地使用。该框架支持管道符风格的过滤函数，使格式化输出更加便捷。而且，它的局部刷新能力极强，颗粒度细化到一个文本节点，特性节点。这意味着在刷新视图时，仅操作需要更新的节点，极大地提高了性能。当节点被移除时，Avalon会智能卸载对应的视图刷新函数，节约内存资源。

值得一提的是，Avalon.js的操作方式与DOM紧密相连。对ViewModel的任何操作都会实时同步到View与Model中，使得数据绑定更加流畅。Avalon自带AMD模块加载器，省去了与其他加载器整合的麻烦。

Avalon.js也存在一些不足之处。它的过滤器功能相对于Angular来说在某些方面稍显不足，特别是在处理数组过滤时，avalon的过滤器仅适用于ms-text和ms-html。由于缺乏英文文档，Avalon的宣传和推广受到了一定的限制。关于OniUI的皮肤问题，虽然有人觉得它不够美观，并希望配合boostrap使用，但目前社区尚未有主动站出来进行此整合的开发者。

Avalon.js是一个功能强大、使用简单的框架，无论是对于新手还是资深开发者来说都是一个值得考虑的选择。尽管存在一些缺点，但它的优点足以让它成为前端开发领域的一颗璀璨之星。让我们期待Avalon.js的未来发展，以及社区为它带来的更多精彩创新！