<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1 data-on="title"></h1>
<span data-on="message"></span>
<div>
<input i-moudle="title" type="text">
</div>
<input i-moudle="message" type="text">
<script>
class Reactive {
constructor(obj) {
let _data = obj.data;
this.observe = this.createObserve(_data);
this.defineDescribe(_data)
}
createObserve(data) {
return {
watchers: [],
emit(key, value) {
this.watchers[key].forEach(cb => cb(value))
},
subscribe(key, value) {
document
.querySelectorAll(`[data-on=${key}]`)
.forEach(item => {
let cb = text => item.innerHTML = text;
cb(value);
if (this.watchers[key]) {
this.watchers[key].push(cb)
} else {
this.watchers[key] = [cb];
}
})
document
.querySelectorAll(`[i-moudle=${key}]`)
.forEach(item => {
item.addEventListener('input', e => {
data[key] = e.target.value;
})
let cb = text => item.value = text;
cb(value)
if (this.watchers[key]) {
this.watchers[key].push(cb)
} else {
this.watchers[key] = [cb];
}
})
}
}
}
defineDescribe(data) {
for (let key in data) {
let value = data[key];
Object.defineProperty(data, key, {
get() {
return value;
},
set: (_value) => {
value = _value;
this.observe.emit(key, value)
}
})
this.observe.subscribe(key, value);
}
return data
}
}
new Reactive({
data: {
title: 'hello world',
message: '你吗好'
}
})
</script>
</body>
</html>