概要
使用Object.defineProperty和html dom实现。
技术细节
<html>
<div id=d2>
<p>666</p>666
</div>
<p id="p2">666</p>
<input id="i2" value='666' />
<script>
Object.prototype.bindDom = function(key, dom) {
//针对不同dom，刷新不同方式input->value
Object.defineProperty(this, key, { //绑定对象，对象属性值改变刷新dom
get() {
console.log(this[key + '_2'])
return this[key + '_2']; //_2这里不完美
},
set(value) {
if (dom && dom.nodeName != 'INPUT') {
dom.innerHTML = value;
}
if (dom && dom.nodeName == 'INPUT') {
dom.value = value;
}
//console.log(dom)
this[key + '_2'] = value;
console.log('set ' + value)
}
});
//绑定dom
if (dom.nodeName == 'INPUT') { //input标签
dom.addEventListener('input', function(value) {
this[key + '_2'] = dom.value;
console.log('属性值修改为：', dom.value);
});
}
console.log(key + '已注册bindDom函数!');
};
var a = {
name: 3,
}
//多次绑定只有最后的生效
//a.bindDom('name',document.getElementById('p2'));
a.bindDom('name', document.getElementById('i2'));
//a.bindDom('name', document.getElementById('d2'));
</script>
</html>
小结
本代码可以刷新input标签和纯文本标签，对于其他标签未进行适配处理。
126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
