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

苦心明2023-08-12 18:14

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

目录

简单实现双向绑定

使用Proxy优化双向绑定

动态更新值

简单实现双向绑定

新建html5模板：

html 复制代码 
<!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用于输入数据

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

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

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

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

效果如下图所示：

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

javascript 复制代码 
  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;
  })

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

javascript 复制代码 
let data = {
    "title":""
  };

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

修改监听事件

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

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

使用Proxy优化双向绑定

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

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

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

如下修改title的值：

javascript 复制代码 
// 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;
    }
})

完整代码如下：

html 复制代码 
<!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>

效果如下图：

动态更新值

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

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

javascript 复制代码 
var regexp = /^{{.*}}$/
const h1Mapping  = {};

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

javascript 复制代码 
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的:

javascript 复制代码 
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的标签如下：

javascript 复制代码 
v-model="data.title"

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

javascript 复制代码 
// data.title 等于 input的值
data.title=val

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

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

javascript 复制代码 
  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更新值。

javascript 复制代码 
  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属性,添加一个按钮改变值属性的

html 复制代码 
显示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()" />
javascript 复制代码 
  function changeValue(){
    for (const key in data) {
      data[key] = "被改变的值";
    }
  }

运行页面效果如下：

完整代码如下：

html 复制代码 
<!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>
相关推荐
智践行几秒前
Trae开发实战之转盘小程序
前端·trae
最新资讯动态7 分钟前
DialogHub上线OpenHarmony开源社区，高效开发鸿蒙应用弹窗
前端
lvbb6616 分钟前
框架修改思路
前端·javascript·vue.js
qq_4560016517 分钟前
43、接口请求需要时间，导致页面初始加载时会出现空白，影响用户体验
javascript·vue.js·ux
工业互联网专业18 分钟前
基于springboot+vue的动漫交流与推荐平台
java·vue.js·spring boot·毕业设计·源码·课程设计·动漫交流与推荐平台
树上有只程序猿18 分钟前
Java程序员需要掌握的技术
前端
从零开始学安卓21 分钟前
Kotlin(三) 协程
前端
try again！24 分钟前
rollup.js 和 webpack
开发语言·javascript·webpack
阿镇吃橙子25 分钟前
一些手写及业务场景处理问题汇总
前端·算法·面试
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑05苍穹外卖面试总结06DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具07RAG 实践- Ollama+RagFlow 部署本地知识库08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09如何本地部署AI智能体平台，带你手搓一个AI Agent10循环神经网络RNN（含LSTM，GRU）小综述