首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

对类Vue的MVVM前端库的实现代码

Posted in Javascript onSeptember 07, 2018

MVVM

(ModelView ViewModel)是一种基于MVC的设计，开发人员在HTML上写一些Bindings,利用一些指令绑定，就能在Model和ViewModel保持不变的情况下，很方便的将UI设计与业务逻辑分离，从而大大的减少繁琐的DOM操作。

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

关于双向绑定

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

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

代码思路图

对类Vue的MVVM前端库的实现代码

两个版本:

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

简单版本

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

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

class MVVM {
 constructor(options) {
 const {
  el，
  data，
  methods
 } = options
 this.methods = methods
 this.target = null
 this.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 = newValue
  dispatcher.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) { // 元素节点返回1
  const 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) { // 文本节点返回3
  let 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 = node
 this.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
 } = options
 this.methods = methods // 提取methods，便于后面将this给methods
 this.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 = newValue
  dispatcher.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) { // 元素节点返回1
  const 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) { // 文本节点返回3
  let 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就已经实现了

现在代码模型是这样

对类Vue的MVVM前端库的实现代码

调度员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 = newValue
  dispatcher.notify(newValue)
  }，

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

class Watcher {
 constructor(node， type) {
 this.node = node
 this.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里面执行了Dispatcher的addSub事件，
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)
}，

对类Vue的MVVM前端库的实现代码

- Author -

归去来兮-不如去兮

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
浅谈Node.js：理解stream
Dec 08 Javascript
JS出现失效的情况总结
Jan 20 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
vue 全局环境切换问题
Oct 27 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
解决await在forEach中不起作用的问题
Feb 25 Javascript
cnpm加速Angular项目创建的方法
Sep 07 #Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 #Javascript
vue 点击按钮增加一行的方法
Sep 07 #Javascript
详解使用jest对vue项目进行单元测试
Sep 07 #Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 #Javascript
koa-router源码学习小结
Sep 07 #Javascript
Vue.js实现表格渲染的方法
Sep 07 #Javascript
创业计划书(312) 职业生涯规划书(234) 证婚词(21) 自荐信(981) 求职信(1029) 演讲稿(869) 推荐信(292) 岗位职责(1324) 心得体会(660) 思想汇报(404)
You might like
php5 mysql分页实例代码
2008/04/10 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
python 写的一个爬虫程序源码
2016/02/28 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
python3.5绘制随机漫步图
2018/08/27 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
python自动识别文本编码格式代码
2019/12/26 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
python爬取招聘要求等信息实例
2020/11/20 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
甜美蛋糕店创业计划书
2014/01/30 职场文书
网络研修随笔感言
2014/02/17 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
不同意离婚上诉状
2015/05/23 职场文书
初中班长竞选稿
2015/11/20 职场文书