阅读 1292

原生js双向数据绑定

前面我们介绍过存储器属性(重新认识javascript对象(一)——对象及其属性),以及如何用Object.defineProperty()定义一个存储器属性,今天我们介绍如何用Object.defineProperty()实现双向数据绑定。

我们知道一个存储器属性有四个属性描述符:get,set,configurable,enumerable。我们来复习一下如何创建一个存储器属性:

var user = {
    name: ''
}
Object.defineProperty(user, 'nickname', {
    configurable: true,
    enumerable: true,
    get: function() {
        return this.name
    },
    set: function(value) {
        this.name = value
    }
})
复制代码

以上代码我们给user创建了一个名为nickname的存储器属性。

接下来我们改写getset,让它们与DOM绑定,并实现双向数据绑定,以下为具体实现的伪代码:

<input type="text" id="foo">

<script>
    var user = {}
    Object.defineProperty(user, 'inputValue', {
        configurable: true,
        get: function() {
            return document.getElementById('foo').value
        },
        set: function(value) {
            document.getElementById('foo').value = value
        }
    })
</script>
复制代码

我们打开控制台,改变user.inputValue的值,会发现input输入框里的值也发生变化;同样我们在input输入框里面输入值,在控制台打印user.inputValue,会发现user.inputValue也发生了变化。这样我们就实现了双向的数据绑定。

如果多个DOM绑定同一个数据,我们可以监听input输入框的keyup事件,只要触发了keyup事件我们就把user.inputValue的值赋给另一个DOM,具体实现如下:

<input type="text" id="foo">
<p id="test"></p>

<script>
    var user = {}
    Object.defineProperty(user, 'inputValue', {
        configurable: true,
        get: function() {
            return document.getElementById('foo').value
        },
        set: function(value) {
            document.getElementById('foo').value = value
            document.getElementById('test').innerHTML = value
        }
    })
    document.getElementById('foo').addEventListener('keyup',function() {
        document.getElementById('test').innerHTML = user.inputValue
    })
复制代码

最后附上源码图片

思考:其实实现双向数据绑定并不一定要用Object.defineProperty(),其主要是运用存储器属性的get和set,以下代码也可以实现双向数据绑定:

<input type="text" id="foo">
<p id="test"></p>

<script>
    var user = {
      get inputValue() { 
        return document.getElementById('foo').value
      },
      set inputValue(value) {
        document.getElementById('foo').value = value
        document.getElementById('test').innerHTML = value
      }
    }
    document.getElementById('foo').addEventListener('keyup',function() {
      document.getElementById('test').innerHTML = user.inputValue
    })
</script>
复制代码
关注下面的标签,发现更多相似文章
评论