JS数据绑定实践-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_32368213/article/details/105964877

参考文章：https://www.sellarafaeli.com/blog/native_javascript_data_binding
中文译文：http://www.fly63.com/article/detial/435

正文内容

修改Object.defineProperty()中的set和get方法是其Object的某一属性变化和控件中的值关联起来；
Object.defineProperty().官方解释。
使用语法：
Object.defineProperty(obj, prop, descriptor)
参数：
obj 要定义或绑定属性所属的对象
prop 要定义或绑定的属性的名称或符号
descriptor 定义或修改的属性的描述符

简单训练,将对象data的属性Value绑定至input控件中：

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

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

<body>
    <div>
        <input type="text" id="valueInput" />
        <button onclick="show()">show</button>
    </div>
    <script>
        var data = {};
        bindModelInput(data,'Value',document.getElementById("valueInput"));
     
        function bindModelInput(obj, property, domElem) {
            Object.defineProperty(obj, property, {
                get: function () { return domElem.value; },
                set: function (newValue) { domElem.value = newValue; },
                configurable: true //to enable redefining the property later
            });
        }

        function show() {
            alert(data.Value);
        }
</body>
</html>

效果如下：
演示1
进阶训练: 将json数组对象的属性逐一绑定在table的单元格中

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

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

<body>
    <div>
        <table  border="1">
            <thead>
                <tr>
                    <td>product</td>
                    <td>attr1</td>
                    <td>attr2</td>
                </tr>
            </thead>
            <tbody>
                <tr id='0'>
                    <td>A</td>
                    <td id='attr1'></td>
                    <td id='attr2'></td>
                </tr>
                <tr id='1'>
                    <td>B</td>
                    <td id='attr1'></td>
                    <td id='attr2'></td>
                </tr>
            </tbody>
        </table>
        <button onclick="bind()">绑定</button>
        <button onclick="Reassign()">重新赋值</button>
    </div>
    <script>
        var data = [
            {
                attr1: 1,
                attr2: 'aaa'
            },
            {
                attr1: 2,
                attr2: 'bbb'
            }
        ];

        function bind() {
            for (var i = 0; i < 2; i++) {
                bindModelInput(data[i], 'attr1', document.getElementById(i.toString()).cells['attr1']);
                bindModelInput(data[i], 'attr2', document.getElementById(i.toString()).cells['attr2']);
            }
        }

        function bindModelInput(obj, property, domElem) {
            Object.defineProperty(obj, property, {
                get: function () { return domElem.innerHTML; },
                set: function (newValue) { domElem.innerHTML = newValue; },
                configurable: true  //to enable redefining the property later
            });
        }

        function Reassign() {
            data[0].attr1 = 1;
            data[0].attr2 = 'aaa';
            data[1].attr1 = 2;
            data[1].attr2 = 'bbb';
        }
    </script>
</body>
</html>

效果如下：
演示2
两组演示对比来看，我们要注意以下问题：
1.可以绑定原对象中还不存在的属性；如果绑定的对象的目标属性已存在且已初始化赋值，执行绑定操作后会将初值给覆盖掉；
2. 绑定操作要注意不同控件的取赋值方式的不同，eg:<input>控件可以使用 domElem.value，<td> 控件则使用domElem.innerHTML。
3. 实际业务中单项绑定其实应用更广，可以选择只重写set或get方法，实现单向绑定；