const model=function(state,element) {
//1、State中的值改变，修改input中的值
// 首次赋值
element.value = https://www.it610.com/article/state.value
//持续拦截state
Object.defineProperty(state,'value',{
get(){
return element.value //这里返回的是element的值，如果写成State会爆栈【不明白】
},//中间要有逗号，否则报错
set(val){
element.value = https://www.it610.com/article/val//是获取到val 赋值给input
}
})
//input中的值改变，修改State中的数据
element.addEventListener('change',function(e){ //写的时候使用element来监听
state.value =https://www.it610.com/article/element.value
})
}
const input = document.createElement('input')
const state = { value: 'BFE' }
model(state, input)console.log(input.value) // 'BFE'
state.value = 'https://www.it610.com/article/dev'
console.log(input.value) // 'dev'
input.value = 'https://www.it610.com/article/BFE.dev'
input.dispatchEvent(new Event('change'))//分发change事件，以便监听到
console.log(state.value) // 'BFE.dev'参考链接 【Day 16/100 手写|DefineProperty实现双向绑定】https://bigfrontend.dev/zh/pr...
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- javascript|javascript中的数据类型转换