www.6766.com前端MVVM框架解析之双向绑定_vue.js_脚本之家

来归纳下 Watcher 的作用,其充当了 observer 和 compile 的桥梁。

www.6766.com ,这个简单的 mvvm 框架在对 fragment 编译解析的过程中对 {{}}
文本元素、v-on:click 事件指令、v-model 指令三种类型进行了相应的处理。

// watcher.jsfunction Watcher { this.vm = vm this.exp = exp this.cb = cb this.value = this.get()}Watcher.prototype = { update: function }, run: function() { // ... if  { this.cb.call // 触发 compile 中的回调 } }, get: function() { Dep.target = this // 缓存自己 const value = this.vm.data[this.exp] // 强制执行监听器里的 get 函数 Dep.target = null // 释放自己 return value }}

observer 的职责是监听 Model 的变化,最核心的部分就是用到了
Object.defineProperty() 的 get 和 set 方法,当要获取 Model
的值时,会自动调用 get 方法;当改动了 Model 的值时,会自动调用 set
方法;从而实现了对数据的劫持,代码如下所示。

const vm = new Mvvm({ el: '#app', data: { title: 'mvvm title', name: 'mvvm name' }, })
Compile.prototype = { init: function { this.fragment = this.nodeToFragment // 将节点转为 fragment 文档碎片 this.compileElement // 对 fragment 进行编译解析 this.el.appendChild } }, nodeToFragment: function {...}, compileElement: function {...}, compileText: function  { // 对文本类型进行处理,将 {{abc}} 替换掉 const self = this const initText = this.vm[exp] this.updateText // 初始化 new Watcher(this.vm, exp, function { // 实例化订阅者 self.updateText }, compileEvent: function  { // 对事件指令进行处理 const eventType = dir.split[1] const cb = vm.methods && vm.methods[exp] if  { node.addEventListener(eventType, cb.bind } }, compileModel: function  { // 对 v-model 进行处理 let val = vm[exp] const self = this this.modelUpdater node.addEventListener { const newValue = e.target.value self.vm[exp] = newValue // 实现 view 到 model 的绑定 }) },}

1 在自身实例化的过程中,往订阅器 中添加自己

本文记录了些阅读 mvvm 框架源码关于双向绑定的心得,并动手实践了一个简版的
mvvm 框架,不足之处在所难免,欢迎指正。

首先遍历解析的过程有多次操作 dom 节点,为提高性能和效率,会先将跟节点 el
转换成 fragment 进行解析编译,解析完成,再将 fragment 添加回原来的真实
dom 节点中。代码如下:

compile 的实现

近年来前端一个明显的开发趋势就是架构从传统的 MVC 模式向 MVVM
模式迁移。在传统的 MVC
下,当前前端和后端发生数据交互后会刷新整个页面,从而导致比较差的用户体验。因此我们通过
Ajax 的方式和网关 REST API
作通讯,异步的刷新页面的某个区块,来优化和提升体验。

MVVM 框架的应用场景

MVVM 框架基本概念

最后再来看下生成 Watcher 实例的 compile.js 文件。

MVVM 框架的好处显而易见:当前端对数据进行操作的时候,可以通过 Ajax
请求对数据持久化,只需改变 dom
里需要改变的那部分数据内容,而不必刷新整个页面。特别是在移动端,刷新页面的代价太昂贵。虽然有些资源会被缓存,但是页面的
dom、css、js 都会被浏览器重新解析一遍,因此移动端页面通常会被做成 SPA
单页应用。由此在这基础上诞生了很多 MVVM 框架,比如
React.js、Vue.js、Angular.js 等等。

运行代码,可以看到控制台输出 值发生变化 newValue:1
oldValue:0,至此就完成了 observer 的逻辑。

2 当 model 发生变动,dep.notify() 通知时,其能调用自身的 update
函数,并触发 compile 绑定的回调函数实现视图更新

初看代码也比较顺畅了,但可能会卡在 Dep.target 和
sub.update,由此自然而然地将目光移向 watcher,

MVVM 框架

function Compile { this.vm = vm this.el = document.querySelector this.fragment = null this.init()}Compile.prototype = { init: function { this.fragment = this.nodeToFragment // 将节点转为 fragment 文档碎片 this.compileElement // 对 fragment 进行编译解析 this.el.appendChild } }, nodeToFragment: function { const fragment = document.createDocumentFragment() let child = el.firstChild // △ 第一个 firstChild 是 text while { fragment.appendChild child = el.firstChild } return fragment }, compileElement: function {...},}

观测到变化后,我们总要通知给特定的人群,让他们做出相应的处理吧。为了更方便地理解,我们可以把订阅当成是订阅了一个微信公众号,当微信公众号的内容有更新时,那么它会把内容推送
到订阅了它的人。

在上述代码的 compileTest 函数中看到了期盼已久的 Watcher 实例化,对
Watcher 作用模糊的朋友可以往上回顾下 Watcher 的作用。另外在 compileModel
函数中看到了本文最开始提到的双向绑定流中的 View 到 Model 是借助 input
监听事件变化实现的。

在 MVVM 框架中,View 是不可以直接通讯的,在它们之间存在着 ViewModel
这个中间介充当着观察者的角色。当用户操作 View,ViewModel
感知到变化,然后通知 Model 发生相应改变;反之当 Model
发生改变,ViewModel 也能感知到变化,使 View
作出相应更新。这个一来一回的过程就是我们所熟知的双向绑定。

一般会这样调用 Mvvm 框架

那么订阅了同个微信公众号的人有成千上万个,那么首先想到的就是要 new
Array吧。于是就有了如下代码:

function Mvvm  { this.data = options.data const self = this Object.keys.forEach(key => self.proxyKeys}Mvvm.prototype = { proxyKeys: function { const self = this Object.defineProperty(this, key, { get: function () { // 这里的 get 和 set 实现了 vm.data.title 和 vm.title 的值同步 return self.data[key] }, set: function  { self.data[key] = newValue } }) }}
function Mvvm  { this.data = options.data // ... observe new Compile}

observer 的实现

// observer.jsfunction Dep() { this.subs = [] // 存放订阅者}Dep.prototype = { addSub: function { // 添加订阅者 this.subs.push }, notify: function() { // 通知订阅者更新 this.subs.forEach { sub.update }}function observe {...}function defineReactive { var dep = new Dep // 遍历嵌套对象 Object.defineProperty(data, key, { get: function { // 往订阅器添加订阅者 dep.addSub } return value }, set: function { if  { console.log('值发生变化', 'newValue:' + newValue + ' ' + 'oldValue:' + value) value = newValue dep.notify}

Mvvm 的实现

实现了代理方法后,就步入主流程的实现

模拟 Vue 的双向绑定流,实现了一个简单的MVVM
框架,从上图中可以看出虚线方形中就是之前提到的 ViewModel
中间介层,它充当着观察者的角色。另外可以发现双向绑定流中的 View 到 Model
其实是通过 input 的事件监听函数实现的,如果换成 React
的话,它在这一步交给状态管理工具来实现。另外双向绑定流中的 Model 到 View
其实各个 MVVM 框架实现的都是大同小异的,都用到的核心方法是
Object.defineProperty(),通过这个方法可以进行数据劫持,当数据发生变化时可以捕捉到相应变化,从而进行后续的处理。

MVVM 框架的简单实现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

但是这样子的话,如果要得到 title 属性就要形如 vm.data.title
这样取得,为了让 vm.title 就能获得 title 属性,从而在 Mvvm 的 prototype
上加上一个代理方法,代码如下:

Dep 的关系

let data = { number: 0}observedata.number = 1 // 值发生变化function observe { if  !== 'object') { return } const self = this Object.keys.forEach(key => self.defineReactive )}function defineReactive { observe // 遍历嵌套对象 Object.defineProperty(data, key, { get: function() { return value }, set: function { if  { console.log('值发生变化', 'newValue:' + newValue + ' ' + 'oldValue:' + value) value = newValue } } })}

从代码中可以看到当构造 Watcher 实例时,会调用 get() 方法,接着重点关注
const value = this.vm.data[this.exp] 这句,前面说了当要获取 Model
的值时,会自动调用 Object.defineProperty 的 get
方法,也就是当执行完这句的时候,Dep.target 的值传进了 observer.js 中的
Object.defineProperty 的 get 方法中。同时也一目了然地在
Watcher.prototype 中发现了 update 方法,其作用即触发 compile
中绑定的回调来更新界面。至此解释了 Observer 中 Dep.target 和 sub.update
的由来。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图