[JavaScript知识库]JavaScript之Worker、子线程、importScripts、postMessage、addEventListener、onmessage、self、onclick

1、主文件

1.1、html部分

<button id="clickMe">点我</button>

页面需要引入./index.js文件。

1.2、JavaScript部分

// 创建子线程
// Date.now()是为了每次打包获取最新的子线程文件
window.$worker = new Worker('./workerA.js?time=' + Date.now());

// 通过点击事件触发子线程
clickMe.onclick = () => {
    console.log('第一次开启子线程');
    window.$worker.postMessage({
        status: 0,
    });
};

// 接收子线程返还的数据
window.$worker.onmessage = function ({ data }) {
    let { status } = data;
    if (status === 1) {
        console.log('第一次子线程执行结束，并返回数据：', data);
        console.log('第二次开启子线程，线程轮巡');
        window.$worker.postMessage({
            status: 1
        });
    }
    if (status === null) {
        console.log('第二次子线程执行结束，并返回数据：', data);
        console.log('数据处理结束，线程结束轮巡');
    }
};

2、创建子线程文件workerA.js

// 通过importScripts引入.js文件
importScripts('./worker.importScripts.js?time=' + Date.now());

self.addEventListener('message', function ({ data }) {
    data.obj = obj;
    data.tests = tests;

    let { status } = data;

    if (status === 0) {
        // 在这里可以处理需要的逻辑程序
        // 此处可以引进外部的.js文件
        // 例如上传
        data.frequency = 1;
        // 把处理好的数据返回给主程序
        // 子线程没有渲染功能
        self.postMessage({
            ...data,
            status: 1
        });
    } else if (status === 1) {
        // 在这里可以处理需要的逻辑程序
        // 此处可以引进外部的.js文件
        // 例如下载
        data.frequency = 2;
        // 把处理好的数据返回给主程序
        // 子线程没有渲染功能
        self.postMessage({
            ...data,
            status: null
        });
    }
}, false);

3、创建需要引入的外部worker.importScripts.js文件

let obj = {
    fileName: 'worker.importScripts',
    size: '24k'
},
    tests = '测试';

4、注意

importScripts导入.js文件函数必须在子线程中使用，不能在主线程中单独使用。

5、相关链接

Web Worker使用教——阮一峰