使用object.defineProperties实现简单的双向绑定

html

<input type="text" id="inputs">
<span id="spans"></span>

script

<script>
    var values = {};
    let inputs = document.getElementById('inputs');
    let spans = document.getElementById("spans");
    var vales = {}
    Object.defineProperties(vales, {
        vales: {//半隐藏
            _vales: 25,//实际存储值
            writable: true,
            enumerable: false,//半隐藏
            configurable: false,
            extensible: false
        },
        vales: { //第一个保镖,帮助用户去属性中去取值
            get: function () {
                return this._vales
            }, //第二个保镖帮助,判断然后去存值
            set: function (vales) {
                //满足条件将新值送回属性中
                this._vales = vales;
                spans.innerHTML = vales;
            },
            enumerable: true,//代替受保护的属性，抛投露面
            configurable: false//不能删除保镖
        }
    });
    Object.preventExtensions(vales)
    Object.seal(vales)
    inputs.oninput = function () {
        var _this = this;
        vales.vales = _this.value
    }
</script>