快捷導(dǎo)航

SharedWorkerGlobalScope屬性數(shù)據(jù)共享示例解析

更新時(shí)間：2022年12月27日 13:46:41 作者：田八

這篇文章主要為大家介紹了SharedWorkerGlobalScope屬性數(shù)據(jù)共享示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

上一章介紹了Worker的全局作用域，了解到DedicatedWorkerGlobalScope是繼承自WorkerGlobalScope的;

這一章介紹的SharedWorkerGlobalScope也是繼承自WorkerGlobalScope的，那么SharedWorkerGlobalScope和DedicatedWorkerGlobalScope有什么區(qū)別呢？

SharedWorkerGlobalScope

SharedWorkerGlobalScope和DedicatedWorkerGlobalScope一樣都是一個(gè)全局作用域，它的實(shí)例是SharedWorker，它的原型是WorkerGlobalScope，它的構(gòu)造函數(shù)是SharedWorkerGlobalScope。

在SharedWorker中可以使用self關(guān)鍵字來(lái)訪問(wèn)SharedWorkerGlobalScope的實(shí)例，也可以使用this關(guān)鍵字來(lái)訪問(wèn)SharedWorkerGlobalScope的實(shí)例。

他們之間的關(guān)系如上圖所示。

SharedWorkerGlobalScope的屬性

SharedWorkerGlobalScope的屬性大多數(shù)和DedicatedWorkerGlobalScope一樣，只是少了onmessage和onerror，因?yàn)?code>SharedWorkerGlobalScope是多個(gè)DedicatedWorkerGlobalScope共享的，所以SharedWorkerGlobalScope的onmessage和onerror是多個(gè)DedicatedWorkerGlobalScope共享的。

這里直接通過(guò)函數(shù)簽名的方式來(lái)介紹SharedWorkerGlobalScope的屬性。

interface SharedWorkerGlobalScope extends WorkerGlobalScope {
    readonly name: string;
    close(): void;
    onconnect: EventHandler
}

name：SharedWorkerGlobalScope的名字，它是只讀的，只能在SharedWorker的構(gòu)造函數(shù)中設(shè)置，如果使用相同的name創(chuàng)建多個(gè)SharedWorker，那么它們會(huì)共享同一個(gè)SharedWorkerGlobalScope。
close()：關(guān)閉SharedWorkerGlobalScope，它會(huì)丟棄所有的等待執(zhí)行的任務(wù)。
onconnect：當(dāng)有新的DedicatedWorkerGlobalScope連接到SharedWorkerGlobalScope時(shí)，會(huì)觸發(fā)onconnect事件。

可以對(duì)比一下DedicatedWorkerGlobalScope的屬性，其實(shí)相差不大，只是少了onmessage和onerror，多了onconnect。

數(shù)據(jù)共享

DedicatedWorkerGlobalScope是通過(guò)postMessage來(lái)與DedicatedWorkerGlobalScope通信的，而SharedWorkerGlobalScope是通過(guò)onconnect來(lái)與DedicatedWorkerGlobalScope通信的。

SharedWorkerGlobalScope的onconnect事件會(huì)返回一個(gè)MessagePort，它是一個(gè)雙向的通信通道，可以通過(guò)它來(lái)與DedicatedWorkerGlobalScope通信。

interface MessagePort extends EventTarget {
    readonly name: string;
    close(): void;
    postMessage(message: any, transfer?: Transferable[]): void;
    start(): void;
    onmessage: EventHandler;
    onmessageerror: EventHandler;
}

看函數(shù)簽名可以發(fā)現(xiàn)MessagePort也是繼承自EventTarget的，這就意味著MessagePort也可以使用addEventListener來(lái)監(jiān)聽事件。

MessagePort自帶的屬性和方法不難發(fā)現(xiàn)和DedicatedWorkerGlobalScope的是相同的，只是多了一個(gè)sart方法。

不同于DedicatedWorkerGlobalScope的是，MessagePort是雙向的，或者說(shuō)MessagePort是雙向的一邊，兩個(gè)MessagePort形成一個(gè)雙向的通信通道。

MessagePort是Channel Messaging API的一部分，這又引出了Channel Messaging API。

Channel Messaging API

Channel Messaging API允許我們創(chuàng)建一個(gè)雙向的通信通道，它的實(shí)例是MessageChannel，它的原型是EventTarget，它的構(gòu)造函數(shù)是MessageChannel。

interface MessageChannel extends EventTarget {
    readonly port1: MessagePort;
    readonly port2: MessagePort;
}

可以看到MessageChannel有兩個(gè)只讀屬性，分別是port1和port2，它們都是MessagePort的實(shí)例，它們之間形成一個(gè)雙向的通信通道。

const channel = new MessageChannel();
channel.port1.onmessage = (event) => {
    console.log(event.data);
};
channel.port2.postMessage('hello');

上面的代碼中，channel.port1和channel.port2是一個(gè)雙向的通信通道，它們之間可以互相通信。

當(dāng)然通常我們不會(huì)這樣使用MessageChannel，那可以用來(lái)做什么呢，我們可以實(shí)現(xiàn)數(shù)據(jù)拷貝：

const channel = new MessageChannel();
channel.port1.onmessage = (event) => {
    console.log(event.data);
};
var obj = { a: 1 };
obj.b = obj;
channel.port2.postMessage(obj);

這里使用的是結(jié)構(gòu)化克隆算法，它可以克隆復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，而不是簡(jiǎn)單的拷貝引用。

SharedWorker

當(dāng)我們了解了SharedWorkerGlobalScope、MessagePort、MessageChannel之后，我們對(duì)SharedWorker的使用就不會(huì)陌生了。

// main.js
const worker = new SharedWorker('worker.js', 'worker');
worker.port.onmessage = (event) => {
    console.log(event.data);
};
// 在講 SharedWorker 的文章中講過(guò)
// 如果使用 onmessage 監(jiān)聽，會(huì)自動(dòng)調(diào)用 start 方法
// 如果使用 addEventListener 監(jiān)聽，需要手動(dòng)調(diào)用 start 方法
// 所以下面的代碼可以省略
worker.port.start();
worker.port.postMessage('hello');

當(dāng)我們有上面的基礎(chǔ)之后，來(lái)看一下上面構(gòu)建的SharedWorker的代碼，不難發(fā)現(xiàn)都是我們之前講過(guò)的：

new SharedWorker：是SharedWorker的構(gòu)造函數(shù)，這個(gè)是屬于SharedWorker的
worker.port：是MessagePort的實(shí)例，也是屬于SharedWorker的
worker.port.onmessage：是MessagePort的onmessage事件
worker.port.start()：是MessagePort的start方法
worker.port.postMessage：是MessagePort的postMessage方法

通過(guò)上面的代碼就可以推斷出SharedWorker的函數(shù)簽名：

interface SharedWorker extends EventTarget {
    constructor(scriptURL: string, name?: string);
    readonly port: MessagePort;
}

事實(shí)的函數(shù)簽名也是和上面的一致。

上面是在主函數(shù)中創(chuàng)建SharedWorker，那么在SharedWorker中是怎么使用的呢，我們來(lái)看一下：

// worker.js
onconnect = (event) => {
    const port = event.ports[0];
    port.onmessage = (event) => {
        console.log(event.data);
    };
    port.start();
    port.postMessage('hello');
};

在SharedWorker中，只需要監(jiān)聽onconnect事件，然后在事件中獲取MessagePort，然后就可以使用MessagePort的方法了。

這個(gè)是屬于SharedWorkerGlobalScope的，可以把文章網(wǎng)上翻翻，就可以看到了。