在掘金上看到了Vue双向绑定的简易实现，由于之前个人看的迷迷糊糊，特地抽出时间完全理解，于是有了这个注释版代码，全都是个人理解，有不当之处可以发出来提醒我改正，觉得好的话也可以评论鼓励。
HTML
<!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>Document</title>
</head>
<body>
<div id='app'>
<input type="text" id="test">
<span>{{testVal}}</span>
</div>
<script src='./vue.js'></script>
</body>
</html>
JS代码
// 观察者生成器
class Observer {
constructor(data) {
// 对传入的数据进行存储
this.data = data;
// 对数据中的属性进行遍历
Object.keys(data).forEach(key => {
// 获取当前key对应的值
let value = data[key];
// 对要被观察的key对应的value创建一个订阅者合集
let dep = new Dep();
// 对每个属性都进行一次“劫持”或者“代理”
Object.defineProperty(data, key, {
get() {
// 当有订阅者使用该属性的时候，那么订阅者合集中则添加该订阅者
Dep.target && dep.add(Dep.target);
return value;
},
set(newVal) {
if (newVal !== value) {
value = newVal;
//当数据更新时，通知当前属性订阅者合集中的所有订阅者
dep.notify(newVal);
}
}
});
});
}
}
// 订阅者生成器
class Watcher {
constructor(data, key, cb) {
// 初始化订阅者初始数据
this.data = data;
// 初始化订阅者回调函数
this.cb = cb;
// 初始化订阅者key
this.key = key;
// 在新建一个订阅者时，默认订阅者合集生成器的作用主体为当前订阅者
// 更深层次理解为，所有待双向绑定的数据都需要依次进行绑定，订阅者合集生成器的作用主体就是Dep.target
// 在创建订阅者的时候当前订阅者就是主体，作用完毕后则订阅者合集生成器的作用主体Dep.target置空为null
Dep.target = this;
// 该赋值属性隐含了前面观察者生成器Observer中已经“劫持”的get函数，通过对该data某一键对应的值的读取
// 触发了其get函数，而get函数已经在观察者生成器中被“劫持”，订阅者生成器正在新建一个订阅者，那么订阅者合集生成器的作用主体就是当前订阅者
// 满足Dep.target && dep.add(Dep.target);那么当前属性对应的订阅者合集中就添加了当前订阅者，至此数据与订阅者完成绑定
this.value = data[key];
// 绑定完成，订阅者合集生成器的作用主体置空null
Dep.target = null;
}
update(newVal) {
let oldVal = this.value;
if (newVal !== oldVal) {
this.value = newVal;
// 当数据更新时，通知订阅者的回调函数，通知订阅者数据更新
this.cb(newVal, oldVal);
}
}
}
// 订阅者合集生成器
class Dep {
constructor() {
// 初始化订阅者合集，初始化时暂未有订阅者，所以空数组
this.subs = [];
}
add(sub) {
// 订阅者合集数组中添加订阅者 ps:此处是否应该去重存疑
this.subs.push(sub);
}
notify(newVal) {
// 当前订阅者合集对应的数据（特定键对应的数据）更新的时候，调用当前订阅者合集中所有订阅者的update函数
this.subs.forEach(sub => {
sub.update(newVal);
});
}
}
// 这里是出于方便考虑，直接将订阅者合集生成器的作用主题默认绑定在订阅者合集生成器上，其实等价于定义一个全局变量DepTarget
Dep.target = null;
// 片段解析器
class Compile {
constructor(vm) {
// 对数据模型进行绑定
this.vm = vm;
// 查找容器元素
let el = document.querySelector(this.vm.$el);
// 创建一个空白文档片段作为父容器
let fragment = document.createDocumentFragment();
if (el) {
// 如果元素存在则放入空白文档片段中等待编译
while (el.firstChild) {
fragment.appendChild(el.firstChild);
}
// 编译片段
this.compileElement(fragment);
//将编译好的模板挂在在容器上
el.appendChild(fragment);
} else {
console.log('挂载元素不存在！');
}
}
compileElement(el) {
for (let node of el.childNodes) {
/*
node.nodeType
1:元素节点
3:文本节点
*/
if (node.nodeType === 1) {
for (let attr of node.attributes) {
let {
name: attrName, // ES6的赋值方法，提取属性名和属性值
value: exp
} = attr;
// v- 代表存在指令
if (attrName.indexOf('v-') === 0) {
/*
<div v-xxx=""> 元素上，可以用很多指令，这里仅做学习，所以不判断太多了
on 事件绑定
model 表单绑定
*/
let [dir, value] = attrName.substring(2).split(':');
if (dir === 'on') {
// 取 vm.methods 相应的方法，进行绑定
let fn = this.vm.$methods[exp];
fn && node.addEventListener(value, fn.bind(this.vm), false);
} else if (dir === 'model') {
// 取 vm.data 进行 input 的赋值，并且在 input 的时候更新 vm.data 上的值
let value = this.vm.$data[exp];
node.value = typeof value === 'undefined' ? '' : value;
// 绑定元素数据与数据模型上的数据
node.addEventListener('input', e => {
if (e.target.value !== value) {
this.vm.$data[exp] = e.target.value;
}
});
// 生成一个对于某个key相关联的观察者
// 对数据模型上的数据进行观察，回调函数就是将元素的value和数据模型上的value进行同步更新
new Watcher(this.vm.$data, exp, newVal => {
node.value = typeof newVal === 'undefined' ? '' : newVal;
});
}
}
}
} else if (node.nodeType === 3) {
let reg = /\{\{(.*)\}\}/;
if (reg.test(node.textContent)) {
// 这里文本里也许会有多个 {{}} ，{{}} 内或许会有表达式，这里简单处理，就取一个值
let exp = reg.exec(node.textContent)[1].trim();
let value = this.vm.$data[exp];
node.textContent = typeof value === 'undefined' ? '' : value;
// 生成一个观察者，对data上的exp进行订阅，当vm.$data[exp]更新时，则会同步更新文本节点的内容
new Watcher(this.vm.$data, exp, newVal => {
node.textContent = typeof newVal === 'undefined' ? '' : newVal;
});
}
}
// 递归编译模板
if (node.childNodes && node.childNodes.length) {
this.compileElement(node);
}
}
}
}
class MyVue {
constructor({
// 初始化Vue的容器，数据和方法，可以自行添加钩子函数
el,
data,
methods
}) {
// 这里相当于init，对Vue模型进行数据绑定
let obs = new Observer(data);
this.$el = el;
this.$data = obs.data;
this.$methods = methods;
// 对数据进行隔离，防止用户直接操作数据，目的在于用户直接更新数据可能造成无法渲染页面等一系列问题
Object.keys(this.$data).forEach(i => {
this.proxyKeys(i);
});
new Compile(this);
}
proxyKeys(key) {
let _this = this;
Object.defineProperty(_this, key, {
enumerable: false,
configurable: true,
get() {
return _this.$data[key];
},
set(newVal) {
_this.$data[key] = newVal;
}
});
}
}
let app = new MyVue({
el: '#app',
data: {
test: 123,
testVal:'测试数据'
},
methods: {
test() {
console.log('test function');
}
}
})
/*作者：卡布奇诺_Me
链接：https://juejin.im/post/5d15cf9ef265da1bbc6fe901
来源：掘金
*/
网友评论