仿照vue实现简易的MVVM框架（一）

代码github地址： https://github.com/susantong/myMVVM

主要的方法有：

1. compile
   深度遍历前端界面的节点，将其复制进一个addQuene队列中

2. pasers
   遍历所有的节点，并将节点包装成一个含有本节点、自定义属性及属性值的对象。要想实现双向绑定，重要的一步是，为自定义s-model的节点绑定事件(input框的双向绑定，监听oninput事件)

3. observe
   可是说是最为关键的一步，它是MVVM框架实现双向绑定的基础。我们知道，是通过es5中的Object.defineproperty()去实现，劫持set和get属性，以此来通知所有订阅者做出改变。这一步也踩了一些坑，不过是一些比较小而基础的错误，以此看出基础的重要性，打好基础是关键啊！这里展示出关键代码:

	this.watch = function(obj, callback) {
		this.$observeObj = function() {
			var that = this;
			this.callback = callback;
			//console.log(Object.keys(obj));
			Object.keys(obj).forEach(function(prop) {
				var val = obj[prop];
				Object.defineProperty(obj, prop, {
					get: function() {
						return val;
					},
					set: function(newVal) {
						var temp = val;
						//console.log(newVal);
						val = newVal;
						//通知所有订阅者改变
						that.cache.forEach(function(item) {
							if (item[prop]) {
								item[prop] = newVal;
							}
						});
						that.callback();
					},
					enumerable: true,
    				configurable: true
				});
			});
		}

		this.$observeObj();
	};

	this.observe = function() {
		this.watch(data, this.render);
	};

4. render
   刚开始渲染或数据发生改变时需要重新渲染。这个函数的主要点在于，对于指令的实现，比如s-text,就是简单的数据展现，s-show需要操作css的display属性等，这些都可以通过查看官网去看细节，然后去操作数据，以达到相同的效果。

初期的效果已经实现，更多的指令需要去拓展，看懂了就不会觉得vue如此神秘了~