1. <!DOCTYPE html>
    2. <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8" />
    5.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    7.         <title>观察者模式</title>
    8.     </head>
    9.     <body>
    10.         <div class="eg2"></div>
    12.         <script>
    13.             // 观察者构造函数
    14.             class Observer {
    15.                 constructor(name, fn = () => {}) {
    16.                     this.name = name;
    17.                     this.fn = fn;
    18.                 }
    19.             }
    21.             // 创建观察者
    22.             const praepostor = new Observer("级长", (state) => {
    23.                 console.log(`因为: ${state}, 你是哪个班的`);
    24.             });
    25.             const teacher = new Observer("老师", (state) => {
    26.                 console.log(`因为: ${state}, 把你爸找来`);
    27.             });
    28.             const principal = new Observer("校长", (state) => {
    29.                 console.log(`因为: ${state}, 骂你的班主任`);
    30.             });
    32.             // 被观察者的构造函数
    33.             class Subject {
    34.                 constructor(state) {
    35.                     // 记录状态
    36.                     this.state = state;
    37.                     // 缓存需要通知被观察者
    38.                     this.observsers = [];
    39.                 }
    41.                 // 设置状态
    42.                 setState(val) {
    43.                     this.state = val;
    44.                     this.observsers.forEach((item) => {
    45.                         item.fn(this.state);
    46.                     });
    47.                 }
    49.                 addObserver(obs) {
    50.                     this.observsers = this.observsers.filter((item) => item !== obs);
    51.                     this.observsers.push(obs);
    52.                 }
    54.                 delObserver(obs) {
    55.                     this.observsers = this.observsers.filter((item) => item !== obs);
    56.                 }
    57.             }
    59.             // 创造一个被观察者
    60.             const zhangsan = new Subject("学习");
    61.             zhangsan.addObserver(praepostor);
    62.             zhangsan.addObserver(teacher);
    63.             zhangsan.addObserver(principal);
    65.             const lisi = new Subject("学习");
    66.             lisi.addObserver(teacher);
    67.             lisi.addObserver(principal);
    69.             console.log(zhangsan);
    70.             console.log(lisi);
    71.         </script>
    72.     </body>
    73. </html>