window.MessageChannel——虫洞般的存在

题记

window.MessageChannel是一个异步操作的API，

它可以抽象成一个管道，

既然是一个管道，那么它肯定有两个端口，这两个端口是信息源，也是消息源，可以互相通信

首先来看看它的兼容性

兼容性有时候决定了你是否需要学它，能否用到它

可以看到，大多主流浏览器都已经实现了这个API，可以放心使用

不多bb直接上代码理解它的基础用法

Tips：

• MessageChannel并不是一定要new出来才能用

• window和Worker对象下也有对应postMessage方法，同样可以监听message事件

• window和Worker用DOM2级事件处理不需要调用start()方法

const channel = new MessageChannel();
const port1 = channel.port1;
const port2 = channel.port2;
//监听事件
//用DOM2级事件处理
port1.addEventListener('message', (msg) => {
   
	console.log('port1接收到信息：' + msg.data);
})
port2.addEventListener('message', (msg) => {
   
	console.log('port2接收到信息：' + msg.data);
})
//如果不调用start()方法的话，将监听不到message事件
port1.start();
port2.start();


//使用DOM0级事件处理，会隐式调用start()方法
//port1.onmessage = (msg)=>{
   
//	console.log('port1接收到信息：' + msg.data);
//}
//port2.onmessage = (msg)=>{
   
//	console.log('port2接收到信息：' + msg.data);
//}

port1.postMessage('来自port1的信息');
port2.postMessage('来自port2的信息');

控制台输出：

来自port1的信息																	index.html
来自port2的信息																	index.html

我们来看看MessageChannel含有的属性