Avalon 学习系列（一） —— 初步入门

最新推荐文章于 2024-07-26 15:59:24 发布

＊且听风吟

最新推荐文章于 2024-07-26 15:59:24 发布

阅读量1.3k

点赞数

分类专栏： # Avalon 文章标签：学习前端 javascript

本文链接：https://blog.csdn.net/hh18700418030/article/details/130490929

版权

本文是Avalon学习系列的第一篇，介绍了Avalon的基本概念、优点和MVVM模式。Avalon是一款由司徒正美开发的前端框架，具有易用、高性能和优秀兼容性的特点。文章详细讲解了如何设置控制域、定义Model以及如何使用MVVM模式实现数据和视图的双向绑定。此外，还探讨了Avalon中的控制域、Model定义等相关概念。

摘要由CSDN通过智能技术生成

简介

Avalon 是司徒正美开发和维护的一款基于虚拟 DOM 与属性劫持的迷你、易用、高性能的前端 MVVM 框架，最早发布于2012.09.15。其拥有超优秀的兼容性，支持移动开发、后端渲染、WEB Component 式组件开发，无需编译，开箱即用，可以轻松实现数据的隔离和双向绑定。

优点

使用简单，在 HTML 中添加绑定，在 JS 中用avalon.define 定义 ViewModel，再调用 avalon.scan 方法，就可以了；
体积小巧，没有任何依赖，压缩后仅有60多kb；
兼容 IE6+；
效率更高，跑起来比angular和knockout都要更快，在移动端上该优势会更大（avalon有移动端专版的avalon.modern.js）；
有配套的 UI 库；
支持管道符风格的过滤函数，方便格式化输出；
局部刷新的颗粒度已细化到一个文本节点，特性节点；
它将要操作的节点，在第一次扫描就与视图刷新函数相绑定，并缓存起来，避免了选择器的出场的，大量减少了 DOM 操作；
使用类似 CSS 的重叠覆盖机制，让各个 ViewModel 分区交替地渲染页面；
DOM 节点移除时，智能卸载对应的视图刷新函数，节约内存；
操作数据即操作 DOM，对ViewModel的操作都会同步到View与Model；
实现了数据和视图的隔离，可维护性好。

MVVM模式

Avalon 将所有前端代码彻底分成两部分，视图的处理通过绑定实现，业务逻辑则集中在一个个叫 vm 的对象中处理；操作 vm 的数据，就自然而然地同步到视图。Object.defineProperty 的作用是将对象的某一个属性，转换一个setter 与 getter，只要劫持这两个方法，通过 Pub/Sub 模式就能偷偷操作视图。

Avalon 也是基于这个理论建立起来的，在视图上添加一些标记，然后在Java中对对象的属性进行监听，当这些属性发生变化，以观察者模式，通知视图进行变更；视图上也可以绑定一些事件，然后当这些事件被触发时，反过来修改这个对象的特定属性，这叫双向绑定。

所有需要操作的数据被集中一起管理，它们合并成一个叫ViewModel 的东西，而原来的HTML页面只做了一些修改，称之为View，而View本身是一个动态模板（Live Template）。