<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义MVVM框架,这是比较牛逼的v-text，v-model和数据绑定原理介绍</title>
</head>
<body>
<div id="app">
<p v-text="message"></p>
<input type="text" v-model="message"/>
<p>{{message}}</p>
</div>
<script src="observer.js"></script>
<script src="TemepCompiler.js"></script>
<script src="watcher.js"></script>
<script src="mvvm.js"></script>
<script>
var vm = new MVVM({
el: "#app", //挂载视图
data: {
msg:'这是自己写的mvvm框架',
message:'mvvm出来吧'
} //定义数据
})
</script>
</body>
</html>
//创建一个MVVM框架类
class MVVM { //类构造器（创造实例模板代码）
constructor(options) { //相当于函数的参数 {el:...,data:...}
//缓存重要属性
this.$vm = this;
this.$el = options.el;
this.$data = options.data;
//判断视图是否存在
if(this.$el) {
//添加属性观察对象（实现属性挟持）
new Observer(this.$data);
//创建模板编译器，来解析视图
this.$compiler = new TemepCompiler(this.$el, this.$vm);
}
}
}
class TemepCompiler { //类构造器（创造实例模板代码）
constructor(el, vm) { //相当于函数的参数 (this.$el,this.$vm)
//缓存重要属性
this.vm = vm;
this.el = this.isElemetNode(el) ? el : document.querySelector(el);
//判断视图是否存在
if(this.el) {
//1.把模板内容放入内存(片段)
var fragment = this.node2fragment(this.el);
//2.解析模板
this.compile(fragment);
//3.把内存的结果返回页面
this.el.appendChild(fragment);
}
}
//工具方法
isElemetNode(node) {
return node.nodeType === 1 //1.元素节点 2.属性节点 3.文本节点
}
isTextNode(node) {
return node.nodeType === 3 //1.元素节点 2.属性节点 3.文本节点
}
toArray(arr) {
return [].slice.call(arr); //假数组转为数组；
}
isDerective(attrName) {
return attrName.indexOf("v-") >= 0; //判断属性名中是否有v-开头的属性
}
//核心方法(节省内存)把模板放入内存，等待解析
node2fragment(node) {
//创建内存片段
var fragment = document.createDocumentFragment(),
child;
//模板内容丢到内存
while(child = node.firstChild) {
fragment.appendChild(child);
}
//返回
return fragment;
}
compile(parentNode) {
//获取子节点
var childNodes = parentNode.childNodes, //类数组
compiler = this;
//遍历每一个节点
this.toArray(childNodes).forEach((node) => {
//判断节点类型
if(compiler.isElemetNode(node)) {
//1.属性节点（解析指令）
compiler.compileElement(node);
} else {
//2.文本节点（解析指令）
var textReg = /\{\{(.+)\}\}/; //（\转义）文本表达式验证规则
var expr = node.textContent;
//var expr = node.innerText; //谷歌支持
//按照规则验证内容
if(textReg.test(expr)) {
expr = RegExp.$1 //缓存最近一次的正则里面的值;
//调用方法编译
compiler.compileText(node, expr); //如果还有子节点，继续解析；
}
}
});
}
//解析元素节点的指令的方法
compileElement(node) {
//获取当前元素节点的所有属性
var arrs = node.attributes;
self = this;
//遍历当前元素所有属性
this.toArray(arrs).forEach(attr => {
var attrName = attr.name;
//判断属性是否是指令
if(self.isDerective(attrName)) {
var type = attrName.substr(2); //v-text,v-model...
var expr = attr.value; //指令的值就是表达式
//找帮手
CompilerUntils[type](node, self.vm, expr);
}
})
}
//解析表达式的方法
compileText(node, expr) {
CompilerUntils.text(node, this.vm, expr);
}
}
//解析指令帮手
CompilerUntils = {
//解析text指令
text(node, vm, expr) {
//第一次观察
//1.找到更新规则对象的更新方法
var updaterFn = this.updater["textUpdater"];
//2.执行方法
updaterFn && updaterFn(node, vm.$data[expr]) //等价if(updaterFn){updaterFn(node,vm.$data[expr])}
//第n+1次观察
new Watcher(vm, expr, (newVaule) => {
//触发订阅时按之前的规则对节点进行更新;v-model的也一样；
updaterFn && updaterFn(node, newVaule);
})
},
//解析model指令
model(node, vm, expr) {
//1.找到更新规则对象的更新方法
var updaterFn = this.updater["modelUpdater"];
//2.执行方法
updaterFn && updaterFn(node, vm.$data[expr]) //等价if(updaterFn){updaterFn(node,vm.$data[expr])}
//第n+1次观察
new Watcher(vm, expr, (newVaule) => {
//触发订阅时按之前的规则对节点进行更新;v-model的也一样；
updaterFn && updaterFn(node, newVaule);
})
//视图到模型变化
node.addEventListener("input", (e) => {
var newValue = e.target.value;
//把值放进数据
console.log(newValue+'新值');
vm.$data[expr] = newValue;
})
},
updater: {
//文本更新方法
textUpdater(node, value) {
node.textContent;
//node.innerText; //谷歌支持
},
//输入框值更新方法
modelUpdater(node, value) {
node.value = value;
}
}
}
class Observer {
//构造函数
constructor(data) {
//提供一个解析方法，完成属性的分析，和挟持
this.observe(data);
}
observe(data) {
//判断数据的有效性 必须是对象
if(!data || typeof data !== "object") {
return;
}
var keys = Object.keys(data); //拿到所有的属性（key)转为数组
keys.forEach((key) => {
//重新定义key
this.defineReactive(data, key, data[key]); //动态属性需要中括号不能.
})
}
//针对当前对象属性的重新定义（挟持）
defineReactive(obj, key, val) {
var dep = new Dep();
//重新定义
Object.defineProperty(obj, key, {
enumerable: true, //是否可以遍历
configurable: false, //是否可以重新配置
get() { //getter取值
Dep.target && dep.addSub(Dep.target); //拿到订阅者
//返回属性
return val;
},
set(newValue) { //setter修改值
val = newValue; //新值覆盖旧值
dep.notify(); //通知，触发update操作；
}
})
}
}
//创建发布者
//1.管理订阅者
//2.通知
class Dep {
constructor() {
this.subs = [];
}
//添加订阅
addSub(sub) { //其实就是Watcher实例
this.subs.push(sub);
}
//集体通知
notify() {
this.subs.forEach((sub) => {
sub.update();
})
}
}
//定义一个订阅者
class Watcher {
//构造函数
//1.需要使用订阅功能的节点
//2.全局vm对象，用于获取数据
//3.需要使用订阅功能的节点
constructor(vm, expr, cb) {
//缓存重要属性
this.vm = vm;
this.expr = expr;
this.cb = cb;
//缓存当前值
this.value = this.get();
}
//获取当前值
get() {
//把当前订阅者添加到全局
Dep.target = this; //watcher实例
//获取当前值
var value = this.vm.$data[this.expr];
//清空全局
Dep.target = null;
//返回
return value;
}
//提供一个更新
update() {
//获取新值
var newValue = this.vm.$data[this.expr];
//获取老值
var oldValue = this.value;
//执行回调
if(newValue !== oldValue) {
this.cb(newValue); //效果一样关键需不需要改变this指向this.cb.call(this.vm,newValue)
}
}
}