手把手教你Vue从零撸一个迷你版MVVM框架（二）

//初始化
class MiniMVVM {
        constructor(options) {
            this.$el = options.el;
            this.$data = options.data;
            //判断是否有模板，如果有模板的话，就执行编译和数据劫持
            if (this.$el) {
                //1,数据劫持
                this.$data = (new Observer()).observe(this.$data);
                //2,模板编译
                new TemplateCompile(this.$el, this);
            }
        }
    }

//数据劫持类，响应式
    class Observer {
        constructor(data) {
            this.data = data;
            this.observe(this.data);
        }
        observe(data) {
            //验证是否存在，是否是对象
            if (!data || typeof data !== 'object') {
                return;
            }
            //使用proxy 代理拦截监听
            let that = this;
            //初始化发布订阅
            let emitter = new Emitter();
            let handler = {
                get(target, key) {
                    //递归当前target[key] 是否是对象
                    if (typeof target[key] === 'object' && target[key] !== null) {
                        return new Proxy(target[key], handler);
                    }
                    //判断当前key下面的watcher是否存在
                    if (Emitter.watcher) {
                        emitter.addSub(Emitter.watcher);
                    }
                    return target[key];
                },
                set(target, key, newVal) {
                    if (target[key] !== newVal) {
                        target[key] = newVal;
                        emitter.notify();
                    }
                }
            }
            //创建proxy代理
            let pdata = new Proxy(data, handler);
            return pdata;
        }
    }

let p = new Proxy(target, handler);

//模板编译类
    class TemplateCompile {
        constructor(el, vm) {
            //1,获取元素
            this.el = (el.nodeType === 1 ? el : document.querySelector(el));
            //2，获取vm实例
            this.vm = vm;
            //如果元素存在，然后我们进行编译
            if (this.el) {
                //获取模板
                let fragment = this.nodeToFragment(this.el);
                //模板语法解析
                this.cpmpile(fragment);
                //把最后生成的文档结构重新append到我们页面中去
                this.el.appendChild(fragment);
            }
        }
        //获取模板
        nodeToFragment(el) {
            let fragment = document.createDocumentFragment();
            let firstChild = null;
            while (firstChild = el.firstChild) {
                fragment.appendChild(firstChild);
            }
            return fragment;
        }
        //解析文档碎片，编译模板中的变量
        cpmpile(fragment) {
            //1，获取所有的子节点（包括元素解点）
            let childNodes = fragment.childNodes;
            //2,遍历循环每个节点
            Array.from(childNodes).forEach(node => {
                //如果是元素节点
                if (node.nodeType === 1) {
                    //递归遍历子节点
                    this.cpmpile(node);
                    //处理我们的元素节点
                    this.complieElement(node);
                } else {
                    //处理我们的文本节点
                    this.complieText(node);
                }
            })
        }
        //编译处理
        complieText(nodeText) {
            //获取文本节点的内容
            let exp = nodeText.textContent;
            //这里我们通过正则获取{{}}里面的数据
            let re = /{{[^}]+}}/g;
            if (re.test(exp)) {
                //渲染页面数据
                CompileTool.text(nodeText, this.vm, exp)
            }
        }
        //编译处理元素节点
        complieElement(node) {
            console.log(node);
            //取出所有的属性
            let attrs = node.attributes;
            //边里属性 检测是否具备‘-v’
            Array.from(attrs).forEach(attr => {
                console.log(attr.name);
                if (attr.name.includes('v-')) {
                    //如果是v-attr 这样的指令 我们去我们对应的寻找属性值字符串所对应的值
                    let exp = attr.value;
                    let type = exp.split('-')[1];
                    //调用model指令对应的方法，渲染页面数据
                    CompileTool.model(node, this.vm, exp);
                }
            })
        }
    }

//观察者
    class Watcher {
        constructor(vm, exp, callback) {
            this.vm = vm;
            this.exp = exp;
            this.callback = callback;
            //获取当前的值
            this.oldValue = this.get();
        }
        get() {
            //初始化发布订阅状态值
            Emitter.watcher = this;
            //获取这个data上面的值
            let val = CompileTool.getVal(this.vm, this.exp)
            //清空一下发布状态置
            Emitter.watcher = null;
            //返回当前值
            return val;
        }
        update() {
            //获取当前值
            let newVal = CompileTool.getVal(this.vm, this.exp)
            //拿到旧的值
            let oldVal = this.oldValue;
            //比较两次的值，是否保持一致，如果不一致就执行回调
            if (newVal != oldVal) {
                this.callback(newVal);
            }
        }
    }

//发布订阅类 自定义事件
    class Emitter {
        constructor() {
            this.subs = [];
        }
        //添加一个订阅
        addSub(watcher) {
            this.subs.push(watcher);
        }
        //通知执行订阅
        notify() {
            this.subs.forEach(v => v.update());
        }
    }