前段汇总之JS实现数据双向绑定

已于 2023-08-11 11:19:21 修改
阅读量570 收藏 1
点赞数
文章标签： javascript 前端 vue.js
于 2023-08-11 11:16:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/if_smile/article/details/132221095
版权

参考vue的关键字：v-model绑定值，{{}}，显示值

目录

简单实现双向绑定

 使用Proxy优化双向绑定

动态更新值

简单实现双向绑定

新建html5模板：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双向数据绑定.v1</title>
</head>
<body>
  
</body>
</html>

然后声明一个H1标签用于展示数据，声明一个input用于输入数据

  显示title：<h1>{{title}}</h1>
  输入title：<input  type="text" v-model="title" />

监听input的值改变，然后设置H1标签新值。

  let inputs = document.querySelectorAll("input");
  let h1s = document.querySelectorAll("h1");
  inputs[0].addEventListener("input",()=>{
    h1s[0].innerHTML=inputs[0].value;
  })

这样只要修改input的值，H1标签就可以实时更新了。

效果如下图所示：

 现在有个问题就是页面初始化或者刷新的时候会出现{{}}里面的变量值，我们可以在页面加载事件的时候把该值置空。代码如下：

  let inputs = document.querySelectorAll("input");
  let h1s = document.querySelectorAll("h1");
  window.onload = ()=>{
    for (let i=0; i<h1s.length; i++) {
        //置空
      h1s[i].innerHTML="";
    }
  }
  inputs[0].addEventListener("input",()=>{
    h1s[0].innerHTML=inputs[0].value;
  })

上面实现并没有跟变量绑定，所以声明一个变量如下：

let data = {
    "title":""
  };

当input的值变化的时候，修改title的值。然后更改H1的标签值

修改监听事件

  inputs[0].addEventListener("input",()=>{
    data.title=inputs[0].value;
    h1s[0].innerHTML=data.title;
  })

这样就实现了数据双向绑定

 使用Proxy优化双向绑定

上面的实现后有一个问题，该变量只跟“唯一”的input进行数据双向绑定了，如果其它逻辑修改了变量值，就不能更新页面了。如下代码所示：

<body>
  显示title：<h1>{{title}}</h1>
  输入title：<input  type="text" v-model="title" />
  <input type="button" value="title+1" />
</body>
  inputs[1].addEventListener("click",()=>{
    data.title+="_1"
  })

当点击新的按钮，title变化后，H1标签并没有变化。所以就要引入Proxy监听对象。

如下修改title的值：

// let data = {"title":""};
let data = new Proxy({"title":""}, {
    get(target, key, receiver) {
        const result = Reflect.get(target, key, receiver)
        console.log('get', key)
        return result; // 返回设置结果
    },
    set(target, key, val, receiver) {
        const result = Reflect.set(target, key, val, receiver)
        console.log('set', key, val)
        // 更新H1标签
        h1s[0].innerHTML = val;
        return result;
    },
    deleteProperty(target, key) {
        const result = Reflect.deleteProperty(target, key)
        console.log('delete property', key)
        return result;
    }
})

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双向数据绑定.v1</title>
</head>

<body>
  显示title：<h1>{{title}}</h1>
  输入title：<input type="text" v-model="title" />
  <input type="button" value="title+1" />
</body>
<script>
  let data = new Proxy({"title":""}, {
    get(target, key, receiver) {
        const result = Reflect.get(target, key, receiver)
        console.log('get', key)
        return result; // 返回设置结果
    },
    set(target, key, val, receiver) {
        const result = Reflect.set(target, key, val, receiver)
        console.log('set', key, val)
        // 更新H1标签
        h1s[0].innerHTML = val;
        return result;
    },
    deleteProperty(target, key) {
        const result = Reflect.deleteProperty(target, key)
        console.log('delete property', key)
        return result;
    }
})

  let inputs = document.querySelectorAll("input");
  let h1s = document.querySelectorAll("h1");
  window.onload = () => {
    for (let i = 0; i < h1s.length; i++) {
      h1s[i].innerHTML = "";
    }
  }
  inputs[0].addEventListener("input", () => {
    data.title = inputs[0].value;
    h1s[0].innerHTML = data.title;
  })
  inputs[1].addEventListener("click", () => {
    data.title += "_1"
  })
</script>

</html>

效果如下图：

动态更新值

上面的方式有很多耦合代码，如果有多个双向绑定就要写一堆代码，所以可以再页面加载的时候遍历双向绑定的属性进行关联。

声明对象存储参数和标签的对应关系以及判断{{}}的正则

var regexp = /^{{.*}}$/
const h1Mapping  = {};

首先页面加载事件遍历所有的H1的{{}}（这里仅以H1展示值）

let h1s = document.querySelectorAll("h1");
......
    for (let index = 0; index < h1s.length; index++) {
      const h1 = h1s[index];
      if(regexp.test(h1.innerHTML)){
        let val = h1.innerHTML;
        // 置空
        h1.innerHTML="";
        h1Mapping[val.replace("{{","").replace("}}","")] = h1 ;
      }
    }

