1 概述
2 MVVM,Model-View-ViewModel
3 双向数据绑定
4 监听 DOM 改变
5 监听模型数据变化,数据劫持
6 观察者模式,Observer
1 概述
JS 几个流行的框架 Vuejs、Ember.js、AngularJS 都使用 MVVM 模式,该模式叫做视图模型双向数据绑定,以达到数据和视图快速同步的目的。本文就对其中涉及的原理部分加以说明(后续还有一篇模拟 实现)。主要体现就是表单元素值变,JS变量值改变,若页面上有输出,输出值也改变,典型的代码如下,vuejs.org 上提供的例子:
1// HTML 2
3
{{ message }}
4 5
6 7// JS 8var app6 = new Vue({ 9 el: '#app',10 data: {11 message: 'Hello Vue!'12 }13})
效果:
文内容包括但不限于:
- MVVM 数据双向绑定
- DOM 事件监听
- 数据劫持
- 观察者模式
先从什么是 MVVM 说起。
2 MVVM,Model-View-ViewModel
MVVM 拆开来是 Model-View-ViewModel,View,ViewModel,Model 三部分组成,它是一种前端开发的架构模式。
- View :代表的是视图,模版。它用来显示数据。
- Model :代表的是模型、数据,可以在 Model 层中定义数据修改和操作的业务逻辑。
- ViewModel :连接 Model 和 View。
如图所示:
在 MVVM 的架构下,View 层(DOM展示层)和 Model 层(数据对象层)并没有直接联系,而是通过 ViewModel 层进行交互。ViewModel 层通过双向数据绑定将 View 层和 Model 层连接了起来,使得 View 层和 Model 层的同步工作完全是自动的。
因此开发者只需关注业务逻辑,无需手动操作 DOM,复杂的数据状态维护交给 MVVM 统一来管理,称之为数据驱动的开发方法。
3 双向数据绑定
就是指数据的传递有两个方向:
- 方向1:从数据到视图,数据变化时,视图也变化。
- 方向2:从视图到数据,例如 input 框的内容变化时,JS 维护的数据也会变化,同时再次传递到视图上,视图也随之变化。
若要实现以上的数据传递,我们需要去监听数据变化和视图的变化,才能做出相应改变。
4 监听 DOM 改变
监听 DOM 视图的改变是为了更新模型。我们通过 DOM 事件就可以实现监听视图的改变,典型的 input 的 change、input 事件都可以完成监听,通过事件处理器,实现对应的模型的数据改变。
前面例子中的 input 元素的值的不断改变,就是 DOM 的改变,我们监听到之后,将模型变量 message 做同步更改!就是视图改变传递到了模型上。
那么为什么页面的展示也变了呢?就是下一个传递了。模型改变传递到视图上。数据的改变传递到视图上如何实现的呢?就是监听数据实现的。
5 监听模型数据变化,数据劫持
如何做到 message 模型变量的变化我们可以监听到呢?其实是利用的 JS 中对象属性修改的特殊 get、set 方法实现的,示例代码如下:
1var o = {}; // 创建一个新对象 2 3// 在对象中添加一个属性与存取描述符的示例 4var messageValue; 5Object.defineProperty(o, "message