关于实现MVVM,网上实在是太多了,本文为个人总结,结合源码以及一些别人的实现

关于双向绑定

  • vue 数据劫持 + 订阅 - 发布
  • ng 脏值检查
  • backbone.js 订阅-发布(这个没有使用过,并不是主流的用法)

双向绑定,从最基本的实现来说,就是在defineProperty绑定的基础上在绑定input事件,达到v-model的功能

代码思路图

两个版本:

  • 简单版本: 非常简单,但是因为是es6,并且代码极度简化,所以不谈功能,思路还是很清晰的
  • 标准版本: 参照了Vue的部分源码,代码的功能高度向上抽取,阅读稍微有点困难,实现了基本的功能,包括计算属性,watch,核心功能都实现没问题,但是不支持数组

简单版本

简单版本的地址: 简单版本

​ 这个MVVM也许代码逻辑上面实现的并不完美,并不是正统的MVVM, 但是代码很精简,相对于源码,要好理解很多,并且实现了v-model以及v-on methods的功能,代码非常少,就100多行

class MVVM {constructor(options) {const {el,data,methods} = optionsthis.methods = methodsthis.target = nullthis.observer(this, data)this.instruction(document.getElementById(el)) // 获取挂载点}// 数据监听器 拦截所有data数据 传给defineProperty用于数据劫持observer(root, data) {for (const key in data) {this.definition(root, key, data[key])}}// 将拦截的数据绑定到this上面definition(root, key, value) {// if (typeof value === 'object') { // 假如value是对象则接着递归//   return this.observer(value, value)// }let dispatcher = new Dispatcher() // 调度员Object.defineProperty(root, key, {set(newValue) {value = newValuedispatcher.notify(newValue)},get() {dispatcher.add(this.target)return value}})}//指令解析器instruction(dom) {const nodes = dom.childNodes; // 返回节点的子节点集合// console.log(nodes); //查看节点属性for (const node of nodes) { // 与for in相反 for of 获取迭代的value值if (node.nodeType === 1) { // 元素节点返回1const attrs = node.attributes //获取属性for (const attr of attrs) {if (attr.name === 'v-model') {let value = attr.value //获取v-model的值node.addEventListener('input', e => { // 键盘事件触发this[value] = e.target.value})this.target = new Watcher(node, 'input') // 储存到订阅者this[value] // get一下,将 this.target 给调度员}if (attr.name == "@click") {let value = attr.value // 获取点击事件名node.addEventListener('click',this.methods[value].bind(this))}}}if (node.nodeType === 3) { // 文本节点返回3let reg = /\{\{(.*)\}\}/; //匹配 {{  }}let match = node.nodeValue.match(reg)if (match) { // 匹配都就获取{{}}里面的变量const value = match[1].trim()this.target = new Watcher(node, 'text')this[value] = this[value] // get set更新一下数据}}}}
}//调度员 > 调度订阅发布
class Dispatcher {constructor() {this.watchers = []}add(watcher) {this.watchers.push(watcher) // 将指令解析器解析的数据节点的订阅者存储进来,便于订阅}notify(newValue) {this.watchers.map(watcher => watcher.update(newValue))// 有数据发生,也就是触发set事件,notify事件就会将新的data交给订阅者,订阅者负责更新}
}//订阅发布者 MVVM核心
class Watcher {constructor(node, type) {this.node = nodethis.type = type}update(value) {if (this.type === 'input') {this.node.value = value // 更新的数据通过订阅者发布到dom}if (this.type === 'text') {this.node.nodeValue = value}}
}
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>MVVM</title>
</head><body><div id="app"><input type="text" v-model="text">{{ text }}<br><button @click="update">重置</button></div><script src="./index.js"></script><script>let mvvm = new MVVM({el: 'app',data: {text: 'hello MVVM'},methods: {update() {this.text = ''}}})</script>
</body></html>

这个版本的MVVM因为代码比较少,并且是ES6的原因,思路非常清晰

我们来看看从new MVVM开始,他都做了什么

解读简单版本

new MVVM

首先,通过解构获取所有的new MVVM传进来的对象

class MVVM {constructor(options) {const {el,data,methods} = optionsthis.methods = methods // 提取methods,便于后面将this给methodsthis.target = null // 后面有用this.observer(this, data)this.instruction(document.getElementById(el)) // 获取挂载点}

属性劫持

开始执行this.observer observer是一个数据监听器,将data的数据全部拦截下来

observer(root, data) {for (const key in data) {this.definition(root, key, data[key])}}

在this.definition里面把data数据都劫持到this上面

