数据双向绑定的原生写法原理

最新推荐文章于 2023-11-28 17:31:03 发布

原创最新推荐文章于 2023-11-28 17:31:03 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

本文介绍了一种使用JavaScript实现的双向数据绑定机制，通过对象数据劫持的方法，实现了输入框值与页面元素内容的实时同步更新。该机制利用了`Object.defineProperty`来监听数据变化，并在数据改变时自动更新视图。

<body>
    <input type="text" name="" id="">
    <div></div>
    <script>
        let input = document.querySelector('input')
        let box = document.querySelector('div')
        var data = {
            name: ''
        }
        
        // 对象的数据劫持方法
        Object.defineProperty(this.data, 'name', {
           
        //    获取截取的数据
            get() {
                // 返回出去
                return input.value
            },
          
        //   将截取的数据设置给box
            set(i) {
                box.innerHTML = i
                input.value = i
            }
        })

        // 监听输入框键盘弹起事件
        input.addEventListener('keyup', (e) => {
            this.data.name = e.target.value
        })
    </script>
</body>