5分钟通过一个例子理解观察者模式和发布订阅模式的区别

前几天在一个群里闲聊的时候，有一个人问：观察者模式和发布订阅模式到底有什么区别？

虽然平时用的 vue、redux、node 或多或少会涉及到这两个模式，但是却没有怎么深入思考过它们两者的区别。

于是我开始思考这个问题。

两个模式之间的区别

关于这两个模式之间的特点，hackernoon 有一篇文章分析的很好。

掘金上也有它的翻译

总之，它俩最显著的区别就是观察者模式中观察者和被观察者是互相知道对方的存在的，而在发布订阅模式中是不知道的。

由内推流程得到启发

最近我司刚好开启了校招，我也领了一个内推码：XGBU3Z8。突然发现我司的社招内推就是一个观察者模式，而校招内推是一个发布订阅模式。

字节跳动校招链接

这从何说起呢？社招内推是需要求职者将简历给员工的，然后员工去内推系统新建内推。在这个过程中，内推者和求职者是需要知道彼此的存在的，当求职状态发生变化时，内推者可以及时告知求职者。

而校招内推是员工发布一个内推码，然后哪个应届生看见了内推码就可以自行进行投递。员工和应届求职者之间理论上是不知道互相的存在的，他们只知道内推码的存在。

社招内推

class JobFinder {
    constructor(id, job) {
        this.id = id;
        this.job = job;
        this.status = null;
    }

    subscribe(employee) {
        employee.jobFinderList.push(this);
    }

    unsubscribe(employee) {
        employee.jobFinderList = employee.jobFinderList.filter(person => person.id !== this.id)
    }

    update(status) {
        this.status = status;
        console.log(this.id + '知道自己求职状态变更为：' + status);
    }
}

class Employee {
    constructor() {
        this.jobFinderList = [];
    }

    recommend(JobFinder) {
        JobFinder.subscribe(this);
    }

    notify(message) {
        this.jobFinderList.forEach(person => {
            const target = message.find(m => m.id === person.id)
            if (target) person.update(target.status);
        })
    }
}

var me = new Employee();

var zs = new JobFinder('张三', '前端工程师');
var ls = new JobFinder('李四', '后端工程师');

// 内推张三和李四
me.recommend(zs);
me.recommend(ls);

// 通知他们
setTimeout(() => {
    me.notify([
        { id: '张三', status: '简历评估中' }
    ]);
}, 1000)

setTimeout(() => {
    me.notify([
        { id: '张三', status: '面试中' }
    ]);
}, 500)

setTimeout(() => {
    me.notify([
        { id: '张三', status: 'offer' },
        { id: '李四', status: '简历评估中' }
    ]);
}, 2000)

我们定义一个求职者 JobFinder 类，再定义一个员工 Employee 类。

这时有张三和李四这两个求职者需要找工作，然后我内推了他们两个，过了一段时间后我通知他们求职状态发生变更。

在这个内推过程中，我必须要拿到他们的简历，获取和他们有关的信息，比如意向岗位等。

当然，这个例子很简单，还可以加一些逻辑，比如面试挂了后就 unsubscribe 之类的。

校招内推

// 内推系统
const recommendSystem = document;

class Employee {
    constructor() {
        // 内推码
        this.recommendCode = 'XGBU3Z8';
        this.recommendEvent = new CustomEvent(this.recommendCode)
    }

    notify(message) {
        this.recommendEvent = new CustomEvent(this.recommendCode, { detail: message });
        recommendSystem.dispatchEvent(this.recommendEvent)
    }
}

class JobFinder {
    constructor(id, job) {
        this.id = id;
        this.job = job;
    }

    submitResume(recommendCode) {
        recommendSystem.addEventListener(recommendCode, this.update.bind(this));
    }

    update(event) {
        const target = event.detail.find(m => m.id === this.id);
        if (target) console.log(this.id + '知道自己求职状态变更为：' + target.status);
    }
}

var me = new Employee();

var zs = new JobFinder('张三', '前端工程师');
var ls = new JobFinder('李四', '后端工程师');

// 通过内推码投简历
zs.submitResume('XGBU3Z8');
ls.submitResume('XGBU3Z8');

// 通知他们
setTimeout(() => {
    me.notify([
        { id: '张三', status: '简历评估中' }
    ]);
}, 1000)

setTimeout(() => {
    me.notify([
        { id: '张三', status: '面试中' }
    ]);
}, 500)

setTimeout(() => {
    me.notify([
        { id: '张三', status: 'offer' },
        { id: '李四', status: '简历评估中' }
    ]);
}, 2000)

这段代码中同样有一个求职者和员工类。但多了个内推系统作为我们的事件通道。

这时张三和李四找工作已经不需要我去操心了，我只需要在他们求职状态变更时及时通知他们就可以了。

甚至我也不需要通知他们，而是由内推系统通知他们：

recommendSystem.dispatchEvent(new CustomEvent('XGBU3Z8', { detail: [
    { id: '张三', status: 'offer' },
    { id: '李四', status: '简历评估中' }
]}));

结语

欢迎各位读者耐心读完这篇文章~如果身边有应届生在找工作，欢迎使用我的内推码 XGBU3Z8 ~

当然，我手上还有一个白金内推码，可以直通面试那种，如果读者中有对自己能力足够自信的应届生，欢迎私聊我索要~