对类Vue的MVVM前端库的实现代码
MVVM
(ModelView ViewModel)是一种基于MVC的设计，开发人员在HTML上写一些Bindings,利用一些指令绑定，就能在Model和ViewModel保持不变的情况下，很方便的将UI设计与业务逻辑分离，从而大大的减少繁琐的DOM操作。
关于实现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
} = 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就已经实现了
现在代码模型是这样
调度员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)
}，
相关推荐
-
JavaScript的MVVM库Vue.js入门学习笔记
一.v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 完整语法 --> <button v-bind:disabled="someDynamicCondition">Button</button> <!-- 缩写
-
前端 Vue.js 和 MVVM 详细介绍
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定. Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 JavaScript 库,专注于View 层.它的核心是 MVVM 中的 VM,也就是 ViewModel. ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量
-
Vue的MVVM实现方法
本文介绍了Vue的MVVM实现方法,分享给大家,具体如下: 1. Object.defineProperty() 定义属性 用意:给一个对象定义属性,那个属性原来是不存在的.这是一个初衷,属性是不存在的,需要额外添加. ①.使用说明 Object.defineProperty(obj,props) 第一个参数是将被添加或者修改的属性的对象 第二个参数是一个对象,表示将要添加的一个或多个键值对一直要添加属性的具体配置 { '属性名':{value:'...',writable:true},
-
vue实现简单的MVVM框架
不知不觉接触前端的时间已经过去半年了,越来越发觉对知识的学习不应该只停留在会用的层面,这在我学jQuery的一段时间后便有这样的体会. 虽然jQuery只是一个JS的代码库,只要会一些JS的基本操作学习一两天就能很快掌握jQuery的基本语法并熟练使用,但是如果不了解jQUery库背后的实现原理,相信只要你一段时间不再使用jQuery的话就会把jQuery忘得一干二净,这也许就是知其然不知其所以然的后果. 最近在学vue的时候又再一次经历了这样的困惑,虽然能够比较熟练的掌握vue的基本使用,也能
-
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
正文 前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue也确实挺火,各种入门博文眼花缭乱,博主也不敢说写得多好,就当是个学习笔记,有兴趣的可以看看. 一.MVVM大比拼 关于MVVM,原来在介绍knockout.js的时候有过讲解,目前市面上比较火的MVVM框架也是一抓一大把,比如常见的有Knockout.js.Vue.js.AvalonJS.An
-
vue,angular,avalon这三种MVVM框架优缺点
本文的主要内容是参考官方文档说明总结而来: Vue.js Vue.js @尤雨溪 老师写的一个用于创建 web 交互界面的库,是一个精简的 MVVM.从技术角度讲,Vue.js 专注于 MVVM 模型的 ViewModel 层.它通过双向数据绑定把 View 层和 Model 层连接了起来.实际的 DOM 封装和输出格式都被抽象为了Directives 和 Filters.Vue.js和其他库相比是一个小而美的库,作者的主要目的是通过一个尽量简单的 API 产生可反映的数据绑定和可组合的视图组件
-
vue中的mvvm模式讲解
学习了MVVM模式 起先还觉得有点难,后面与双向数据绑定链接起来还是很容易理解的. 那么什么是MVVM呢? 不明思议咋们肯定和我想的一样 每个单词的首写字母呗! 对没错就是它 Model-View-ViewModel. 可以实现我们的双向数据绑定 下面我来用我的理解解析下它们之间的关系: 哈哈 有点小尴尬哈 先来说下View与Model之间有联系吗? 在MVVM架构下,View 和 Model 之间其实并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel
-
又一款MVVM组件 Vue基础语法和常用指令（1）
前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue也确实挺火,各种入门博文眼花缭乱,博主也不敢说写得多好,就当是个学习笔记,有兴趣的可以看看. 一.MVVM大比拼 关于MVVM,原来在介绍knockout.js的时候有过讲解,目前市面上比较火的MVVM框架也是一抓一大把,比如常见的有Knockout.js.Vue.js.React.Angularj
-
Vue.js 和 MVVM 的注意事项
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 View Model 的双向数据绑定,这使得View Model的状态改变可以自动传递给 View,这就是所谓的数据双向绑定. Vue.js 是一个提供 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层.它的核心是 MVVM 中的 VM,也就是 ViewModel.ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻
-
Vue原理剖析 实现双向绑定MVVM
本文能帮你做什么? 1.了解vue的双向数据绑定原理以及核心代码模块 2.缓解好奇心的同时了解如何实现双向绑定 为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理.数据的循环依赖等,也难免存在一些问题,欢迎大家指正.不过这些并不会影响大家的阅读和理解,相信看完本文后对大家在阅读vue源码的时候会更有帮助< 本文所有相关代码均在github上面可找到 https://github.com/DMQ/mvvm 相信大家对mvvm双向绑定应该都不