关于javascript:Day-16100-手写DefineProperty实现双向绑定

const model=function(state,element) {
    //1、State 中的值扭转，批改 input 中的值
    // 首次赋值
    element.value = state.value
    // 继续拦挡 state
    Object.defineProperty(state,'value',{get(){return element.value // 这里返回的是 element 的值，如果写成 State 会爆栈【不明确】},// 两头要有逗号，否则报错
        set(val){element.value = val// 是获取到 val 赋值给 input}
    })
    //input 中的值扭转，批改 State 中的数据
    element.addEventListener('change',function(e){ // 写的时候应用 element 来监听
        state.value =element.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'))// 散发 change 事件，以便监听到
console.log(state.value) // 'BFE.dev'

参考链接

https://bigfrontend.dev/zh/pr…