技術標籤：js小程式vue

使用場景

非同步通訊、多頁面間相互通訊，pageA 的方法想在 pageB的方法呼叫的某個時機觸發

直接上程式碼

class Publish {
    constructor() {
        this.listMap = {};
    }
	// 訂閱
    on(key, fn) {
        this.listMap[key]
            ? this.listMap[key].push(fn)
            : this.listMap[key] = [fn];
            
		// 儲存訂閱fn的下標
        const index = this.listMap[key].length - 1;
        
		// 返回取消訂閱的function
        return () => this.clear(key, index);
    }
    
	// 取消所有該key訂閱
    off(key) {
        delete this.listMap[key];
    }
    
	// 取消key的指定的某個訂閱
    clear(key, index) {
        index === this.listMap[key].length - 1
            ? this.listMap[key].pop()
            : this.listMap[key][index] = null;
    }
    
	//訂閱一次觸發後自動取消訂閱
    once(key, fn) {
        this.on(key, (...rest) => {
            fn(...rest);
            this.off(key);
        });
    }

	// 釋出key
    trigger(key, ...rest) {
        this.listMap[key].forEach(fn => {
            fn(...rest);
        });
    }
}
 

使用方法

const ob = new Publish();

// 訂閱 sub1
const sub1 = ob.on('sub1', (a, b) => {
    console.log('sub1', a, b);
});

// 訂閱 sub1
const sub11 = ob.on('sub1', (a, b) => {
    console.log('sub11', a, b);
});

ob.trigger('sub1', 2, 3);

// 取消訂閱sub1
sub1();

// 取消訂閱sub11
sub11();

// 訂閱 sub3
ob.on('sub3', (
 
a, b) => {
    console.log('sub3', a, b);
});

// 訂閱 sub3
ob.on('sub3', (a, b) => {
    console.log('sub33', a, b);
});

ob.trigger('sub3', 6, 7);

// 取消訂閱所有的sub3
ob.off('sub3');

// 訂閱一次就自行取消訂閱
ob.once('sub4', (a, b) => {
    console.log('sub4', a, b);
});

ob.trigger('sub4', 8, 9);