BFE.dev
JavaScript 代码题154. 简单实现双向绑定Two-way bindingAI解答
以下为ChatGPT自动生成的解答，正确与否请自行判断。 也许你也可以从大家的发帖中找到想要的答案！

BFE.devAI解答 - JavaScript 代码题
154. 简单实现双向绑定Two-way binding

实现思路：

  1. 使用Object.defineProperty()方法监听state.value的变化，并在变化时更新element的value值。
  2. 监听element的change事件，使得当input的值发生变化时，更新state.value的值。

代码实现如下：

function model(state, element) {
  Object.defineProperty(state, 'value', {
    get() {
      return element.value
    },
    set(newValue) {
      element.value = newValue
      element.dispatchEvent(new Event('change'))
    }
  })

  element.addEventListener('change', function() {
    state.value = element.value
  })

  element.value = state.value
}

测试代码如下：

const input = document.createElement('input')
const state = { value: 'BFE' }
model(state, input)

console.log(input.value) // 'BFE'
state.value = 'dev'
console.log(input.value) // 'dev'
input.value = 'BFE.dev'
input.dispatchEvent(new Event('change'))
console.log(state.value) // 'BFE.dev'

输出结果与题目要求一致，说明实现成功。