前端开发双绑数据

双绑数据
html：

JS：

class vue extends EventTarget{
	constructor(option){
		super();
		this.option = option;
		this._data = this.option.data;
		this.el = document.querySelector(this.option.el);
		this.observe(this._data);
		this.compileNode(this.el);
	}

	observe(data){
		let _this = this; // 给_this赋值===this，否则this的指向不是dispatchEvent 而是Proxy
		this._data = new Proxy(data,{
			set(target,prop,newValue){
				console.log(newValue);
				let event = new CustomEvent(prop,{
					detail:newValue
				});
				_this.dispatchEvent(event);
				return Reflect.set(...arguments);
			}
		});
	}

	compileNode(el){
		let child = el.childNodes;
		[...child].forEach(node=>{
			if(node.nodeType === 3){
				//console.log('这是一个文本节点');
				let text = node.textContent;
				let reg = /\{\{\s*([^\s\{\}]+)\s*\}\}/g;
				if (reg.test(text)) {
					let $1 = RegExp.$1;
					this._data[$1]&&(node.textContent = text.replace(reg,this._data[$1]));
					this. addEventListener($1,e=>{
						node.textContent = text.replace(reg,e.detail)
					});
				}
			}else if(node.nodeType === 1){
				let attr = node.attributes;
				if (attr.hasOwnProperty('v-model')){
					let keyName = attr['v-model'].nodeValue;
					node.value = this._data[keyName];
					node.addEventListener('input',e=>{
						this._data[keyName] = node.value;
					})
				}
				this.compileNode(node);
			}	
		})
	}
}

本人JavaScript萌新有大佬看到欢迎指导~~蟹蟹