欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue双向绑定代码实现MVVM原理

程序员文章站 2022-04-19 07:57:27
...

Vue三要素
响应式: 例如如何监听数据变化,其中的实现方法就是我们提到的双向绑定
模板引擎: 如何解析模板
渲染: Vue如何将监听到的数据变化和解析后的HTML进行渲染

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        实现vue双向绑定
    </title>
    <script>
        //1、首先实现一个整体架构(VUE类、Watcher类),订阅发布者设计模式
        //2、实现MVVM中的由M到V,把模型里面的数据绑定到视图
        //3、(1)最后实现V-M,当文本框输入文本的时候,由文本事件触发更新模型中的数据
        //   (2)同时更新相对应的视图
        //发布者
        class myVue {
            constructor(options) {
                this.$data = options.data;//获取数据
                this.$el = document.querySelector(options.el);//获取对象
                this._directive = {}//存放订阅者容器
                //改变数据 是全页面刷新还是局部刷新
                //{订阅者1,订阅者2,订阅者3,订阅者4}
                //{mytext:[订阅者1,订阅者2],mybox:[订阅者3]}
                this.Observer(this.$data);
                this.Compile(this.$el)
            }

            Observer(data) {
                for (let key in data) {
                    this._directive[key] = [];
                    let val = data[key];
                    let watch = this._directive[key];//数组
                    //this.$data里的每一个属性发生赋值 都要更新视图
                    // console.log(this._directive) this_directive含Watcher实例对象
                    Object.defineProperty(this.$data, key, {
                        get() {
                            return val;
                        },
                        set(newVal) {
                            if (newVal !== val) {
                                val = newVal;
                                //更新视图
                                // watcher实例.update
                                watch.forEach(element => {
                                    element.update();
                                });
                            }
                        }
                    })
                }
            }

            Compile(el) {

                //创建文档片段,将DOM操作放内存提高性能
                // this.$fragment = this.node2Fragment(el);
                // let nodes = this.$fragment.children;
                let nodes = el.children;
                // console.log(nodes)
                for (let i = 0; i < nodes.length; i++) {
                    let node = nodes[i];
                    if (node.children.length) {
                        this.Compile(node)
                    }
                    //怎样解析指令
                    if (node.hasAttribute('v-text')) {
                        //怎样添加订阅者
                        //首先获取订阅者名
                        let attrVal = node.getAttribute('v-text');
                        // this._directive[arrtVal].push("订阅者1"); //指令对象
                        // console.log(this._directive)
                        //订阅数据变化,绑定更新函数
                        this._directive[attrVal].push(new Watcher(node, this, attrVal, 'textContent'));
                        // console.log(this._directive)
                    }
                    if (node.hasAttribute('v-model')) {
                        let attrVal = node.getAttribute('v-model');
                        this._directive[attrVal].push(new Watcher(node, this, attrVal, 'value'));
                        node.addEventListener('input', () => {
                            // console.log("哈哈哈哈")
                            this.$data[attrVal] = node.value
                            // console.log(this.$data[attrVal])
                        })
                    }
                }
            }
            node2Fragment(el) {
                let fragment = document.createDocumentFragment()
                let child;
                while (child = el.firstChild) {
                    fragment.appendChild(child)
                }
                return fragment;
            }
        }
        //订阅者
        class Watcher {//更新视图
            constructor(el, vm, exp, attr) {
                this.el = el;
                this.vm = vm;
                this.exp = exp;
                this.attr = attr;
                this.update();//初始化视图
            }
            update() {
                // div.textContent=vue对象.$data['mytext']
                // input.value=vue对象.$data['mytext']
                this.el[this.attr] = this.vm.$data[this.exp]
            }

        }
    </script>
</head>

<body>
    <div id="app">
        <h1>双向绑定</h1>
        <div v-text="mytext">
            <div v-text="mybox"></div>
        </div>
        <div v-text="mybox"> </div>
        <input type="text" v-model="mytext">
    </div>

</body>
<script>
    var app = new myVue({
        el: '#app',
        data: {
            mytext: '青鸟软通公开课',
            mybox: 'vue实现MVVM'
        }
    });
</script>

</html>