js实现双向数据绑定

最新推荐文章于 2023-12-29 21:15:01 发布

暮志未晚NAN

最新推荐文章于 2023-12-29 21:15:01 发布

阅读量1.4k

点赞数 4

分类专栏： javascript 文章标签：双向绑定 javascript 数据绑定 mvc

本文链接：https://blog.csdn.net/qq_30100043/article/details/78195532

版权

javascript 专栏收录该内容

73 篇文章 2 订阅

订阅专栏

需求

现在的框架都讲究什么单向绑定，双向绑定的都是什么东西？
- 单向数据绑定：指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。
- 双向数据绑定：数据模型（Module）和视图（View）之间的双向绑定。就是我不管修改数据模型的相关数据，还是视图上的数据，相对应的数据也会跟着更新。

实现原理

主要的就是事件的绑定。
- 在视图层（View）上，可以绑定keyup事件，来更新数据模型
- 在数据模型上面利用Object.defineProperty()方法定义对象的set方法，在触发对象属性设置时，将view层的数据也修改掉。

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="myinput" >
<script>
    var input = document.getElementById("myinput");
    var obj = {};
    Object.defineProperty(obj, "input", {
        get: function () {
            return input.value;
        },
        set: function (val) {
            input.value = val;
            changeCallback(input.value);
        }
    });

    input.onkeyup = function () {
        obj.input = input.value;
    };

    function changeCallback(val) {
        console.log("这里是不管view层，还是module层修改后的回调，最后设置的值是"+val);
    }

</script>
</body>
</html>

思路

首先，我们先使用Object.defineProperty()方法设置obj的set方法，只要修改obj的input属性，就会触发这个这个set方法，然后触发回调，这就实现了module层的数据绑定。
然后，再input上绑定keyup事件，实现了view层的绑定。
只要两者有一个修改，不管input的value值，还是获取obj的input属性，都是获取最新修改的值。
这应该是最简单的思路了。

暮志未晚NAN

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
js实现双向数据绑定

需求现在的框架都讲究什么单向绑定，双向绑定的都是什么东西？ - 单向数据绑定：指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。 - 双向数据绑定：数据模型（Module）和视图（View）之间的双向绑定。就是我不管修改数据模型的相关数据，还是视图上的数据，相对应的数据也会跟着更新。实现原理主要的就是事件的绑定。 -
复制链接

扫一扫

专栏目录