![在這裏插入圖片描述]()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.active{
color: red;
}
</style>
</head>
<body>
<div class="container">
<h3>todo</h3>
<input type="text">
<div class="boxs">
</div>
</div>
</body>
<script type="text/javascript">
class Input{
constructor(el) {
this.observers = []
el.addEventListener('input',(e)=>{
this.notifyAll(e.target.value);
})
}
notifyAll(value) {
this.observers.forEach(item => {
item.notify(value)
})
}
addObserver(obj) {
this.observers.push(obj)
}
}
class Observer extends DocumentFragment{
constructor(t) {
super(t);
this.div = document.createElement('div')
this.div.className = 'box'
this.div.innerHTML = t
document.querySelector('.boxs').append(this.div)
}
notify(v) {
this.div.classList.toggle('active',this.handle(v))
}
}
class DefaultObserver extends Observer{
constructor(t) {
super(t);
this.t = t;
}
handle(v) {
return v.indexOf(this.t)!=-1;
}
}
class NumberObserver extends Observer{
constructor(t) {
super(t);
this.t = t;
}
handle(v) {
return /\d/.test(v)
}
}
const ipt = new Input(document.querySelector('input'));
ipt.addObserver(new DefaultObserver('A'));
ipt.addObserver(new DefaultObserver('B'));
ipt.addObserver(new DefaultObserver('C'));
ipt.addObserver(new NumberObserver('包含數字'));
</script>
</html>