 definition(root, key, value) {if (typeof value === 'object') { // 假如value是对象则接着递归return this.observer(value, value)}let dispatcher = new Dispatcher() // 调度员Object.defineProperty(root, key, {set(newValue) {value = newValuedispatcher.notify(newValue)},get() {dispatcher.add(this.target)return value}})}

此时data的数据变化我们已经可以监听到了,但是我们监听到后还要与页面进行实时相应,所以这里我们使用调度员,在页面初始化的时候get(),这样this.target,也就是后面的指令解析器解析出来的v-model这样的指令储存到调度员里面,主要请看后面的解析器的代码

指令解析器

指令解析器通过执行 this.instruction(document.getElementById(el)) 获取挂载点

instruction(dom) {const nodes = dom.childNodes; // 返回节点的子节点集合// console.log(nodes); //查看节点属性for (const node of nodes) { // 与for in相反 for of 获取迭代的value值if (node.nodeType === 1) { // 元素节点返回1const attrs = node.attributes //获取属性for (const attr of attrs) {if (attr.name === 'v-model') {let value = attr.value //获取v-model的值node.addEventListener('input', e => { // 键盘事件触发this[value] = e.target.value})this.target = new Watcher(node, 'input') // 储存到订阅者this[value] // get一下,将 this.target 给调度员}if (attr.name == "@click") {let value = attr.value // 获取点击事件名node.addEventListener('click',this.methods[value].bind(this))}}}if (node.nodeType === 3) { // 文本节点返回3let reg = /\{\{(.*)\}\}/; //匹配 {{  }}let match = node.nodeValue.match(reg)if (match) { // 匹配都就获取{{}}里面的变量const value = match[1].trim()this.target = new Watcher(node, 'text')this[value] = this[value] // get set更新一下数据}}}}

这里代码首先解析出来我们自定义的属性然后,我们将@click的事件直接指向methods,methds就已经实现了

现在代码模型是这样

调度员Dispatcher与订阅者Watcher

我们需要将Dispatcher和Watcher联系起来

于是我们之前创建的变量this.target开始发挥他的作用了

正执行解析器里面使用this.target将node节点,以及触发关键词存储到当前的watcher 订阅,然后我们获取一下数据

this.target = new Watcher(node, 'input') // 储存到订阅者
this[value] // get一下,将 this.target 给调度员

在执行this[value]的时候,触发了get事件

get() {dispatcher.add(this.target)return value
}

这get事件里面,我们将watcher订阅者告知到调度员,调度员将订阅事件存储起来

//调度员 > 调度订阅发布
class Dispatcher {constructor() {this.watchers = []}add(watcher) {this.watchers.push(watcher) // 将指令解析器解析的数据节点的订阅者存储进来,便于订阅}notify(newValue) {this.watchers.map(watcher => watcher.update(newValue))// 有数据发生,也就是触发set事件,notify事件就会将新的data交给订阅者,订阅者负责更新}
}

与input不太一样的是文本节点不仅需要获取,还需要set一下,因为要让订阅者更新node节点

this.target = new Watcher(node, 'text')
this[value] = this[value] // get set更新一下数据

所以在订阅者就添加了该事件,然后执行set

set(newValue) {value = newValuedispatcher.notify(newValue)},

notfiy执行,订阅发布者执行update更新node节点信息

class Watcher {constructor(node, type) {this.node = nodethis.type = type}update(value) {if (this.type === 'input') {this.node.value = value // 更新的数据通过订阅者发布到dom}if (this.type === 'text') {this.node.nodeValue = value}}
}

页面初始化完毕

更新数据

node.addEventListener('input', e => { // 键盘事件触发this[value] = e.target.value
})

this[value]也就是data数据发生变化,触发set事件,既然触发notfiy事件,notfiy遍历所有节点,在遍历的节点里面根据页面初始化的时候订阅的触发类型.进行页面的刷新

现在可以完成的看看new MVVM的实现过程了

最简单版本的MVVM完成

标准版本

标准版本额外实现了component,watch,因为模块化代码很碎的关系,看起来还是有难度的

从理念上来说,实现的思想基本是一样的,可以参照上面的图示,都是开始的时候都是拦截属性,解析指令

代码有将近300行,所以就贴一个地址标准版本MVVM

执行顺序

  1. new MVVM
  2. 获取$options = 所以参数
  3. 获取data,便于后面劫持
  4. 因为是es5,后面forEach内部指向window,这不是我们想要的,所以存储当前this 为me
  5. _proxyData劫持所有data数据
  6. 初始化计算属性
  7. 通过Object.key()获取计算属性的属性名
  8. 初始化计算属性将计算属性挂载到vm上
  9. 开始observer监听数据
  10. 判断data是否存在
  11. 存在就new Observer(创建监听器)
  12. 数据全部进行进行defineProperty存取监听处理,让后面的数据变动都触发这个的get/set
  13. 开始获取挂载点
  14. 使用querySelector对象解析el
  15. 创建一个虚拟节点,并存储当前的dom
  16. 解析虚拟dom
  17. 使用childNodes解析对象
  18. 因为是es5,所以使用[].slice.call将对象转数组
  19. 获取到后进行 {{ }}匹配 指令的匹配 以及递归子节点
  20. 指令的匹配: 匹配到指令因为不知道多少个指令名称,所以这里还是使用[].slice.call循环遍历
  21. 解析到有 v-的指令使用substring(2)截取后面的属性名称
  22. 再判断是不是指令v-on 这里就是匹配on关键字,匹配到了就是事件指令,匹配不到就是普通指令
  23. 普通指令解析{{ data }} _getVMValget会触发MVVM的_proxyData事件 在_proxyData事件里面触发data的get事件
  24. 这时候到了observer的defineReactive的get里面获取到了数据,因为没有Dispatcher.target,所以不进行会触发调度员
  25. 至此_getVMVal获取到了数据
  26. modelUpdater进行Dom上面的数据更新
  27. 数据开始进行订阅,在订阅里面留一个回调函数用于更新dom
  28. 在watcher(订阅者)获取this订阅的属性回调
  29. 在this.getter这个属性上面返回一个匿名函数,用于获取data的值
  30. 触发get事件,将当前watcher的this存储到Dispatcher.garget上面
  31. 给this.getters,callvm的的this,执行匿名函数,获取劫持下来的data,又触发了MVVM的_proxyData的get事件,继而有触发了observer的defineReactive的get事件,不过这一次Dispatcher.target有值,执行了depend事件
  32. depend里面执行了自己的addDep事件,并且将Observer自己的this传进去
  33. addDep里面执行了DispatcheraddSub事件,
  34. addUsb事件里面将订阅存储到Dispatcher里面的this.watchers里面的
  35. 订阅完成,后面将这些自定义的指令进行移除
  36. 重复操作,解析所有指令,v-on:click = "data"直接执行methods[data].bind(vm)

更新数据:

  1. 触发input事件
  2. 触发_setVMVal事件
  3. 触发MVVM的set事件
  4. 触发observer的set事件
  5. 触发dep.notify()
  6. 触发watcher的run方法
  7. 触发new Watcher的回调 this.cb
  8. 触发compile里面的updaterFn 事件
  9. 更新视图

component的实现

计算属性的触发 查看这个例子

computed: {getHelloWord: function () {return this.someStr + this.child.someStr;}},

其实计算属性就是defineproperty的一个延伸

  1. 首先compile里面解析获取到{{ getHelloword }}'
  2. 执行updater[textUpdater]
  3. 执行_getVMVal获取计算属性的返回值
  4. 获取vm[component]就会执行下面的get事件
Object.defineProperty(me, key, {get: typeof computed[key] === 'function' ? computed[key] : computed[key].get,set: function () {}})

是function执行computed[getHelloword],也就是return 的 函数

this.someStr + this.child.someStr;
  1. 依次获取data,触发mvvm的get 以及observer的get,

初始化完成,到这里还没有绑定数据,仅仅是初始化完成了

  1. 开始订阅该事件 new Watcher()
  2. component不是函数所以不是function 执行this.parseGetter(expOrFn);
  3. 返回一个覆盖expOrrn的匿名函数
  4. 开始初始化 执行get()
  5. 存储当前this,开始获取vm[getHelloword]
  6. 触发component[getHelloword]
  7. 开始执行MVVM的get this.someStr
  8. 到MVVM的get 到 observer的get 因为 Dispatcher.target存着 getHelloWord 的 this.depend ()所以执行
  9. Dispatcher的depend(),执行watcher的addDep(),执行 Dispatcher的addSub() 将当前的watcher存储到监听器
  10. 开始get第二个数据 this.child.someStr,同理也将getHelloWord的this存入了当前的Dispatcher
  11. 开始get第三个数据 this.child,同理也将getHelloWord的this存入了当前的Dispatcher

这个执行顺序有点迷,第二第三方反来了

this.parseGetter(expOrFn);就执行完毕了

目前来看为什么component会实时属性数据?

因为component的依赖属性一旦发生变化都会更新 getHelloword 的 watcher ,随之执行回调更新dom

watch的实现

watch的实现相对来说要简单很多

  1. 我们只要将watch监听的数据告诉订阅者就可以了
  2. 这样,wacth更新了
  3. 触发set,set触发notify
  4. notify更新watcher
  5. watcher执行run
  6. run方法去执行watch的回调
  7. 即完成了watch的监听
watch: function (key, cb) {new Watcher(this, key, cb)
},

转载于:https://www.cnblogs.com/wuvkcyan/p/9602562.html

对类Vue的MVVM前端库的实现相关推荐

  1. 【iMessage苹果相册推日历真机推】改成vue的MVVM模式现在前端趋向是去dom化

    推荐内容IMESSGAE相关 作者推荐内容 iMessage苹果推软件 *** 点击即可查看作者要求内容信息 作者推荐内容 1.家庭推内容 *** 点击即可查看作者要求内容信息 作者推荐内容 2.相册 ...

  2. Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端(web端)、数据可视化组件库(数据大屏) 、动画组件库、3D组件库】

    Vue常用的组件库大全[前端工程师必备] (一)移动端 常用组件库 1)Vant ui 2)Cube UI 3)VUX 4) NuTUI 5)Mint ui 6)Varlet UI 7)OnsenUI ...

