Нативная двусторонняя привязка данных js

внешний интерфейс JavaScript

Ранее мы ввели свойства памяти (Повторное распознавание объектов javascript (1) - объекты и их свойства), и как использовать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свойства хранения.

Далее мы переписываемgetа такжеset, пусть совпадаютDOMBinding и реализовать двустороннюю привязку данных, ниже приведен псевдокод конкретной реализации:

<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>
Категории