先看个例子，当我们在例子中输入a时，包含a区块会高亮显示，输入b时，b包含b的区块会高亮显示。
代码：
比如，现在我们有个需求，添加一个包含数字的区块让它高亮显示，如果实现也是以同样的方法，就需要在原有的代码上进行修改,每次的需求都要在源代码上进行修改，这是无休止的修改。这就违背了面向对象的开闭原则，对扩展开放，对修改关闭，因为对新需求的增加不应该在源代码的基础上进行修改，应该通过扩展类的方式进行扩展，具体实现如下所示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./new_file.css" />
</head>
<body>
<div id="container">
<h3>面向对象之观察者模式</h3>
<input type="text"/>
<div class="boxs">
</div>
</div>
</body>
<script>
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(ob){
this.observers.push(ob);
}
}
class observer extends DocumentFragment {
constructor(txt) {
super();
this.txt = txt;
this.div = document.createElement("div");
this.div.className = "box";
this.div.innerHTML = txt;
document.querySelector(".boxs").append(this.div);
}
notify(value){
this.div.classList.toggle("active", this.handle(value));
}
}
class defaultObserver extends observer {
constructor(txt) {
super(txt);
this.txt = txt;
}
handle(value){
return value.indexOf(this.txt) != -1;
}
}
class numberObserver extends observer {
constructor(txt) {
super(txt);
this.txt = txt;
}
handle(value){
return /\d/.test(value);
}
}
const ipt = new input(document.querySelector("input"));
ipt.addObserver(new defaultObserver("a"));
ipt.addObserver(new defaultObserver("b"));
ipt.addObserver(new numberObserver("包含数字"));
</script>
</html>
实现效果：
