MVVM实现类似Vue的基本功能

html文件中引入自定义的MVVM.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="school.name" />
			{{school.name}}
			<div>{{school.name}}</div>
			<div>{{school.age}}</div>
			<div v-html="message"></div>
			
			<ul>
				<li>1</li>
				<li>2</li>
			</ul>
			{{getMyLove}}
			<button v-on:click="change">+</button>
		</div>
		<script src="./自定义mvvm.js"></script>
		<script>
			let vm=new Vue({
				el:"#app",
				data:{
					school:{
						name: "宋杨",
						age:22
					},
					message:"<h1>大家好</h1>"
				},
				computed:{
					getMyLove(){
						return this.school.name+"喜欢琳琳";
					}
				},
				methods:{
					change(){
						this.school.age=this.school.age+1;
						//为什么这样写不行 this.school.age=this.school.age++;
					}
				}
			})
		</script>
	</body>
</html>

我们需要先定义几个关键的类:

Vue:整个框架的入口。
Observer:把$data数据全部转化成Object.defineProperty()来定义。数据劫持。
Watcher:观察者,每个使用到数据的地方都要创建观察者,并且绑定到对应的被观察者身上,该过程就是订 阅。
Dep:是一个包含发布和订阅的功能,data里面的每个数据都需要有一个Dep实例。
Compiler:用来编译模版的,简单实现了虚拟DOM的功能。

2.简述一下大致的流程。
首先,进入的是vue实例,在里面获取对应的el、data、computed、method等数据。先把data的数据全部转化成Object.defineProperty()定义。然后把computed、method这些方法添加代理,例如,用this.XXX就能指代this.computed.XXX()。再把数据获取操作vm.$data上的取值操作 都代理到 vm上。最后就可以创建Compiler实例编译模版了。
注意:代理操作其实是更方便新手入门,更简单的操作数据。
Observer类里面会将data对象里面的属性全部用Object.defineProperty()定义,若属性也是对象,就把该属性里面的子属性也重定义,使用了递归的思想。同时,在每一个的get方法里面都有订阅观察者的功能,在每一个set方法里面都有发布功能。
Dep就是在Observer类中使用订阅和发布功能时候需要调用的类。
Compiler模版编译中,先获取到对应的根节点,用document。createDocumentFragment()创建文档碎片,将根结点的child都用append移动到文档碎片中。这样的话就相当于是虚拟Dom,最后使用的时候把该文档碎片塞回到页面中。
同时分别对元素和文本编译,获取到对应的指令或{{}},对v-model和{{}}都要添加观察者,并且把对应的值传到页面中。

MVVM.js

class Compiler {
	constructor(el, vm) {
		// 判断el是字符串还是元素。如果是字符串,通过字符串获取相应元素
		this.el = this.isElementNode(el) ? el : document.querySelector(el);

		// 把当前节点中的元素 获取到 放到内存储中
		this.vm = vm;
		let fragment = this.createFragment(this.el);

		// 把节点中的内容替换
		// 用数据编译模版
		this.compiler(fragment);

		// 把内容塞到页面中

		this.el.appendChild(fragment);

	}
	isDirective(attrName) { //判断是不是指令
		return attrName.startsWith('v-');
	}
	compilerElement(node) { //编译元素
		let attributes = node.attributes;
		[...attributes].forEach(attr => {
			let {name,value:expr} = attr;
			if (this.isDirective(name)) {
				let [,directive]=name.split('-');
				
				let [directiveName,eventName]=directive.split(':');
				
				//需要调用不同的指令来处理
				CompilerUtil[directiveName](node,expr,this.vm,eventName);
			}
		})
	}
	compilerText(node) { //编译文本,判断文本中是否有{{}}
		let content = node.textContent;
		if(/\{\{(.+?)\}\}/.test(content)){
			//文本节点
			CompilerUtil['text'](node,content,this.vm);//{{a}} {{b}}
		}
	}
	//核心编译方法
	compiler(node) { //编译内存中dom
		let childNodes = node.childNodes;

		[...childNodes].forEach(child => {
			if (this.isElementNode(child)) {
				this.compilerElement(child);
				//如果是元素的话 需要把自己传进去 再去遍历子节点
				this.compiler(child);

			} else {
				this.compilerText(child);
			}
		})

	}