  3. SpringBoot在线考试系统源码:前端使用 VUE 和 Element-UI 组件库配合开发

    Springboot+vue在线考试系统源码 开发语言:Java 数据库:Mysql 开发工具:Eclipse 源码免费分享,需要源码参考学习的小伙伴可私信我. 使用技术: 后端:SpringBoot ...

  4. 实现 MVVM 类 Vue 迷你框架(五)

    如何实现 MVVM 类 Vue 迷你框架(五) 上面几节课我们已经把数据代理,响应式处理搞完了,接下来需要做什么呢?当然是最难的一部分了,就是我们的编译模板. 使用到的dom编程方法 element. ...

  5. Vue 开发的组件库

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用 ...

  6. Vue+ElementUI纯前端技术实现对表格数据的增删改查

    Vue+ElementUI纯前端技术实现对表格数据的增删改查 页面展示效果 一.页面结构 分为三个部分 head body 以及script 一般我个人是在head中引入一些组件库 , 还有一些样式 ...

  7. [转]Vue生态系统中的库

    Vue UI组件库 Vuex vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github ...

  8. Vue之MVVM、Vue实例对象、生命周期

    1.初识Vue Vue是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用,Vue的核心是只关注视图层(如何理解),不仅易于上手,还便于与第三方库或既有项目整合. 渐进式框架:渐进 ...

