简单模拟vue实现数据劫持-视图更新双向绑定-2

最新推荐文章于 2023-08-29 11:39:35 发布

上帝喜欢糖

最新推荐文章于 2023-08-29 11:39:35 发布

阅读量242

点赞数

文章标签： javascript 开发语言 vue.js

本文链接：https://blog.csdn.net/qq_20623665/article/details/128822575

版权

接上，

new一个实例对象，vc，构造函数动态绑定一个空对象，并在构造函数上绑定静态方法

$on进行事件的注册，$emit抛出执行事件


        function observe() {
            // 利用策略模式-可以快速根据特定的事件，执行多个函数
            this.strategy = {

            }
        }
        //    在observe构造函数的原型上添加两个静态方法$on和$emit
        // $emit调用传入参数，通过属性名找到方法，执行所有事件（被发布的事件，订阅者获取将执行所有事件）
        observe.prototype.$emit = function (eventName) {
            this.strategy[eventName].forEach(fn => fn())
        }
        // $on调用传入两个参数，第一个事件名，第二个事件执行函数--会被push到对象中
        observe.prototype.$on = function (eventName, callback) {
            // 判断里面有没有这个事件名，没有就添加键值
            if (!this.strategy[eventName]) {
                this.strategy[eventName] = []
            }
            this.strategy[eventName].push(callback)
        }

        const vc = new observe()

        // 理解为在methods中定义执行函数
        function doclick() {
            console.log("起身");
        }
        //  定义一个事件，执行函数----发布了一个事件
        vc.$on('qisheng', doclick)

抛出执行事件

使用$on添加事件，$emit抛出执行事件

接上次目标

数据修改，视图更新--和模拟实现v-model的双向绑定

先实现v-html的数据改动视图更新---

当订阅者关注发生改变的时候执行事件更新视图

（之前的错误，写死了，写data.name的话只会data.name会更新数据，应该改为key）

修改后试试确定没问题

更新视图

实现演示

实现v-model双向--从视图到数据

首先数据更新视图也更新和上面v-html一样添加一个$on

前面set方法里已经使用$emit更新视图了，这样就可以了实现数据变化绑定v-model的input数据变化

监听input事件，事件对象e，的target的value有input框输入的值，并把值赋值给实例对象里的key（age或name）

实现双向绑定演示

实现效果完整代码

<body>
    <div id="app">
        <h1 v-html="name"></h1>
        <input v-model="name" type="text">
        <h2 v-html="name" data-html="name"></h2>
        <input v-model="age" data-html="name"></input>
        <h3 v-html="age"></h3>
    </div>
    <script>

        // // 观察者
        // function observe() {

        // }

        function observe() {
            // 利用策略模式-可以快速根据特定的事件，执行多个函数
            this.strategy = {

            }
        }
        //    在observe构造函数的原型上添加两个静态方法$on和$emit
        // $emit调用传入参数，通过属性名找到方法，执行所有事件（被发布的事件，订阅者获取将执行所有事件）
        observe.prototype.$emit = function (eventName) {
            this.strategy[eventName].forEach(fn => fn())
        }
        // $on调用传入两个参数，第一个事件名，第二个事件执行函数--会被push到对象中
        observe.prototype.$on = function (eventName, callback) {
            // 判断里面有没有这个事件名，没有就添加键值
            if (!this.strategy[eventName]) {
                this.strategy[eventName] = []
            }
            this.strategy[eventName].push(callback)
        }

        // const vc = new observe()

        // // 理解为在methods中定义执行函数
        // function doclick() {
        //     console.log("起身");
        // }
        // //  定义一个事件，执行函数----发布了一个事件
        // vc.$on('qisheng', doclick)
    </script>

    <script>

        const vc = new observe()

        function MVVM(options) {
            const { el, data } = options
            console.log(el);
            console.log(data);
            for (let key in data) {
                console.log(key);
                Object.defineProperty(this, key, {
                    get: function () {
                        return data[key]
                    },
                    set: function (newVal) {
                        console.log(newVal, '修改了值');
                        // 修改值和原先值不同才会触发
                        if (data[key] !== newVal) {
                            data[key] = newVal
                            vc.$emit(key)
                        }
                    }
                })
            }
            // 显示数据//挂载的节点,下的所有元素---得到伪数组
            const domArr = document.querySelector(el).children
            //    转换为真数组
            console.log(Array.from(domArr), '转换');
            Array.from(domArr).forEach(domNode => {
                console.log(domNode);
                console.log(domNode.dataset.html, 'dataset取自定义属性值');
                // console.log(domNode.hasAttribute('v-html'));
                if (domNode.hasAttribute('v-html')) {
                    console.log(domNode.getAttribute('v-html'));
                    const key = domNode.getAttribute('v-html')
                    domNode.innerHTML = this[key]//this指向实例化对象
                    // ------------
                    // 发布一个事件
                    vc.$on(key, () => { domNode.innerHTML = this[key] })
                }

                if (domNode.hasAttribute('v-model')) {
                    // console.log(domNode.getAttribute('v-html'));
                    const key = domNode.getAttribute('v-model')
                    domNode.value = this[key]//this指向实例化对象
                    vc.$on(key, () => { domNode.value = this[key] })
                    // 监听input事件，事件对象e，的target的value有input框输入的值，并把值赋值给实例对象里的key（age或name）
                    domNode.addEventListener('input', (e) => { 
                        this[key]= e.target.value 
                    })
                }

            })

        }
        // 语法 dataset 也可以取自定义属性值,但是标签绑定固定语法 data-自定义名="值",取出标签元素.dataset.自定义名,返回自定义属性值
        // 语法getAttribute,返回自定义属性值,元素.hasAttribute('自定义属性名'),返回自定义属性值
        // 语法hasAttribute,返回布尔值,元素.hasAttribute('自定义属性'),判断节点是是否存在此自定义属性
        const vm = new MVVM({
            el: '#app',
            data: {
                name: "张三",
                age:18
            },
        })

        console.dir(vm)
    </script>
</body>

上帝喜欢糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单模拟vue实现数据劫持-视图更新双向绑定-2

监听input事件，事件对象e，的target的value有input框输入的值，并把值赋值给实例对象里的key（age或name）前面set方法里已经使用$emit更新视图了，这样就可以了实现数据变化绑定v-model的input数据变化。（之前的错误，写死了，写data.name的话只会data.name会更新数据，应该改为key）数据修改，视图更新--和模拟实现v-model的双向绑定。先实现v-html的数据改动视图更新---实现v-model双向--从视图到数据。修改后试试确定没问题。
复制链接

扫一扫