先看個例子，當我們在例子中輸入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>
實現效果：