  9. 基于Vue结合Vant组件库的仿电影APP

    Vue综合案例 Vue综合案例 一.项目概要 1.效果前瞻 2.开发流程 3.开发环境 二.初始化及必要知识点 1.初始化远程仓库 2.创建项目 3.路由规划 4.反向代理配置 5.网络请求封装 6. ...

最新文章

  1. MySQL面试题 | 附答案解析(十六)
  2. python3 numpy array_python 3和numpy数组
  3. 双十一:透支消费?累积消费?促进消费?
  4. nginx 限流,以及nginx直接返回json格式数据
  5. Tomcat配置Web虚拟目录
  6. 工业用微型计算机(16)-指令系统(11)
  7. Kubernetes 编写自定义 controller
  8. 《Android游戏开发详解》——第3章,第3.1节构造方法
  9. 三菱q系列plc 和电脑socket_三菱Q系列PLC 以太网通信设置方法
  10. I,P,B帧和PTS,DTS的关系,GOP相关
  11. mysql innodb_large_prefix_那些从MySQL5.6升级到5.7的坑--innodb_large_prefix-阿里云开发者社区...
  12. Java开发基于控制台的购书系统
  13. 软件测试的艺术(二)
  14. 基于IR2136的三相电机控制
  15. UIPATH 下载文件
  16. linux 销毁 文件,彻底删除Linux文件的方法汇总
  17. springboot下载网络图片到本地及Linux服务器(超详细)
  18. 2022年淘宝618活动时间和天猫618有什么优惠活动
  19. 20个高级java开发面试题(带答案)
  20. java @around,Spring AOP基于注解的Around通知

热门文章

  1. ROS2学习(十).ROS概念 - 主题的统计
  2. java链表变成字符串,leetcode算法题解(Java版)-6-链表,字符串
  3. 在PAT上提交Java代码
  4. mysql 内存表使用教程_MySQL的内存表的基础学习教程
  5. Linux版本_linux版本信息解析
  6. Java读取文件时第一行出现乱码“?”问号
  7. 使用PyTorch进行手写数字识别,在20 k参数中获得99.5%的精度。
  8. vgg 名人人脸图像库_您看起来像哪个名人? 图像相似度搜索模型
  9. 机器学习 对回归的评估_在机器学习回归问题中应使用哪种评估指标?
  10. ai无法启动产品_启动AI启动的三个关键教训