前端MVVM框架解析之双向绑定
199 浏览量
2020-11-28
01:04:16
上传
评论
收藏 168KB PDF 举报
前端前端MVVM框架解析之双向绑定框架解析之双向绑定
MVVM 框架框架
近年来前端一个明显的开发趋势就是架构从传统的 MVC 模式向 MVVM 模式迁移。在传统的 MVC 下，当前前端和后端发生数
据交互后会刷新整个页面，从而导致比较差的用户体验。因此我们通过 Ajax 的方式和网关 REST API 作通讯，异步的刷新页
面的某个区块，来优化和提升体验。
MVVM 框架基本概念框架基本概念
在 MVVM 框架中，View(视图) 和 Model(数据) 是不可以直接通讯的，在它们之间存在着 ViewModel 这个中间介充当着观察者
的角色。当用户操作 View(视图)，ViewModel 感知到变化，然后通知 Model 发生相应改变；反之当 Model(数据) 发生改
变，ViewModel 也能感知到变化，使 View 作出相应更新。这个一来一回的过程就是我们所熟知的双向绑定。
MVVM 框架的应用场景框架的应用场景
MVVM 框架的好处显而易见：当前端对数据进行操作的时候，可以通过 Ajax 请求对数据持久化，只需改变 dom 里需要改变
的那部分数据内容，而不必刷新整个页面。特别是在移动端，刷新页面的代价太昂贵。虽然有些资源会被缓存，但是页面的
dom、css、js 都会被浏览器重新解析一遍，因此移动端页面通常会被做成 SPA 单页应用。由此在这基础上诞生了很多
MVVM 框架，比如 React.js、Vue.js、Angular.js 等等。
MVVM 框架的简单实现
模拟 Vue 的双向绑定流，实现了一个简单的MVVM 框架，从上图中可以看出虚线方形中就是之前提到的 ViewModel 中间介
层，它充当着观察者的角色。另外可以发现双向绑定流中的 View 到 Model 其实是通过 input 的事件监听函数实现的，如果换
评论0