JavaScript设计模式之观察者模式

观察者模式，属于行为型模式的一种，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时，会通知所有的观察者对象，使他们能够自动更新自己。

案例阐释

<script>

    class People {
        constructor(name, age, level) {
            this.name = name;
            this.age = age;
            this.level = level;
            this.subs = [];//这个小本本记录了所有订阅自己的人
        }
        subscribe(target, fn) { //订阅
            //target订阅的目标
            //fn 是需求(及时收到最新的up视频)
            console.log(this.name + "等级:" + this.level + ' 订阅了up主' + target.name);
            // fn要指向定订阅者
            fn = fn.bind(this); //改变this的指向，因为如果没有这行代码，则fn指向的是window
            target.subs.push(fn)
        }
        publish(video) { //发布
            //找到所有订阅自己的人,然后全部通知
            this.subs.forEach(fn => { //forEach表示遍历数组，因为subs存储的为一个数组
                fn(video)
            })
        }
    }

    let x = new People("许超", 23, '最强青铜');//实例化

    let zhi = new People('智慧', 66, '荣耀白银');//实例化

    let zhu = new People('朱宇', 37, '璀璨黄金');//实例化

    let yu = new People('天宇', 34, '至尊黑铁')//实例化


    x.subscribe(zhi, function (video) { //x订阅了zhi，此处x.subscribe(zhi,function(){})表示的是,x调用了上面的订阅方法：subscribe(target, fn) zhi传给了target，function(video){}传给了fn
        // console.log(this);
        if (video === "US") {
            console.log(this.name + '说:真好看')//此处的this指向的是调用订阅的人，即x
        } else {
            console.log(this.name + '口吐芬芳')
        }
    })

    x.subscribe(zhu, function (msg) { //x订阅了zhud 的msg,subscribe(target, fn) zhu传给了target，function(video){}传给了fn
        if (msg === "带码") {
            console.log(this.name + "口吐芬芳")
        } else {
            console.log(this.name + '说:真好看')
        }
    })

    zhu.subscribe(zhi, function (video) {//zhu也订阅了zhi,subscribe(target, fn) zhi传给了target，function(video){}传给了fn
        if (video === "animate") {
            console.log(this.name + '说:动画好看');
        } else {
            console.log(this.name + '说:口吐芬芳');
        }
    })

    zhi.subscribe(zhu, function (msg) { //zhu也订阅了zhi 的video
        console.log(this.name + "收到了:" + msg);
    })

    zhu.publish('带码');//表示zhu发布了一个信息 带码，然后x打印口吐芬芳，zhi 打印 智慧收到了:带码
   zhi.publish('US');//表示zhi发布了一个信息US，然后许超说:真好看  朱宇说:口吐芬芳
</script>