长期以来，对设计模式中的观察着模式一直都是不甚理解，直到今天在B站上面看到一个7分钟左右的视频，突然有种大彻大悟的感觉。点击链接
可以观看视频。下面我就将视频中的内容记录下来。
一、原先项目实现新需求的困扰
需求是这样的，如下图，有一个输入框和一块显示条目的框。当在输入框中输入的内容包含字母a，下面的包含A就会高亮，当输入当在输入宽中输入的内容包含字母b，包含B就会高亮。
image.png
当然，实现这样的功能其实很简单，无非就是监听input框的input事件，然后根据值来让对应的模块高亮。代码截图如下.
image.png
首先，这个代码完全是ok的，但产品经理再给你一个需求当文本框中输入的内容包含数字，在下面的区块中增加一个条块，显示包含数组。具体显示如下图：
增加后功能
当然，最简单的办法就是粘贴复制，但是当这样的需求一直增加的时候，这不是最优雅的解决方案，此外，这也违背了我们软件工程中的“对修改关闭，对扩展开放”的原则。我们仔细分析这个需求，区块2中的显示个数是不固定的，它们会随着区块1输入框中输入的内容进行状态的改变。显然这跟我们设计模式中的观察者模式的实现特别像，对象之间存在一对多的关系。所以我们可以用观察者模式实现上面的功能。
二、使用观察者模式重新构建项目
当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知依赖它的对象。观察者模式属于行为型模式。下面我们就来逐行分解观察者模式的过程。
1、创建观察者维护类
创建Input类，用于维护所有的观察着，并把文本框输入文本的变化通知给所有的观察者。
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)
}
}
2、创建观察者基类
class Observer extends DocumentFragment{
constructor(txt){
super()
this.div = document.createElement('div')
this.div.className = 'box'
this.div.innerText = txt
document.querySelector('.boxs').append(this.div)
}
notify(value){
this.div.classList.toggle("active", this.handle(value))
}
}
3、创建各个具体的观察者类
默认观察者
class defaultObserver extends Observer {
constructor(txt){
super(txt)
this.txt = txt
}
handle(value){
return value.indexOf(this.txt) !== -1
}
}
数字观察者
class numberObsever extends Observer{
constructor(txt){
super(txt)
}
handle(value){
return /\d/.test(value)
}
}
4、具体的使用
const ipt = new Input(document.querySelector("input"))
ipt.addObserver(new defaultObserver("a"))
ipt.addObserver(new defaultObserver("b"))
ipt.addObserver(new numberObsever("a"))
从上面的代码中可以看出，观察者模式解决的就是对象想之间一对多的问题。我们在Input类中管理观察者，并且接听改变，并通知给所有的观察者。具体的实现细节，请你仔细琢磨一下。下面是完整的代码：
<input type="text">
<div class="boxs"></div>
<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(obj){
this.observers.push(obj)
}
}
class Observer extends DocumentFragment{
constructor(txt){
super()
this.div = document.createElement('div')
this.div.className = 'box'
this.div.innerText = 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 numberObsever extends Observer{
constructor(txt){
super(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 numberObsever("a"))
</script>
网友评论