天天看点
返回

手写MVVM框架 之vue双向数据绑定原理剖析

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>自定义MVVM框架,这是比较牛逼的v-text，v-model和数据绑定原理介绍</title>
    </head>

    <body>
        <div id="app">
            <p v-text="message"></p>
            <input type="text" v-model="message"/>
            <p>{{message}}</p>
        </div>
        <script src="observer.js"></script>
        <script src="TemepCompiler.js"></script>
        <script src="watcher.js"></script>
        <script src="mvvm.js"></script>
        <script>
            var vm = new MVVM({
                el: "#app", //挂载视图
                data: {
                    msg:'这是自己写的mvvm框架',
                    message:'mvvm出来吧'
                } //定义数据
            })
        </script>
    </body>

</html>      
//创建一个MVVM框架类
class MVVM { //类构造器（创造实例模板代码）
    constructor(options) { //相当于函数的参数 {el:...,data:...}
        //缓存重要属性
        this.$vm = this;
        this.$el = options.el;
        this.$data = options.data;

        //判断视图是否存在
        if(this.$el) {
            //添加属性观察对象（实现属性挟持）
            new Observer(this.$data);
            //创建模板编译器，来解析视图
            this.$compiler = new TemepCompiler(this.$el, this.$vm);
        }
    }
}      
class TemepCompiler { //类构造器（创造实例模板代码）
    constructor(el, vm) { //相当于函数的参数 (this.$el,this.$vm)
        //缓存重要属性
        this.vm = vm;
        this.el = this.isElemetNode(el) ? el : document.querySelector(el);
        //判断视图是否存在
        if(this.el) {
            //1.把模板内容放入内存(片段)
            var fragment = this.node2fragment(this.el);
            //2.解析模板
            this.compile(fragment);
            //3.把内存的结果返回页面
            this.el.appendChild(fragment);
        }
    }
    //工具方法
    isElemetNode(node) {
        return node.nodeType === 1 //1.元素节点 2.属性节点 3.文本节点
    }
    isTextNode(node) {
        return node.nodeType === 3 //1.元素节点 2.属性节点 3.文本节点
    }
    toArray(arr) {
        return [].slice.call(arr); //假数组转为数组；
    }
    isDerective(attrName) {
        return attrName.indexOf("v-") >= 0; //判断属性名中是否有v-开头的属性
    }
    //核心方法(节省内存)把模板放入内存，等待解析
    node2fragment(node) {
        //创建内存片段
        var fragment = document.createDocumentFragment(),
            child;
        //模板内容丢到内存
        while(child = node.firstChild) {
            fragment.appendChild(child);
        }
        //返回
        return fragment;
    }
    compile(parentNode) {
        //获取子节点
        var childNodes = parentNode.childNodes, //类数组
            compiler = this;
        //遍历每一个节点
        this.toArray(childNodes).forEach((node) => {
            //判断节点类型
            if(compiler.isElemetNode(node)) {
                //1.属性节点（解析指令）
                compiler.compileElement(node);

            } else {
                //2.文本节点（解析指令）
                var textReg = /\{\{(.+)\}\}/; //（\转义）文本表达式验证规则
                var expr = node.textContent;
                //var expr = node.innerText; //谷歌支持
                //按照规则验证内容
                if(textReg.test(expr)) {
                    expr = RegExp.$1 //缓存最近一次的正则里面的值;
                    //调用方法编译
                    compiler.compileText(node, expr); //如果还有子节点，继续解析；
                }
            }
        });
    }
    //解析元素节点的指令的方法
    compileElement(node) {
        //获取当前元素节点的所有属性
        var arrs = node.attributes;
        self = this;
        //遍历当前元素所有属性
        this.toArray(arrs).forEach(attr => {
            var attrName = attr.name;
            //判断属性是否是指令
            if(self.isDerective(attrName)) {
                var type = attrName.substr(2); //v-text,v-model...
                var expr = attr.value; //指令的值就是表达式
                //找帮手
                CompilerUntils[type](node, self.vm, expr);
            }
        })
    }
    //解析表达式的方法
    compileText(node, expr) {
        CompilerUntils.text(node, this.vm, expr);
    }

}

