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

36次阅读

共计 688 个字符,预计需要花费 2 分钟才能阅读完成。

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…

正文完
 0