	createFragment(node) { //把节点移动到内存中
		// 创建文档碎片
		let fragment = document.createDocumentFragment();
		let firstChild;
		while (firstChild = node.firstChild) {
			// appendChild()具有移动性
			fragment.appendChild(firstChild);
		}
		return fragment;
	}
	isElementNode(node) { //判断是否为元素节点
		return node.nodeType === 1;
	}

}
CompilerUtil={
	getValue(vm,expr){
		
			return expr.split('.').reduce((data,current)=>{
				return data[current];
			},vm.$data)
		
	},
	setValue(vm,expr,value){
		expr.split('.').reduce((data,current,index,arr)=>{
			if(index==arr.length-1){
				return data[current]=value;
			}
			return data[current];
		},vm.$data)
	},
	on(node,expr,vm,eventName){
		node.addEventListener(eventName,(e)=>{
			vm[expr].call(vm,e);
		});
	},
	model(node,expr,vm){
		let fn=this.updater['modeUpdater'];
		
		new Watcher(vm,expr,(newValue)=>{//添加观察者
			fn(node,newValue);
		});
		node.addEventListener('input',(e)=>{
			let value=e.target.value;
			this.setValue(vm,expr,value);
		});
		let value=this.getValue(vm,expr);
		fn(node,value)
	},
	html(node,expr,vm){
		let fn=this.updater['htmlUpdater'];
		
		new Watcher(vm,expr,(newValue)=>{//添加观察者
			fn(node,newValue);
		});
		let value=this.getValue(vm,expr);
		fn(node,value)
	},
	getContentValue(vm,expr){
		return expr.replace(/\{\{(.+?)\}\}/g,(...args)=>{
			return this.getValue(vm,args[1]);
		});
	},
	text(node,expr,vm){
		let fn=this.updater['textUpdater'];
		let content=expr.replace(/\{\{(.+?)\}\}/g,(...args)=>{
			new Watcher(vm,args[1],()=>{//添加观察者
				fn(node,this.getContentValue(vm,expr));//返回一个全的字符串
			}); 
			return this.getValue(vm,args[1]);
			
		});
		fn(node,content);
		
	},
	updater:{
		modeUpdater(node,value){
			node.value=value;
		},
		htmlUpdater(node,value){
			node.innerHTML=value;
		},
		textUpdater(node,value){
			node.textContent=value;
		}
	}
}


//观察者 (发布订阅) 观察者(多) 被观察者(一)
class Dep {
	constructor() {
		this.subs=[];//存放所有的watcher
	}
	//订阅
	addSub(watcher){//添加watcher方法
		this.subs.push(watcher);
	}
	
	//发布
	notify(){
		this.subs.forEach(watcher=>watcher.updata());
	}
}

// vm.$watch(vm,'school.name',(newValue)=>{})
class Watcher{
	constructor(vm,expr,cb){
		this.vm=vm;
		this.expr=expr;
		this.cb=cb;
		this.oldValue=this.get();
	}
	get(){
		//取数据之前吧当前的观察者放到Dep.target里面
		Dep.target=this;
		//由于getValue()会触发Object.defineProperty的get方法,在get里面会将此watcher添加到所属的Dep实例里面。
		let value=CompilerUtil.getValue(this.vm,this.expr);
		//取完数据之后必须赋空,否则后面其他地方会无法更新Dep.target的值,意味着后面的订阅都会出错。
		Dep.target=null;
		return value;
	}
	updata(){
		let newValue =CompilerUtil.getValue(this.vm,this.expr);
		if(newValue != this.oldValue){
			this.cb(newValue);
		}
	}
}

class Observer{
	constructor(data) {
	    this.observer(data);
	}
	// 实现数据劫持功能
	observer(data){
		//如果是对象才观察
		if(data && typeof data == 'object'){
			//如果是对象
			for(let key in data){
				this.defineReactive(data,key,data[key]);
			}
		}
	}
	defineReactive(obj,key,value){
		this.observer(value);
		let dep =new Dep();//给每一个属性都加上具有发布和订阅的功能
		Object.defineProperty(obj,key,{
			get(){
				
				Dep.target && dep.addSub(Dep.target);
				return value;
			},
			set:(newValue)=>{
				if(value != newValue){
					// 赋的新值,需要把它再监控下
					this.observer(newValue);
					value=newValue;
					dep.notify();
				}
				
			}
		});
	}
}

class Vue {
	constructor(options) {
		this.$el = options.el;
		this.$data = options.data;
		let computed=options.computed;
		let methods=options.methods;
		
		//根结点存在,编译模版
		if (this.$el) {
			// 把数据全部转化成Object。defineProperty()来定义
			new Observer(this.$data);
			
			for(let key in computed){
				Object.defineProperty(this.$data,key,{
					get:()=>{
						return computed[key].call(this)
					}
				});
			}
			
			for(let key in methods){
				Object.defineProperty(this,key,{
					get(){
						return methods[key];
					}
				});
			}
			
			// 把数据获取操作 vm上的取值操作 都代理到vm.$data
			this.proxyVm(this.$data);
			
			new Compiler(this.$el, this);
		}
	}
	proxyVm(data){
		for(let key in data){
			Object.defineProperty(this,key,{
				get(){
					return data[key]; //进行转化
				},
				set(newValue){
					data[key]=newValue;
				}
			});
		}
	}

}


上一篇:expr命令


下一篇:keil lib 库引起的报错