关于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…