长期以来，对设计模式中的观察着模式一直都是不甚理解，直到今天在B站上面看到一个7分钟左右的视频，突然有种大彻大悟的感觉。点击链接
可以观看视频。下面我就将视频中的内容记录下来。

一、原先项目实现新需求的困扰

       需求是这样的，如下图，有一个输入框和一块显示条目的框。当在输入框中输入的内容包含字母a，下面的包含A就会高亮，当输入当在输入宽中输入的内容包含字母b，包含B就会高亮。

image.png

image.png

       首先，这个代码完全是ok的，但产品经理再给你一个需求当文本框中输入的内容包含数字，在下面的区块中增加一个条块，显示包含数组。具体显示如下图：

增加后功能

二、使用观察者模式重新构建项目

       当对象间存在一对多关系时，则使用观察者模式（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>