然后遍历所有的input包含v-model的:

let inputs = document.querySelectorAll("input[v-model]");
    for (let index = 0; index < inputs.length; index++) {
      const input = inputs[index];
      input.addEventListener('input', function () {
        let val = input.getAttribute("v-model");
        eval(val += "=" + "'" + this.value + "'");
        // updateDataView();
      })
    }

例如input的标签如下：

v-model="data.title"

值改变的时候就会执行js代码

// data.title 等于 input的值
data.title=val

这样就实现了包含v-model的input的值改变后就会对应更新对象的值；

上面保存了变量值和显示标签的对应关系，新增一个方法更新全部视图，如下：

  function updateDataView(_key) {
    if (_key) {
      if (eval(_key)!= undefined) {
        h1Mapping[_key].innerHTML = eval(_key);
      }
    } else {
      for (const key in h1Mapping) {
        if (eval(key)!= undefined) {
          h1Mapping[key].innerHTML = eval(key);
        }
      }
    }
  }

当input值改变的时候，调用改方法，就可以刷新页面。

然后再Proxy值改变监听哪里更新页面，而不是写固定的第一个H1更新值。

  let data = new Proxy({ "title": "" }, {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver)
      console.log('get', key)
      return result; // 返回设置结果
    },
    set(target, key, val, receiver) {
      const result = Reflect.set(target, key, val, receiver)
      console.log('set', key, val)
      // 更新html
      updateDataView();
      return result;
    },
    deleteProperty(target, key) {
      const result = Reflect.deleteProperty(target, key)
      console.log('delete property', key)
      return result;
    }
  })

HTML代码也更改为调用属性，顺便新增一个name属性,添加一个按钮改变值属性的

显示title：<h1>{{data.title}}</h1>
输入title：<input type="text" v-model="data.title" />
显示name：<h1>{{data.name}}</h1>
输入name：<input type="text" v-model="data.name" />
<input type="button"  value="更改值" onclick="changeValue()" />
  function changeValue(){
    for (const key in data) {
      data[key] = "被改变的值";
    }
  }

运行页面效果如下：

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双向数据绑定.v1</title>
</head>

<body>
  显示title：<h1>{{data.title}}</h1>
  输入title：<input type="text" v-model="data.title" />
  <br />
  显示name：<h1>{{data.name}}</h1>
  输入name：<input type="text" v-model="data.name" />
  <input type="button"  value="更改值" onclick="changeValue()" />

</body>
<script>
  let data = new Proxy({ "title": "" }, {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver)
      console.log('get', key)
      return result; // 返回设置结果
    },
    set(target, key, val, receiver) {
      const result = Reflect.set(target, key, val, receiver)
      console.log('set', key, val)
      // 更新html
      updateDataView();
      return result;
    },
    deleteProperty(target, key) {
      const result = Reflect.deleteProperty(target, key)
      console.log('delete property', key)
      return result;
    }
  })

  var regexp = /^{{.*}}$/
  const h1Mapping = {};
  window.onload = () => {
    let h1s = document.querySelectorAll("h1");
    for (let index = 0; index < h1s.length; index++) {
      const h1 = h1s[index];
      if (regexp.test(h1.innerHTML)) {
        let val = h1.innerHTML;
        // 置空
        h1.innerHTML = "";
        //put 对应关系
        h1Mapping[val.replace("{{", "").replace("}}", "")] = h1;
      }
    }

    let inputs = document.querySelectorAll("input[v-model]");
    for (let index = 0; index < inputs.length; index++) {
      const input = inputs[index];
      input.addEventListener('input', function () {
        let val = input.getAttribute("v-model");
        eval(val += "=" + "'" + this.value + "'");
        updateDataView();
      })
    }
  }

  function updateDataView(_key) {
    if (_key) {
      if (eval(_key)!= undefined) {
        h1Mapping[_key].innerHTML = eval(_key);
      }
    } else {
      for (const key in h1Mapping) {
        if (eval(key)!= undefined) {
          h1Mapping[key].innerHTML = eval(key);
        }
      }
    }
  }


  function changeValue(){
    for (const key in data) {
      data[key] = "被改变的值";
    }
  }
</script>

</html>