//解析指令帮手
CompilerUntils = {
    //解析text指令
    text(node, vm, expr) {
        //第一次观察
        //1.找到更新规则对象的更新方法
        var updaterFn = this.updater["textUpdater"];
        //2.执行方法
        updaterFn && updaterFn(node, vm.$data[expr]) //等价if(updaterFn){updaterFn(node,vm.$data[expr])}

        //第n+1次观察
        new Watcher(vm, expr, (newVaule) => {
            //触发订阅时按之前的规则对节点进行更新;v-model的也一样；
            updaterFn && updaterFn(node, newVaule);
        })
    },
    //解析model指令
    model(node, vm, expr) {
        //1.找到更新规则对象的更新方法
        var updaterFn = this.updater["modelUpdater"];
        //2.执行方法
        updaterFn && updaterFn(node, vm.$data[expr]) //等价if(updaterFn){updaterFn(node,vm.$data[expr])}

        //第n+1次观察
        new Watcher(vm, expr, (newVaule) => {
            //触发订阅时按之前的规则对节点进行更新;v-model的也一样；
            updaterFn && updaterFn(node, newVaule);
        })
        //视图到模型变化
        node.addEventListener("input", (e) => {
            var newValue = e.target.value;
            //把值放进数据
            console.log(newValue+'新值');
            vm.$data[expr] = newValue;
        })
    },
    updater: {
        //文本更新方法
        textUpdater(node, value) {
            node.textContent;
            //node.innerText;  //谷歌支持
        },
        //输入框值更新方法
        modelUpdater(node, value) {
            node.value = value;
        }
    }
}      
class Observer {
    //构造函数
    constructor(data) {
        //提供一个解析方法，完成属性的分析，和挟持
        this.observe(data);
    }
    observe(data) {
        //判断数据的有效性 必须是对象
        if(!data || typeof data !== "object") {
            return;
        }
        var keys = Object.keys(data); //拿到所有的属性（key)转为数组
        keys.forEach((key) => {
            //重新定义key
            this.defineReactive(data, key, data[key]); //动态属性需要中括号不能.
        })

    }
    //针对当前对象属性的重新定义（挟持）
    defineReactive(obj, key, val) {
        var dep = new Dep();
        //重新定义 
        Object.defineProperty(obj, key, {
            enumerable: true, //是否可以遍历
            configurable: false, //是否可以重新配置
            get() { //getter取值
                Dep.target && dep.addSub(Dep.target); //拿到订阅者
                //返回属性
                return val;
            },
            set(newValue) { //setter修改值
                val = newValue; //新值覆盖旧值
                dep.notify(); //通知，触发update操作；
            }

        })

    }
}

//创建发布者
//1.管理订阅者
//2.通知
class Dep {
    constructor() {
        this.subs = [];
    }
    //添加订阅
    addSub(sub) { //其实就是Watcher实例
        this.subs.push(sub);
    }
    //集体通知
    notify() {
        this.subs.forEach((sub) => {
            sub.update();
        })
    }
}      
//定义一个订阅者
class Watcher {
    //构造函数
    //1.需要使用订阅功能的节点
    //2.全局vm对象，用于获取数据
    //3.需要使用订阅功能的节点
    constructor(vm, expr, cb) {
        //缓存重要属性
        this.vm = vm;
        this.expr = expr;
        this.cb = cb;

        //缓存当前值
        this.value = this.get();
    }

    //获取当前值
    get() {
        //把当前订阅者添加到全局
        Dep.target = this; //watcher实例
        //获取当前值
        var value = this.vm.$data[this.expr];
        //清空全局
        Dep.target = null;
        //返回
        return value;
    }
    //提供一个更新
    update() {
        //获取新值
        var newValue = this.vm.$data[this.expr];
        //获取老值
        var oldValue = this.value;
        //执行回调
        if(newValue !== oldValue) {
            this.cb(newValue); //效果一样关键需不需要改变this指向this.cb.call(this.vm,newValue)
        }
    }

}
缓存 元素节点 数组
上一篇: Android开发学习系列（一）——Android按钮圆角美化
下一篇: android控件设置圆角和圆形框架,给任意view设置圆角outline.setRoundRect()方法实现

继续阅读