直接利用data-name来绑定某一个对象的名字
直接贴代码，bug肯定是有bug，主要是为了我自己看和学习，顺便分享出来一下
运行的效果如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div data-name="name"></div>
<div data-name="age"></div>
<div><span>姓名</span><input data-name="name" type="text"></div>
<div><span>年龄</span><input data-name="age" type="text"></div>
<div>
<button onclick="getData()">点我</button>
</div>
<textarea data-name="content"></textarea>
</body>
<script>
const
PROPS_KEY_NAME = 'name',
data = {
name: '小蓝',
age: '21',
content: '啦啦啦啦'
},
mElement = {}
// 把data里面的全部键名给整到一个变量里面，用于接下来的元素绑定事件的归类
for (let key in data) mElement[key] = []
Array.from(document.all).forEach(el => {
// 在全部元素中筛选拥有data-name的元素
const mKeys = Object.keys(el.dataset).map(item => el.dataset[PROPS_KEY_NAME])
if (mKeys.length === 0) return
el.value = el.innerText = data[el.dataset[PROPS_KEY_NAME]]
// 给元素们归一个类
mElement[mKeys].push(el)
})
for (let key in mElement) {
Object.defineProperty(data, key, {
set(e) {
// 拿一个临时的值来存储
this[`_${key}`] = e
// 给区分出来的元素赋予值，没区分输入框这些的，都是懒惯的
mElement[key].forEach(item => item.value = item.innerText = e)
},
get() {
// 拿一个临时的值来返回
return this[`_${key}`]
}
})
// 给这些元素绑定一个输入的事件，由于输入的事件不是全都有，所以凑合着看
mElement[key].forEach(item => item.oninput = ({ target }) => data[target.dataset[PROPS_KEY_NAME]] = target.value)
}
function getData() {
console.log(data.content)
}
</script>
</html>
496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