苦心明
关注
JS实现双向数据绑定的三种方式
qq_37635012的博客
04-01 512
【代码】JS实现双向数据绑定的三种方式。
js双向数据绑定
m0_60440382的博客
07-21 414
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&gt.
JavaScript数据绑定
舜岳的博客
04-14 577
JavaScript简单的数据绑定 addEventListener()用来监听输入值改变： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>...
JS双向数据绑定的原理介绍
坤小的专栏
11-08 1570
Document 您输入的文本是：{{ msg }} 点我修改文本 <script> function hmVue(obj) { //querySelector默认只会获取满足选择器条件的第一个元素 // vue的挂载点el...
Strve.js实现简单的数据双向绑定
主要领域：前端开发
05-23 320
用过Vue的小伙伴都知道，v-model指令可以实现数据双向绑定。双向绑定除了数据驱动 DOM 外， DOM 的变化反过来影响数据，是一个双向关系。 那么我们今天来用Strve.js来实现一下，不到30行代码。 源码： 效果： Github https://github.com/maomincoding/strve ...
必刷VUE面试题汇总.docx
09-06
Vue 实现数据双向绑定的原理是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。vue 的数据双向绑定 将...
vue面试题汇总 ，包含答案
最新发布
11-27
Vue 实现数据双向绑定的原理是使用 Object.defineProperty() 方法来劫持对象的 setter 和 getter 属性，从而实现数据的双向绑定。 9.Vue 组件间的参数传递 Vue 组件间的参数传递可以通过 props、$emit 和 $on 等...
2023Vue面试题汇总
07-26
- **MVVM**：Model-View-ViewModel架构中，ViewModel作为桥梁，连接Model和View，实现数据的双向绑定。当数据改变，ViewModel会通知View更新；用户操作View时，ViewModel也会更新Model。Vue.js遵循MVVM模式。 - **...
vue面试题汇总.pdf
10-09
- `v-model` 用于实现数据和视图之间的双向绑定，常用于表单元素，如 `<input v-model="value">`。 - 绑定事件：使用 `@` 符号，如 `点击</button>`。 5. **axios**： - axios 是一个基于 promise 的 HTTP 库，...
Vue面试题汇总最新版
06-06
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM，不需要关注数据状态的同步问题，复杂...
js实现数据双向绑定
07-18
数据双向绑定源码
原生JS双向数据绑定实现
07-31
/** *原生JS双向数据绑定实现 *@author wall *@date 2018-06-20 *@desc 实现可配置属性的双向数据绑定 *使用说明: *1.声明全局对象:如 * var test = { * topInfo: { * name:"张三", * age:18, * width:400 * } * }; *2.设置HTML数据绑定标签属性如 * <input data-bind="test.topInfo.name" style-width="test.topInfo.width"/> * * * * *3.在文档加载完成后执行:DataBind.initBind();会将本文档内的所有符合设置的节点进行数据绑定 *4.目前支持的标签:data-show input img div span textarea,后续可配置拓展 * */
JS实现双向绑定的几种方式
带刺玫瑰的博客
12-07 4549
记录JS三种双向绑定 1、第一种是通过Proxy数据代理来达到双向绑定的，这是Vue3更新的双向绑定方式。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Proxy双向绑定</title> </head> <body> <div id="app"> <h3 id=
js中使用Proxy代理实现数据双向绑定
我的个人博客
09-15 587
js 中使用Proxy代理实现数据双向绑定 html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s.
js代理实现双向数据绑定
weixin_43827424的博客
07-06 215
这个是text不绑定: <input type="text" v-model='text' /> <input type="text" v-model='title' /> <input type="text" v-model='title' /> <h4 v-bind="title">这里也会发生更新</h4> "use strict" function View(){ let proxy =
js（ES6）的Proxy介绍，利用Proxy实现的双向绑定
qq_40482342的博客
03-03 784
Proxy是ES6中提供的新的API，可以用来定义对象各种基本操作的自定义行为 .设计思想主要是基于设计模式中的代理模式，如下图：每次获取proxy，这个proxy就会返回对data的浅拷贝，而要对data中的属性进行增删查等操作，也是直接对proxy。通过对整个对象的代理，就避免了访问之前要明确data中有什么属性的这一个过程。这样就实现了一个解耦合的过程，避免了直接操作data对象。
js数据动态绑定
heaven_ck的专栏
10-23 1521
这是以前项目开发中用的JS-AJAX-JSON动态数据绑定databind.js源码// JavaScript Document //定义解析类 function DataBind(){}; //扩展类型 var extend_obj = {}; //给解析类增加变量与方法 DataBind.prototype={     selectList   : new Array(),     radioList    : new Array(),     lineNum      : 0,  
d3.js之数据绑定
hb707934728的博客
02-23 1151
选择元素和绑定数据 Apple Pear Banana var str = "China"; var body = d3.select("body"); var p = body.selectAll("p"); //使用 datum 绑定单个数据
js简单实现数据双向绑定
EchoLiner的博客
03-16 1709
4、inputText的属性值被修改就会触发set函数，然后在set函数中把用户在输入框输入的值赋值给div标签，就可以实现数据双向绑定了。主要通过ES5中的Object.defineProperty实现，利用它的访问器属性特性中的get和set方法就可以实现数据双向绑定。3、监听输入框的oninput事件，把用户输入的值赋值给obj对象的inputText属性，调用set方法。需要实现的数据双向绑定效果是：当在 input 框输入内容时，input 框下方能实时显示输入的内容。
JavaScript实现数据双向绑定：三种方法详解
"本文主要探讨JavaScript实现数据双向绑定的三种常见方法，包括手动绑定、委托事件和使用MVVM框架。" 在前端开发中，数据双向绑定是一个关键特性，它允许视图层和数据层之间的自动同步，使得用户界面能够实时反映...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值