通过input框输入文本,修改页面中由js对象中取得的文本,通过input事件取得输入的数据,并将取得的值赋值给页面获取数据的对象属性。
<h1></h1>
<input type="text" oninput="modifyData(this.value)">
let data = {
msg: 'msg默认值'
}
//获取h1的DOM对象
let h1Dom = document.querySelector('h1')
//插入文本
h1Dom.innerText = data.msg
//修改对象中的数据
function modifyData(v) {
data.msg = v
}
接下来就是实现由input框传入的值修改对象中的msg,完成页面的同步响应。
实现这一步主要使用Object.defineProperty()方法中的get()和set()方法,其中get()方法主要用于定义属性的取值操作拦截回调函数,该函数的返回值为描述属性的取值;set()方法用于定义属性的赋值操作拦截回调函数,通过定义该函数的执行体完成当前属性值的修改,该方法存在一个newValue形参。
let _data = data
data = {}
Object.defineProperty(data, 'msg', {
enumerable: true,
configurable: true,
get() {
return _data.msg
},
set(newValue) {
_data.msg = newValue
h1Dom.innerText = _data.msg
}
})
这就实现了一个简单的响应式功能