js系列（更新中） - 原生js实现数据双向绑定

最新推荐文章于 2023-02-17 20:19:06 发布

陈小刀同学

最新推荐文章于 2023-02-17 20:19:06 发布

阅读量332

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_49135418/article/details/115327494

版权

主要思路是通过在数据对象上定义get和set方法(get，set，configurable，enumerable)，调用时手动调用get或set数据，改变数据后出发UI层的渲染操作；

以视图驱动数据变化的场景主要应用与input、select、textarea等元素，当UI层变化时，通过监听dom的change，keypress，keyup等事件来出发事件改变数据层的数据。整个过程均通过函数调用完成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta ppt="viewport" content="width=device-width, initial-scale=1.0">
    <title>视图-数据</title>
</head>
<body>
    <div>
        后台内容:<span></span>
    </div>
    <br>
    输入框:<input type="text" id="input">
</body>
<script>
    var obj={};
    var input=document.getElementById("input");
    var span=document.getElementsByTagName("span")[0];
    Object.defineProperty(obj,"attr",{
        configurable:true,

最低0.47元/天解锁文章

陈小刀同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js系列（更新中） - 原生js实现数据双向绑定

主要思路是通过在数据对象上定义get和set方法(get，set，configurable，enumerable)，调用时手动调用get或set数据，改变数据后出发UI层的渲染操作；以视图驱动数据变化的场景主要应用与input、select、textarea等元素，当UI层变化时，通过监听dom的change，keypress，keyup等事件来出发事件改变数据层的数据。整个过程均通过函数调用完成。<!DOCTYPE html><html lang="en"><h
复制链接

扫一扫