const baoziShop = {};//定義包子鋪
baoziShop.listenList = [];//緩存列表 存放訂閱者的回調(diào)函數(shù)
//添加訂閱者
baoziShop.listen = function (fn) {
    baoziShop.listenList.push(fn)
}
//發(fā)布消息
baoziShop.trigger = function() {
    for(let i = 0, fn; fn = baoziShop.listenList[i++]) {
        fn.apply(this, arguments);
    }
}
//接下來嘗試添加監(jiān)聽者
baoziShop.listen( function (price, baoziType) { //小明訂閱消息
    console.log(`種類：${baoziType}, 價(jià)格： ${price}`)
})
baoziShop.listen( function (price, baoziType) { //小王訂閱消息
    console.log(`種類：${baoziType}, 價(jià)格： ${price}`)
})
//接下來我們嘗試發(fā)布消息
baoziShop.trigger(2, '豆沙包');//輸出:種類：豆沙包， 價(jià)格 2 
baoziShop.trigger(3, '肉包');//輸出：種類：肉包，價(jià)格 3

const baoziShop = {}; //定義包子鋪
baoziShop.listenList = {}; //存放訂閱者的回調(diào)函數(shù) 注意 這里從前面的數(shù)組改成了對(duì)象
//添加訂閱者 key用來標(biāo)識(shí)訂閱者
baoziShop.listen = function(key, fn) {
    if( !this.listenList[key]) {
        this.listenList[key] = [];//如果沒有訂閱過此類消息 就給該消息創(chuàng)建訂閱列表
    }
    this.listenList[key].push(fn);//將回調(diào)放入訂閱列表
}
//發(fā)布消息
baoziShop.trigger = function() {
    const key = Array.prototype.shift.call(arguments), //取出消息類型
	fns = this.listenList[key];//取出該訂閱對(duì)應(yīng)的回調(diào)列表
    if(!fns || fns.length === 0) return false;//沒有訂閱則直接返回
    for(let i = 0, fn; fn = fns[i]; i++) {
        fn.apply(this, arguments) //綁定this
    }
}
//接下來我們嘗試下訂閱不同的消息
baoziShop.listen('菜包子', function(price) { //小明訂閱菜包子的消息
    console.log('價(jià)格：', price)
})
baoziShop.listen('肉包子', function(price) { //小王訂閱肉包子
    console.log('價(jià)格:', price)
})
//接下來我們發(fā)布下消息
baoziShop.trigger('菜包子'， 2); //只有訂閱菜包子的小明能收到消息
baoziShop.trigger('肉包子', 3); //只有訂閱肉包子的小王能收到通知

const event = {
    listenList : [], //訂閱列表
    listen: function (key, fn) {
        if( !this.listenList[key]) {
        this.listenList[key] = [];//如果沒有訂閱過此類消息 就給該消息創(chuàng)建訂閱列表
    }
    this.listenList[key].push(fn);//將回調(diào)放入訂閱列表
    },
    trigger: function() {
        const key = Array.prototype.shift.call(arguments), //取出消息類型
	fns = this.listenList[key];//取出該訂閱對(duì)應(yīng)的回調(diào)列表
    if(!fns || fns.length === 0) return false;//沒有訂閱則直接返回
    for(let i = 0, fn; fn = fns[i]; i++) {
        fn.apply(this, arguments) //綁定this
    }
    }
}

const installEvent = function(obj) {
    for(let i in event) {
        obj[i] = event[i];
    }
}
//接下來我們測(cè)試下我們的代碼 
const baoziShop = {};//定義包子鋪
installEvent(baoziShop);
//接下來我們就可以訂閱和發(fā)布消息了
baoziShop.listen('菜包子', function(price) { //小明訂閱菜包子的消息
    console.log('價(jià)格：', price)
})
baoziShop.listen('肉包子', function(price) { //小王訂閱肉包子
    console.log('價(jià)格:', price)
})
baoziShop.trigger('菜包子'， 2); //只有訂閱菜包子的小明能收到消息
baoziShop.trigger('肉包子', 3); //只有訂閱肉包子的小王能收到通知

