工作中如何巧妙的使用發(fā)布訂閱模式

let corp = {};   // 自定義一個(gè)公司對象// 這里放一個(gè)列表用來緩存回調(diào)函數(shù)corp.list = [];// 去訂閱事件corp.on = function (fn) {    // 二話不說，直接把fn先存到列表中    this.list.push(fn);};// 發(fā)布事件corp.emit = function () {    // 當(dāng)發(fā)布的時(shí)候再把列表里存的函數(shù)依次執(zhí)行    this.list.forEach(cb => {        cb.apply(this, arguments);    });};// 測試用例corp.on(function (position, salary) {    console.log('你的職位是：' + position);    console.log('期望薪水：' + salary);});corp.on(function(skill, hobby) {    console.log('你的技能有：' + skill);    console.log('愛好：' + hobby);});
corp.emit('前端', 10000);corp.emit('端茶和倒水', '足球');/*    你的職位是：前端    期望薪水：10000    你的技能有：前端    愛好：10000    你的職位是：端茶和倒水    期望薪水：足球    你的技能有：端茶和倒水    愛好：足球*/?

/*    你的職位是：前端    期望薪水：10000        你的技能有：端茶和倒水    愛好：足球*/

let corp = {};// 這次換成一個(gè)對象類型的緩存列表corp.list = {};
corp.on = function(key, fn) {    // 如果對象中沒有對應(yīng)的key值    // 也就是說明沒有訂閱過    // 那就給key創(chuàng)建個(gè)緩存列表    if (!this.list[key]) {        this.list[key] = [];    }    // 把函數(shù)添加到對應(yīng)key的緩存列表里    this.list[key].push(fn);};corp.emit = function() {    // 第一個(gè)參數(shù)是對應(yīng)的key值    // 直接用數(shù)組的shift方法取出    let key = [].shift.call(arguments),        fns = this.list[key];    // 如果緩存列表里沒有函數(shù)就返回false    if (!fns || fns.length === 0) {        return false;    }    // 遍歷key值對應(yīng)的緩存列表    // 依次執(zhí)行函數(shù)的方法    fns.forEach(fn => {        fn.apply(this, arguments);    });};
// 測試用例corp.on('join', (position, salary) => {    console.log('你的職位是：' + position);    console.log('期望薪水：' + salary);});corp.on('other', (skill, hobby) => {    console.log('你的技能有：' + skill);    console.log('愛好：' + hobby);});
corp.emit('join', '前端', 10000);corp.emit('join', '后端', 10000);corp.emit('other', '端茶和倒水', '足球');/*    你的職位是：前端    期望薪水：10000    你的職位是：后端    期望薪水：10000    你的技能有：端茶和倒水    愛好：足球*/

let event = {    list: {},    on(key, fn) {        if (!this.list[key]) {            this.list[key] = [];        }        this.list[key].push(fn);    },    emit() {        let key = [].shift.call(arguments),            fns = this.list[key];
        if (!fns || fns.length === 0) {            return false;        }        fns.forEach(fn => {            fn.apply(this, arguments);        });    },    remove(key, fn) {        // 這回我們加入了取消訂閱的方法        let fns = this.list[key];        // 如果緩存列表中沒有函數(shù)，返回false        if (!fns) return false;        // 如果沒有傳對應(yīng)函數(shù)的話        // 就會(huì)將key值對應(yīng)緩存列表中的函數(shù)都清空掉        if (!fn) {            fns && (fns.length = 0);        } else {            // 遍歷緩存列表，看看傳入的fn與哪個(gè)函數(shù)相同            // 如果相同就直接從緩存列表中刪掉即可            fns.forEach((cb, i) => {                if (cb === fn) {                    fns.splice(i, 1);                }            });        }    }};
function cat() {    console.log('一起喵喵喵');}function dog() {    console.log('一起旺旺旺');}
event.on('pet', data => {    console.log('接收數(shù)據(jù)');    console.log(data);});event.on('pet', cat);event.on('pet', dog);// 取消dog方法的訂閱event.remove('pet', dog);// 發(fā)布event.emit('pet', ['二哈', '波斯貓']);/*    接收數(shù)據(jù)    [ '二哈', '波斯貓' ]    一起喵喵喵*/

// 省略....render() {    // 我只在渲染的時(shí)候    // 把約定好的key和他需要的page頁碼傳過去就可以了    event.emit('soAd', page);}// 省略...

// main.jsrender() {    // 省略...    // 當(dāng)渲染到頁面的時(shí)候，發(fā)送這個(gè)打點(diǎn)事件    // 然后另外的一個(gè)專門負(fù)責(zé)打點(diǎn)的模塊里去監(jiān)聽    event.emit('relatedDD', 'related');}
// log.jsevent.on('relatedDD', type => {    console.log(type);  // 'related'        // monitor是個(gè)打點(diǎn)工具，由超級大牛開發(fā)    monitor.log({        type        }, 'disp');});

/ {'失戀',  [findboy, drink]}// 監(jiān)聽的目的 就是為了構(gòu)造這樣一個(gè)對象 一對多的關(guān)系    on
// 發(fā)布的時(shí)候 會(huì)讓數(shù)組的函數(shù)依次執(zhí)行    emit// [findboy, drink]
// let EventEmitter = require('events');// 這里用接下來我們寫的let EventEmitter = require('./events');let util = require('util');
function Girl() {}// Girl繼承EventEmitter上的方法util.inherits(Girl, EventEmitter);  // 相當(dāng)于Girl.prototype.__proto__ = EventEmitter.prototypelet girl = new Girl();let drink = function (data) {    console.log(data);    console.log('喝酒');};let findboy = function () {    console.log('交友');};
girl.on('newListener', function (eventName) {    // console.log('名稱：' + eventName);});girl.on('結(jié)婚', function() {});girl.setMaxListeners(3);console.log(girl.getMaxListeners());girl.once('失戀', drink);       // {'失戀': [drink]}girl.once('失戀', drink);       // {'失戀': [drink]}girl.prependListener('失戀', function () {    console.log('before');});girl.once('失戀', drink);       // {'失戀': [drink]}girl.emit('失戀',?'1');

function EventEmitter() {    // 用Object.create(null)代替空對象{}    // 好處是無雜質(zhì)，不繼承原型鏈的東東    this._events = Object.create(null);}// 默認(rèn)最多的綁定次數(shù)EventEmitter.defaultMaxListeners = 10;// 同on方法EventEmitter.prototype.addListener = EventEmitter.prototype.on;// 返回監(jiān)聽的事件名EventEmitter.prototype.eventNames = function () {    return Object.keys(this._events);};// 設(shè)置最大監(jiān)聽數(shù)EventEmitter.prototype.setMaxListeners = function (n) {    this._count = n;};// 返回監(jiān)聽數(shù)EventEmitter.prototype.getMaxListeners = function () {    return this._count ? this._count : this.defaultMaxListeners;};// 監(jiān)聽EventEmitter.prototype.on = function (type, cb, flag) {    // 默認(rèn)值，如果沒有_events的話，就給它創(chuàng)建一個(gè)    if (!this._events) {        this._events = Object.create(null);    }    // 不是newListener 就應(yīng)該讓newListener執(zhí)行以下    if (type !== 'newListener') {        this._events['newListener'] && this._events['newListener'].forEach(listener => {            listener(type);        });    }    if (this._events[type]) {        // 根據(jù)傳入的flag來決定是向前還是向后添加        if (flag) {            this._events[type].unshift(cb);        } else {            this._events[type].push(cb);        }    } else {        this._events[type] = [cb];    }    // 監(jiān)聽的事件不能超過了設(shè)置的最大監(jiān)聽數(shù)    if (this._events[type].length === this.getMaxListeners()) {        console.warn('警告-警告-警告');    }};// 向前添加EventEmitter.prototype.prependListener = function (type, cb) {    this.on(type, cb, true);};EventEmitter.prototype.prependOnceListener = function (type, cb) {    this.once(type, cb, true);};// 監(jiān)聽一次EventEmitter.prototype.once = function (type, cb, flag) {    // 先綁定，調(diào)用后刪除    function wrap() {        cb(...arguments);        this.removeListener(type, wrap);    }    // 自定義屬性    wrap.listen = cb;    this.on(type, wrap, flag);};// 刪除監(jiān)聽類型EventEmitter.prototype.removeListener = function (type, cb) {    if (this._events[type]) {        this._events[type] = this._events[type].filter(listener => {            return cb !== listener && cb !== listener.listen;        });    }};EventEmitter.prototype.removeAllListener = function () {    this._events = Object.create(null);};// 返回所有的監(jiān)聽類型EventEmitter.prototype.listeners = function (type) {    return this._events[type];};// 發(fā)布EventEmitter.prototype.emit = function (type, ...args) {    if (this._events[type]) {        this._events[type].forEach(listener => {            listener.call(this, ...args);        });    }};
module.exports?=?EventEmitter;