javacript双向绑定小demo_双屏互动 javacript-优快云博客

本文深入探讨了双向绑定的基本原理，通过一个简单的HTML与JavaScript示例，展示了如何使用Object.defineProperty函数实现输入框与页面元素之间的实时同步更新。这是理解如Vue.js等现代前端框架核心机制的关键。

双向绑定基本原理学习：
一.先上个简单的双向绑定的小例子，如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>极简响应绑定</title>
    </head>
    <body>
        <div>
            <input type="text" name="" id="a" value="" />
            <span id='b'></span>
        </div>
    </body>
</html>
<script>
    var obj={};
    Object.defineProperty(obj,'hello',{
        set:function(newVal){
            document.getElementById('a').value=newVal;
            document.getElementById('b').innerHTML=newVal;

        }

    })
    document.addEventListener('keyup',function(e){
        obj.hello =e.target.value;
    })
</script>

关键函数：Object.defineProperty 函数，将属性添加到对象，或者修改现有属性。
vue.js是通过它实现双向绑定的。

语法
Object.defineProperty(object, propertyname, descriptor)

2.参数
object 必需。要在其上添加或修改属性的对象。这可能是一个本机 JavaScript 对象（即用户定义的对象或内置对象）或 DOM 对象。
propertyname 必需。一个包含属性名称的字符串。
descriptor 必需。属性描述符。它可以针对数据属性或访问器属性。

3.返回值
已修改对象。

4.备注
可使用 Object.defineProperty 函数来执行以下操作：向对象添加新属性。当对象不具有指定的属性名称时，发生此操作。修改现有属性的特性。当对象已具有指定的属性名称时，发成此操作。描述符对象中会提供属性定义，用于描述数据属性或访问器属性的特性。描述符对象是 Object.defineProperty 函数的参数。若要向对象添加多个属性或修改多个现有属性，可使用 Object.defineProperties 函数 (JavaScript)。

5.异常
如果以下任一条件为 true，则引发 TypeError 异常：
object 参数不是对象。
此对象不可扩展且指定的属性名称不存在。
descriptor 具有 value 或 writable 特性，并且具有 get 或 set 特性。
descriptor 具有 get 或 set 特性，上述特性不是函数且已定义。
指定的属性名称已存在，现有属性具有 false 的 configurable 特性，且 descriptor 包含一个或多个与现有属性中特性不同的特性。但是，当现有属性具有 false 的 configurable 特性和 true 的 writable 特性时，则允许 value 或 writable 特性不同。