//我們給我們的event對(duì)象增加一個(gè)remove的方法用來取消訂閱
event.remove = function(key, fn) {
    const fns = this.listenList[key];//取出該key對(duì)應(yīng)的列表
    if(!fns) { //如果該key沒被人訂閱，直接返回
        return false;
    } if(!fn) { //如果傳入了key但是沒有對(duì)應(yīng)的回調(diào)函數(shù)，則標(biāo)識(shí)取消該key對(duì)應(yīng)的所有訂閱??！
        fns && (fns.length == 0)
    }else {
        for(let len = fns.length - 1; len >= 0; len --) { //反向遍歷訂閱的回調(diào)列表
            const _fn = fns[len];
            if(_fn === fn) {
                fns.splice(len, 1) ;//刪除訂閱者的回調(diào)函數(shù)
            }
        }
    }
}
//接下來我們照常給包子鋪添加一些訂閱
const baoziShop = {};
installEvent(baoziShop);
baoziShop.listen('菜包子', fn1 = function(price) { //小明訂閱消息
    console.log('價(jià)格', price);
})
baoziShop.listen('菜包子', fn2 = function(price) { //小王訂閱消息
    console.log('價(jià)格', price)
})
baoziShop.trigger('菜包子', 2);//小明和小王都收到消息
baoziShop.remove('菜包子', fn1); //刪除小明的訂閱
baoziShop.trigger('菜包子', 2);//只有小王會(huì)收到訂閱

//小明必須知道包子鋪的名稱才能開始訂閱
baoziShop.listen('菜包子', function(price) {
    //....
})
//如果小明要去另外的包子鋪買 就必須訂閱另一家包子鋪
baoziAnother.listen('菜包子', function(price) {
    //....
})

//我們嘗試改寫event對(duì)象 使其充當(dāng)一個(gè)中介的角色 將發(fā)布者和訂閱者連接起來
const Event = ({
	const listenList = {};//訂閱列表
    //添加訂閱者
    const listen = function(key, fn) {
    	if( !this.listenList[key]) {
        this.listenList[key] = [];//如果沒有訂閱過此類消息 就給該消息創(chuàng)建訂閱列表
    }
    	this.listenList[key].push(fn);//將回調(diào)放入訂閱列表
	};
	//發(fā)布消息
	const trigger = function() {
         const key = Array.prototype.shift.call(arguments), //取出消息類型
		fns = this.listenList[key];//取出該訂閱對(duì)應(yīng)的回調(diào)列表
    	if(!fns || fns.length === 0) return false;//沒有訂閱則直接返回
   	 	for(let i = 0, fn; fn = fns[i]; i++) {
       		 fn.apply(this, arguments) //綁定this
    		}
    };
	//取消訂閱
	const remove = function(key, fn) {
        	const fns = this.listenList[key];//取出該key對(duì)應(yīng)的列表
    if(!fns) { //如果該key沒被人訂閱，直接返回
        return false;
    } if(!fn) { //如果傳入了key但是沒有對(duì)應(yīng)的回調(diào)函數(shù)，則標(biāo)識(shí)取消該key對(duì)應(yīng)的所有訂閱！！
        fns && (fns.length == 0)
    }else {
        for(let len = fns.length - 1; len >= 0; len --) { //反向遍歷訂閱的回調(diào)列表
            const _fn = fns[len];
            if(_fn === fn) {
                fns.splice(len, 1) ;//刪除訂閱者的回調(diào)函數(shù)
            }
        }
    };
    return {
        listen,
        trigger,
        remove
    }
})();
//接下來我們就能用Event來實(shí)現(xiàn)發(fā)布-訂閱功能而不需要?jiǎng)?chuàng)建那么多的對(duì)象了
Event.listen('菜包子', function(price) { //小明訂閱消息
    console.log('價(jià)格：', price)
})
Event.listen('菜包子', 2);//包子鋪發(fā)布消息

//例如我們?cè)赼元素發(fā)布一個(gè)消息 b元素就可以監(jiān)聽到并實(shí)施對(duì)應(yīng)的操作
a.onclick = () => {
    Event.listen('onclickEvent', 'this is data')
}
//b元素接收到消息
const b = (function() {
    Event.listen('onclikcEvent', function(data) {
        console.log('這是接收到的數(shù)據(jù)', data);//輸出這是接收到的數(shù)據(jù)thisisdata
    })
})();

//在登錄成功后發(fā)布消息
login().then((data:[code]) => {
    if(code === 200) {
        Event.trigger('success', code);//登錄成功后發(fā)布消息
    }
})
//用戶信息模塊監(jiān)聽并更新
Event.listen('success', function(code) => {
             refleshUserInfo();//更新用戶信息
             })