wue

写在前面的东西

1、概述

 让我们先来看一下官网的这张数据绑定的说明图:

2.Object.defineProperty

var o = {name:'vue'};
Object.defineProperty(o, "age",{ value : 3,
 writable : true,//可以修改属性a的值
 enumerable : true,//能够在for..in或者Object.keys()中枚举
 configurable : true//可以配置
 });
Object.keys(o)//['name','age']
o.age = 4;
console.log(o.age) //4
var bValue;
Object.defineProperty(o, "b", {
 get : function(){
 return bValue;
 },
 set : function(newValue){
 console.log('haha..')
 bValue = newValue;
 },
 enumerable : true,//默认值是false 及不能被枚举
 configurable : true//默认也是false
 });
 o.b = 'something';
//haha..

3.实现observer

function Observer(data){
	this.data = data;
	if(Array.isArray(data)){
		protoAugment(data,arrayMethods); //arrayMethods实现对Array.prototype原型方法的拷贝;
		this.observeArray(data);
	}else{
		this.walk(data);
	}
}
Observer.prototype = {
	walk:function walk(data){
		var _this = this;
		Object.keys(data).forEach(function(key){
			_this.convert(key,data[key]);
		})
	},
	convert:function convert(key,val){
		this.defineReactive(this.data,key,val);
	},
	defineReactive:function defineReactive(data,key,val){
		var ochildOb = observer(val);
		var _this = this;
		Object.defineProperty(data,key,{
			configurable:false,
			enumerable:true,
			get:function(){
 console.log(`i get the ${key}-->${val}`)
				return val;
			},
			set:function(newVal){
				if(newVal == val)return;
				console.log(`haha.. ${key} changed oldVal-->${val} newVal-->${newVal}`);
				val = newVal;
 observer(newVal);//在这里对新设置的属性再一次进行get/set
			}
		})
	},
	observeArray:function observeArray(items){
		for (var i = 0, l = items.length; i < l; i++) {
 		observer(items[i]);
 		}
	}
}
function observer(data){
	if(!data || typeof data !=='object')return;
	return new Observer(data);
}
//让我们来试一下
var obj = {name:'jasonCloud'};
var ob = observer(obj);
obj.name = 'wu';
//haha.. name changed oldVal-->jasonCloud newVal-->wu
obj.name;
//i get the name-->wu

let _id = 0;
/*
 Dep构造器用于维持$watcher检测队列;
*/
function Dep(){
	this.id = _id++;
	this.subs = [];
}
Dep.prototype = {
	constructor:Dep,
	addSub:function(sub){
		this.subs.push(sub);
	},
	notify:function(){
		this.subs.forEach(function(sub){
			if(typeof sub.update == 'function')
			sub.update();
		})
	},
	removeSub:function(sub){
		var index = this.subs.indexOf(sub);
		if(index >-1)
		this.subs.splice(index,1);
	},
	depend:function(){
		Dep.target.addDep(this);
	}
}
Dep.target = null; //定义Dep的一个属性,当watcher时Dep.targert=watcher实例对象

function Observer(data){
	//省略的代码..
	this.dep = new Dep();
	//省略的代码..
}
Observer.prototype = {
 //省略的代码..
	defineReactive:function defineReactive(data,key,val){
		//省略的代码..
		var dep = new Dep();
		Object.defineProperty(data,key,{
			configurable:false,
			enumerable:true,
			get:function(){
				if(Dep.target){
					dep.depend();
					//省略的代码..
				}
				return val;
			},
			set:function(newVal){
				//省略的代码..
 dep.notify();
			}
		})
	},
	observeArray:function observeArray(items){
		for (var i = 0, l = items.length; i < l; i++) {
 		observer(items[i]);
 		}
	}
}
function observer(data){
	if(!data || typeof data !=='object')return;
	return new Observer(data);
}

4.实现一个Watcher

function Watcher(vm,expOrFn,cb){
	this.vm = vm;
	this.cb = cb;
	this.expOrFn = expOrFn;
	this.depIds = {};
	var value = this.get(),valuetemp;
	if(typeof value === 'object' && value !== null){
		if(Array.isArray(value)){
			valuetemp = [];
			for(var i = 0,len = value.length;i<len;i++){
				valuetemp.push(value[i]);
			}
		}else{
			valuetemp = {};
			for(var j in value){
				valuetemp[j] = value[j];
			}
		}
		this.value = valuetemp;
	}else{
		this.value = value;
	}
};
Watcher.prototype = {
	update:function(){
		this.run();
	},
	run:function(){
		var val = this.get(),valuetemp;
		var oldVal = this.value;
		if(val!==oldVal){
			if(typeof val === 'object' && val !== null){
				if(Array.isArray(val)){
					valuetemp = [];
					for(var i = 0,len = val.length;i<len;i++){
						valuetemp.push(val[i]);
					}
				}else{
					valuetemp = {};
					for(var j in val){
						valuetemp[j] = val[j];
					}
				}
				this.value = valuetemp;
			}else{
				this.value = val;
			}
			this.cb.call(this,val,oldVal);
		}
	},
	get:function(){
		Dep.target = this;
		var val = this.getVMVal();
		Dep.target = null;
		return val;
	},
	getVMVal:function(){
		var exps = this.expOrFn.split('.');
		var val = this.vm._data;
		exps.forEach(function(key){
			val = val[key];
		})
		return val;
	},
	addDep:function(dep){
		if(!this.depIds.hasOwnProperty(dep.id)){
			dep.addSub(this);
			this.depIds[dep.id] = dep;
		}
	}
}

function Compile(el,vm){
	this.$vm = vm;
	this.$el = this.isElementNode(el) ? el : document.querySelector(el);
	if(this.$el){
		this.$fragment = this.nodeToFragment(this.$el);
		this.init();
		this.$el.appendChild(this.$fragment);
	 this.$vm.$option['mount'] && this.$vm.$option['mount'].call(this.$vm);
	}
}

5.实现一个简易版的vue

function Wue(option){
	this.$option = option;
	var data = this._data = this.$option.data;
	var _this = this;
	//数据代理实现数据从vm.xx == vm.$data.xx;
	Object.keys(data).forEach(function(val){
		_this._proxy(val)
	});
	observer(data)
	this.$compile = new Compile(this.$option.el , this);
}
Wue.prototype = {
	$watch:function(expOrFn,cb){
		return new Watcher(this,expOrFn,cb);
	},
	_proxy:function(key){
		var _this = this;
		Object.defineProperty(_this,key,{
			configurable: false,
 enumerable: true,
 get:function(){
 	return _this._data[key];
 },
 set:function(newVal){
 	_this._data[key] = newVal;
 }
		})
	}
}

后话