<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" value="" v-model="user.name"/>
{{user.name}}哈哈{{user.sex}}
<select v-model="selected">
<option value="">请选择学校</option>
<option value="a">学校A</option>
<option value="b">学校B</option>
</select>
<div>
<div style="display: inline-block;">性别</div>
<div>
<label for="man">男：</label>
<input id="man" type="radio" v-model="user.sex" value="man" name="sex">
<label for="woman">女：</label>
<input id="woman" type="radio" v-model="user.sex" value="woman" name="sex">
</div>
</div>
</div>
<script src="vm.js"></script>
<script>
let vm = new Vue({
el:'#app'
,data:{
user:{
name:'杨文宇'
,sex:'man'
}
,selected:'a'
}
})
</script>
</body>
</html>
class Vue{
constructor(options){
this.$el = Vue.utils.getEl(options.el);
this.$data = options.data;
new Observe(this,this.$data);
new Compile(this,this.$el);
}
static utils = {
getEl(selector){
return selector.nodeType == Node.ELEMENT_NODE ? selector : document.querySelector(selector)
}
,isDirect(attrName){
return /^v-/.test(attrName)
}
,isTxtTpl(node){
return node.nodeType == Node.TEXT_NODE && /^\s*\{\{.*\}\}\s*$/.test(node.textContent)
}
,getVal(data,expOrFn){
return expOrFn.split(".").reduce((data,cur)=>{
return data[cur];
},data);
}
,setVal(data,expOrFn,value){
expOrFn.split(".").reduce((data,cur,index,arr)=>{
if(index == arr.length-1){
return data[cur] = value;
}
return data[cur];
},data);
}
}
}
//劫持类
class Observe{
constructor(vm,data){
this.observer(data);
//创建代理
this.dataProxy(vm,data);
}
//对数据进行劫持
observer(data){
Object.keys(data).forEach(key=>{
this.reactive(data,key,data[key])
})
}
//响应式函数
reactive(obj,key,value){
typeof value == 'object' && this.observer(value)
let _self = this
//为每一个属性创建依赖容器，因为有可能一个属性会被多个地方依赖
, dep = new Dep();
Object.defineProperty(obj,key,{
get(){
//添加订阅者
dep.depend();
return value;
}
,set(newVal){
if(value == newVal){return}
typeof newVal == 'object' && _self.observer(newVal);
value = newVal;
dep.notify();
}
})
}
dataProxy(obj,data){
Object.keys(data).forEach(key=>{
//let value = data[key];
typeof value == 'object' && this.dataProxy(obj,value)
Object.defineProperty(obj,key,{
get(){
return data[key]
}
,set(newVal){
data[key] = newVal;
}
})
})
}
}
class Compile{
constructor(vm,el){
this.el = el;
this.vm = vm;
this.ready();
}
static tagAttrEvent = {
text:['value','input']
,textarea:['value','input']
,checkbox:['checked','change']
,radio:['checked','change']
,'select-one':['value','change']
,'select-multiple':['value','change']
}
//指令集
static directSet = {
model(vm,node,expOrFn){
let tag = Compile.tagAttrEvent[node.type];
new Watcher(vm,expOrFn,newVal=>{
node[tag[0]] = newVal;
});
node[tag[0]] = Vue.utils.getVal(vm.$data,expOrFn);
node.addEventListener(tag[1],e=>{
Vue.utils.setVal(vm.$data,expOrFn,e.target[tag[0]])
})
}
,text(vm,node,expOrFn){
let content = expOrFn.replace(/\{\{(.+?)\}\}/g,(...arg)=>{
new Watcher(vm,arg[1],newVal=>{
node.textContent = this.getContentVal(vm,expOrFn);
})
return Vue.utils.getVal(vm.$data,arg[1])
})
node.textContent = content;
}
,getContentVal(vm,expOrFn){
return expOrFn.replace(/\{\{(.+?)\}\}/g,(...arg)=>{
let value = Vue.utils.getVal(vm.$data,arg[1])
return typeof value == 'object'? JSON.stringify(value) : value;
})
}
}
ready(){
let fragment = this.node2fragment(this.el)
this.compiler(fragment);
this.el.appendChild(fragment);
}
//编译
compiler(mountEl){
let childNodes = [...mountEl.childNodes];
childNodes.forEach(node=>{
//获取不是文本节点或不是空文本的节点
if(node.nodeType == Node.ELEMENT_NODE){
[...node.attributes].forEach(attr=>{
let {name,value:expOrFn} = attr;
if(!Vue.utils.isDirect(name)){return}
Compile.directSet[name.split('-')[1]](this.vm,node,expOrFn)
})
}
if(Vue.utils.isTxtTpl(node)){
Compile.directSet['text'](this.vm,node,node.textContent)
}
node.childNodes.length > 0 && this.compiler(node)
})
}
//将节点放到文档碎片流中
node2fragment(el){
let fragment = new DocumentFragment()
, child;
while(child = el.firstChild){
fragment.appendChild(child)
}
return fragment;
}
}
/**
* 依赖收集--->收集的就是订阅对象
*/
class Dep{
static target = null;
constructor(){
this.subs = [];
}
//添加订阅者
//谁用到这个数据，谁就是订阅者，反映在html中就是使用数据的这个dom元素
addSub(watcher){
this.subs.push(watcher)
}
depend(){
Dep.target && this.subs.indexOf(Dep.target)<=-1 && this.addSub(Dep.target)
}
//通知所有订阅者
notify(){
this.subs.forEach(sub=>{
sub.update();
})
}
}
/**
* 谁用到这个数据，谁依赖这个数据，谁就是订阅者
* 订阅者-->更新视图
*/
class Watcher{
constructor(vm,expOrFn,cb){
this.vm = vm;
this.expOrFn = expOrFn;
this.cb = cb;
this.oldVal = this.get()
}
get(){
Dep.target = this;
let value = Vue.utils.getVal(this.vm.$data,this.expOrFn);
Dep.target = null;
return value;
}
//更新视图
update(){
let value = Vue.utils.getVal(this.vm.$data,this.expOrFn);
if(this.oldVal != value){
this.cb(value);
this.oldVal = value
}
}
}
