双向绑定原理

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>

    <!-- 最后展示给用户看的视图 -->
    <!-- ===> -->


    <!-- <input type="text" value="hyj">
    hyj -->

</body>

  function Mvvm({el, $data}) {
        // 获取到了根元素
        this.root = document.querySelector(el);
        // 挂载了数据
        this.$data = $data;
        // 劫持和监听数据
        observer(this.$data, this); // 将数据和实例给监听者

        // 编译模板, 编译完成之后, 返回DOM片段，才是展示给用户看的页面, 
        let fragment = createFragment(this.root, this); 
        // 重新放入到根元素中
        this.root.appendChild(fragment);
    }

    function createFragment(root, vm) {  // root： 根节点， vm: 实例
        // 先默认指定第一个节点
        let child = root.firstChild;
        // 创建一个dom片段
        let fragment = document.createDocumentFragment();
        while (child) {
            // 拿到每一个子节点，然后编译一遍
            compile(child, vm);
            // 编译完成之后放入DOM片段中
            fragment.appendChild(child);
            // 编译完一个就重置一个
            child = root.firstChild;
       }

       return fragment;
    }


    // 编译解析函数
    function compile(node, vm) {
        // 判断节点类型： 如果是1的话说明是元素，然后我们只考虑数据双向绑定，所以采用v-model + 单行文本输入框
        if (node.nodeType === 1) {
            let attrs = node.attributes;

            // 获取v-model上的变量名
            let vModelVal = attrs['v-model'].value;
            node.addEventListener('input', function (e) {
                vm[vModelVal] = e.target.value;
            })

            node.value = vm[vModelVal];
            new Watch(node, vModelVal, vm);
        }

        // 文本节点为3
        if (node.nodeType === 3) {
            // 获取文本值
            let textCon = node.textContent;
            let reg = /\{\{(.*)\}\}/g;
            if (reg.test(textCon)) {
                new Watch(node, RegExp.$1, vm);
            }
        }


    }

    // 监听者
    function observer(data, vm) {
        Object.keys(data).forEach(k => {
            //  每一个数据属性都做劫持，并劫持在vm上
            defineProps(data[k], k, vm);
        });
    }

    // 劫持
    function defineProps(val, k, vm) {
        // 表面上： 是定义给了vm实例上属性，实际上是将值放在vm实例$data里面
        let dep = new Dep();
        Object.defineProperty(vm, k, {
            // 做设置的劫持
            set(newVal) {
                if (val === newVal) return;
                vm.$data[k] = newVal;
                // 通知更新
                dep.notify();
            },
            // 做读取的劫持
            get() {
                // 将当前的订阅者添加到订阅器数组中
                if (Dep.target) {
                    dep.addSub(Dep.target);
                }
                return vm.$data[k];
            }
        });
    }

    // 订阅器
    function Dep() {
        // 订阅者数组中
        this.subArr = [];
    }

    // 将订阅者放入订阅者数组中
    Dep.prototype.addSub = function (tar) {
        this.subArr.push(tar)
    }

    // 通知每一个订阅者去更新
    Dep.prototype.notify = function () {
        this.subArr.forEach(sub => sub.update())
    }

    // 临时存储订阅者
    Dep.target = null;


    // 订阅者
    function Watch(node, key,vm) {
        Dep.target = this;
        this.node = node;
        this.key = key;
        this.vm = vm;
        this.update();
        Dep.target = null;

    }

    Watch.prototype = {
        constructor: Watch,
        // 更新的方法
        update() {
            this.get();
            if (this.node.nodeType === 1) {
                this.node.value = this.value;
            }

            if (this.node.nodeType === 3) {
                this.node.textContent = this.value;
            }
            
        },
        // 获取数据的方法
        get() {
            this.value = this.vm[this.key]; 
            // this.value = 实例[message]
        }
    }






    let newVm = new Mvvm({
        el: '#app', // 根元素
        $data: { // 数据对象
            message: 'zrr'
        }
    });

    setTimeout(() => {
        newVm.message = 'zrrrrrrrrr';
    }, 3000)


    // Mvvm / Mvc   => 概念性
</script>
</html>

双向绑定原理

推荐阅读更多精彩内容