- 技术
- js#原生#观察者模式案例
<!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
>
Processed:
0.008, SQL:
9
