仿照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如此神秘了~