上一篇写了实现 MVVM 框架的一些基本概念
本篇用代码来实现一个完整的 MVVM 框架
思考
假设有如下代码，data里面的name会和试图中的{{name}}——一一映射，修改data的值，会直接引起试图中对应数据的变化
<body>
<div id='app'>{{name}}</div>
<script>
function MVVM(){
//todo...
}
var vm = new MVVM({
el:'#app',
data:{
name:'zhangsan'
}
})
</script>
</body>
如何实现上述 MVVM 呢？
回想下这篇讲的观察者模式和数据监听：
- 主题（subject）是什么？
- 观察者（observer）是什么？
- 观察者何时订阅主题？
- 主题何时通知更新？
简单回答下：
上面例子中，主题应该是data的name属性，观察者是试图里的{{name}}，当一开始执行 MVVM 初始化（根据el解析模板发现{{name}}）的时候订阅主题，当data.name发生改变的时候，通知观察者更新内容，我们可以在一开始监控data.name，当用户修改data.name的时候调用主题的subject.ontify。
单向绑定
有如下 HTML
<div id="app">
<h1>{{name}}'is age is {{age}}</h1>
</div>
从上面 HTML 中我们看出，操作的节点是div#app，需要的数据是name和age，所以实例化 MVVM 可以需要传递两个参数element和data
let vm = MVVM({
element:'#app',
data:{
name:'zhangsan',
age:20
}
})
setInterval(function(){
vm.data.age++
},2000)
我们 MVVM 的构造函数应该怎么写呢？我们只需要做两件事情：
- 我们需要观察这些数据，当以后这些数据变动时，会做一些事情去调用
- 需要解析这个模板，把模板中的一些符号替换成对应的数据
初始化是必须做的，将实例化的数据存在自身上面，后面要用，这里就不叙述了。
class MVVM{
constructor(options){
init(options)
observe(this.data)
this.compile()
}
init(options){
this.element = document.querySelector(options.element)
this.data = options.data
}
}
先看compile这个方法，它就是在编译页面中的节点，如果节点里还有孩子，需要再去遍历这些孩子，如果遍历到文本，就进行下一步文本替换。
compile(){ //虽然这里可以直接对节点进行遍历，但最好还是分开来比较好点
this.traverse(this.el)
}
traverse(node){ //对节点进行遍历，如果遇到元素节点，用递归继续遍历直到遍历到都是文本为止，进行下一步页面渲染
node.childNodes.forEach(childNode=>{
if(childNode.nodeType === 1){
this.traverse(childNode)
}else if(childNode.nodeType === 3){
this.renderText(childNode)
}
})
}
renderText(textNode){ //到这一步，已经获取到页面中的文本了，用正则去匹配
let reg = /{{([^}]*)}}/g //正则或者可以写称/{{(.+?)}}/g
let match
while(match = reg.exec(textNode.textContent)){ //将匹配到的内容赋值给match，match是一个数组
let raw = match[0]
let key = match[1].trim()
textNode.textContent = textNode.textContent.replace(raw,this.data[key]) //页面渲染
new Observer(this,key,function(val,oldVal){
textNode.textContent = textNode.textContent.replace(oldVal,val)
}) //创建一个观察者
}
}
假设用户去修改数据时，那数据该如何进行实时的变动呢？
这里就引入了观察者和主题的概念，我们在解析的过程中创建一个个观察者，这个观察者就观察这个属性，解析到下个属性在创建一个观察者，并观察这个属性。
观察这个属性就是订阅这个主题，我们在this.compile()解析完后创建一个观察者，它有个方法，如果这个属性变动，我就会修改页面。
function observe(data){
if(!data || typeof data !== 'object')return
for(let key in data){
let val = data[key]
let subject = new Subject() //创建主题
if(typeof val === 'object'){
observe(val)
}
Object.defineProperty(data,key,{
configurable:true,
enumerable:true,
get(){
return val
},
set(newVal){
val = newVal
subject.notify()
}
})
}
}
问题是创建了观察者后什么时候去观察这个主题？
在创建后立刻观察这个主题，可是主题在哪？观察者有了，就是刚刚new的时候。主题是在observe遍历属性时创建的。主题存在在observe局部变量中，外面是访问不到的，那观察者怎样订阅这个主题呢？
思考到这里发现行不通了，就需要换种思路了。
当创建观察者时，会调用getValue()，它做什么事情呢，把我设置为场上权限最高的观察者，因为页面中有很多观察者，此时this.key，就是我要订阅的主题，当我调用this.vm.data[this.key]就等于调用了observe的get方法，因为刚刚我已经把观察者设置为场上权限最高者，此时currentObserver是存在的，这时观察者就开始订阅主题，订阅的之后在把权限去掉
let currentObserver = null
class Observer{
constructor(vm,key,cb){
this.subjects = {}
this.vm = vm
this.key = key
this.cb = cb
this.value = this.getValue()
}
getValue(){
currentObserver = this
let value = this.vm.data[this.key]
currentObserver = null
return value
}
}
通过currentObserver去订阅主题，因为在创建观察者时调用了getValue方法，把currentObserver设置为Observer，通过它去订阅主题
get:function(){
if(currentObserver){
currentObserver.subscribeTo(subject)
}
}
主题的构造函数
let id = 0
class Subject{
constructor(){
this.id = id++
this.observers = []
}
addObserver(observer){
this.observers.push(observer)
}
notify(){
this.observers.forEach(observer=>{
observer.update()
})
}
}
添加观察者
subscribeTo(subject){
if(!this.subjects[subject.id]){
subject.addObserver(this)
this.subjects[subject.id] = subject
}
}
更新页面数据，旧值通过自身属性获取，新值通过getValue方法获取
update(){
let oldVal = this.value
let value = this.getValue()
if(value !== oldVal){
this.value = value
this.cb.call(this.vm,value,oldVal)
}
}
最后贴上完整的单向绑定的代码
function observe(data){
if(!data || typeof data !== 'object')return
for(let key in data){
let val = data[key]
let subject = new Subject()
if(typeof val === 'object'){
observe(val)
}
Object.defineProperty(data,key,{
configurable:true,
enumerable:true,
get(){
if(currentObserver){
currentObserver.subscribeTo(subject)
}
return val
},
set(newVal){
val = newVal
subject.notify()
}
})
}
}
let id = 0
class Subject{
constructor(){
this.id = id++
this.observers = []
}
addObserver(observer){
this.observers.push(observer)
}
notify(){
this.observers.forEach(observer=>{
observer.update()
})
}
}
let currentObserver = null
class Observer{
constructor(vm,key,cb){
this.subjects = {}
this.vm = vm
this.key = key
this.cb = cb
this.value = this.getValue()
}
update(){
let oldVal = this.value
let value = this.getValue()
if(value !== oldVal){
this.value = value
this.cb.call(this.vm,value,oldVal)
}
}
subscribeTo(subject){
if(!this.subjects[subject.id]){
subject.addObserver(this)
this.subjects[subject.id] = subject
}
}
getValue(){
currentObserver = this
let value = this.vm.data[this.key]
currentObserver = null
return value
}
}
class mvvm{
constructor(options){
this.init(options)
observe(this.data)
this.compile()
}
init(options){
this.el = document.querySelector(options.el)
this.data = options.data
}
compile(){
this.traverse(this.el)
}
traverse(node){
node.childNodes.forEach(childNode=>{
if(childNode.nodeType === 1){
this.traverse(childNode)
}else if(childNode.nodeType === 3){
this.renderText(childNode)
}
})
}
renderText(textNode){
let reg = /{{([^}]*)}}/g
let match
while(match = reg.exec(textNode.textContent)){
let raw = match[0]
let key = match[1].trim()
textNode.textContent = textNode.textContent.replace(raw,this.data[key])
new Observer(this,key,function(val,oldVal){
textNode.textContent = textNode.textContent.replace(oldVal,val)
})
}
}
}
let vm = new mvvm({
el:'#app',
data:{
name:'uccs',
age:20
}
})
setInterval(function(){
vm.data.age++
},2000)
本篇详细讲述了 MVVM 单项绑定的原理，下一篇讲述双向绑定
用原生 JS 实现 MVVM 框架MVVM 框架系列：
用原生 JS 实现 MVVM 框架1——观察者模式和数据监控
网友评论