这是我学习的时候找到的最小化 MVVM 的源码
我把我理解的都标注在代码中,共同监督,共同进步,有错的地方,提醒我一下哈!
class Vue{
constructor(opt){
this.opt = opt
this.observe(opt.data)
let root = document.querySelector(opt.el)
this.compile(root)
}
// 为响应式对象 data 里的每一个 key 绑定一个观察者对象
observe(data){
Object.keys(data).forEach(key => {
let obv = new Observer()
if(typeof data[key]=='Object') observe(data[key]);//判断是否是引用值,是则递归遍历 observe(data)
data["_"+key] = data[key]
// 通过 getter setter 暴露 for 循环中作用域下的 obv,闭包产生
Object.defineProperty(data, key, {
get(){
Observer.target && obv.addSubNode(Observer.target);//在获取该属性值的时候,若Object.target有值的时候,则将该节点加到key的obv的subNode数组中,代表这个节点使用了该属性值
return data['_'+key]
},
set(newVal){
obv.update(newVal)//将使用该key的节点都遍历一遍,并赋予新的值
data['_'+key] = newVal
}
})
})
}
// 初始化页面,遍历 DOM,收集每一个key变化时,随之调整的位置,以观察者方法存放起来
compile(node){
[].forEach.call(node.childNodes, child =>{
if(!child.firstElementChild && /\{\{(.*)\}\}/.test(child.innerHTML)){//找到子节点是文本节点的节点
let key = RegExp.$1.trim();
child.innerHTML = child.innerHTML.replace(new RegExp('\\{\\{\\s*'+ key +'\\s*\\}\\}', 'gm'),this.opt.data[key]) ;
Observer.target = child;//将使用key的节点添加到Observer.target
this.opt.data[key]; //这时候跳到属性选择符的getter,将该节点添加到使用key的数组中
Observer.target = null;//恢复
}
else if (child.firstElementChild) //子节点不是文本节点
this.compile(child);//进入下一层
})
}
}
// 常规观察者类(每一个属性都自己的观察者,负责收集使用该属性的元素节点,并身具添加节点和更新节点值的方法,观察者订阅了某个属性值,当属性值发生变化,观察者执行update(newVal))
class Observer{
constructor(){
this.subNode = [] //用于存储使用某个属性值的节点
}
addSubNode(node){
this.subNode.push(node)
}
update(newVal){
this.subNode.forEach(node=>{
node.innerHTML = newVal
})
}
}
以上MVVM代码思路 :
-
[observe 函数]:首先我们会对需要响应式的 data 对象进行 for 循环遍历,为 data 的每一个 key 映射一个观察者对象
- 在 ES6 中,for 循环每次执行,都可以形成闭包,因此这个观察者对象就存放在闭包中
- 闭包形成的本质是 内层作用域中堆地址暴露,这里我们巧妙的用 getter/setter 函数暴露了 for 循环里的观察者
-
[compile 函数]:我们从根节点向下遍历 DOM,遇到 mustache 形式的文本,则映射成 data.key 对应的值,同时记录到观察者中
- 当遍历到 {{xxx}} 形式的文本,我们正则匹配出其中的变量,将它替换成 data 中的值
- 为了满足后续响应式的更新,将该节点存储在 key 对应的观察者对象中,我们用 getter 函数巧妙的操作了闭包
-
在页面初次渲染之后,后续的 eventLoop 中,如果修改了 key 的值,实际会通过 setter 触发观察者的 update 函数,完成响应式更新