<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id='app'>
<input style="width: 200px;height: 38px;outline: none;display: inline-block;" type='text' v-model='text' />{{text}}
<input style="width: 200px;height: 38px;outline: none;display: inline-block;" type='text' v-model='name' />{{name}}
<div style="width: 200px;height: 40px;background: red;" v-if='show'></div>
</div>
<script>
function Vue(options){
this.data=options.data;
var id=options.el;
var data=this.data;
this.observe(data,this)
var dom=this.tofagerment(document.getElementById(id),this);
var pardom=document.getElementById(id).appendChild(dom)
}
Vue.prototype.tofagerment=function(node,vm){
var flag=document.createDocumentFragment();
var child="";
while(child = node.firstChild){
this.compile(child,vm)
flag.append(child);
}
return flag
}
Vue.prototype.compile=function(child,vm){
var name=""
if(child.nodeType==1){
if(child.hasAttribute('v-model')){
name=child.getAttribute('v-model');
child.addEventListener('input',function(e){
var e=e||window.event;
var target=e.target||e.srcElement;
vm[name]=target.value;
})
child.value=vm[name];
child.removeAttribute('v-model')
}
}else if(child.nodeType==3){
var reg=/\{\{(.*)\}\}/;
if(reg.test(child.nodeValue)){
var regname=reg.exec(child.nodeValue)[1];
regname=regname.trim();
child.nodeValue=vm[regname]
}
new Watcher(vm,child,regname)
};
}
//订阅
Vue.prototype.observe=function(obj,vm){
Object.keys(obj).forEach(function(key){
console.log(obj[key])
vm.defineReactive(vm,key,obj[key])
})
}
// 消费
Vue.prototype.defineReactive=function(obj, key , value){
var dep=new Dep()
Object.defineProperty(obj,key,{
get:function(){
console.log('获取值');
if(Dep.target){
console.log(32423423)
dep.addSub(Dep.target)
}
return value
},
set:function(newValue){
console.log('设置值'+newValue);
if(newValue==value)return ;
value=newValue;
dep.notify()
}
})
}
//观察者模式
function Watcher(vm,node,name){
Dep.target=this
this.vm=vm;
this.node=node;
this.name=name;
this.update();
Dep.target=null
}
Watcher.prototype.get=function(){
this.value=this.vm[this.name]
}
Watcher.prototype.update=function(){
this.get()
this.node.nodeValue=this.value
}
//发布者
function Dep(){
this.subs=[];//订阅客户
}
Dep.prototype.addSub=function(sub){
this.subs.push(sub)
}
Dep.prototype.notify=function(sub){
this.subs.forEach(function(item){
item.update()
})
}
var myvue=new Vue({
el:"app",
data:{
text:'1312323123',
name:"eqwewqeqeq",
show:false,
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号