30行JS代码搞定前端双向数据绑定，最简版本

在前端开发过程中，如果项目不大，或者有需要使用到双向数据场景的简单页面，完全不需要使用vuejs之类的第三方库。
下面分享一个简介的双向数据绑定js代码。代码只要30+行，直接复制到您项目中即可使用。

给需要双向绑定的元素设置 bind-data 属性，属性值为数据对象的属性名，即可将该元素与数据对象的相应属性进行绑定。
使用示例：

<input type="number" type="text" bind-data="text1" />
<p bind-data="text1">默认值</p>



<script>
....,

//使用js动态修改，对应字段会自动更新
data.text1= '123';//新值

....,
</script>

测试：

HTML代码

绑定数据进行回调：
使用示例：

  <div>单价：<input type="number" type="text" bind-data="price" /></div>
  <div>数量：<input type="number" type="text" bind-data="quantity" /></div>
  <div>总价：<span bind-fun="totalPrice">0</span></div>



<script>
function totalPrice(){
    //this指向数据对象
    return this.price * this.quantity;
}
</script>

测试：

HTML代码

下面是实现双向绑定代码：

let data = new Proxy({}, {  
  set(obj, key, value) {  
    obj[key] = value;  
    const dataElements = document.querySelectorAll(`[bind-data="${key}"]`);  
    const funcElements = document.querySelectorAll("[bind-fun]");  
  
    dataElements.forEach((element) => {  
      element instanceof HTMLInputElement ? (element.value = value) : (element.innerText = value);  
    });  
  
    if (funcElements.length > 0) {  
      funcElements.forEach((element) => {  
        const funcName = element.getAttribute("bind-fun");  
        if (typeof window[funcName] !== "function") return;  
        const func = window[funcName].bind(obj);  
        const val = func() || "";  
        element instanceof HTMLInputElement ? (element.value = val) : (element.innerText = val);  
      });  
    }  
    return true;  
  },  
  get(obj, key) {  
    return obj[key];  
  },  
});
document.addEventListener("input", function (event) {  
  if (!event.target.hasAttribute("bind-data")) return;  
  data[event.target.getAttribute("bind-data")] = event.target.value;  
});