专用工作者线程worker加载模块方法，import引入和importscirpt引入
在 Web Workers 中加载其他脚本，通常有两种方式：使用 importScripts() 方法和使用 ES6 模块的 import 语法。这两种方式各有特点和适用场景。
importScripts() 方法
importScripts() 是 Web Workers 的一个内置方法，用于在 Worker 内部动态加载外部 JavaScript 文件。它是一个同步操作，意味着在脚本加载完成之前，Worker 线程会被阻塞。
特点：
同步加载：importScripts() 会阻塞 Worker 线程直到脚本加载完成。
兼容性：兼容性较好，支持较旧的浏览器版本。
全局作用域：通过 importScripts() 加载的脚本中的变量和函数会成为 Worker 的全局作用域的一部分。
const myWorker = new Worker('worker.js');
// 在 worker.js 中
importScripts('script1.js', 'script2.js');
ES6 import（）方法
ES6 模块的 import 语法是一种现代的模块化方案，它允许开发者以异步的方式加载模块。在 Worker 中使用 import 语法需要在 Worker 的脚本中使用 type=“module” 属性。
特点：
异步加载：import 是异步的，不会阻塞 Worker 线程。
现代语法：使用 ES6 模块语法，支持模块化开发。
模块作用域：通过 import 导入的模块具有自己的作用域，不会污染全局作用域。
//greet.sj
export function Hello()
{
return '你好';
}
export function add(x,y)
{
return x+y;
}
//导入普通脚本中的函数
import {Hello,add} from './greet.js';
//在这个子线者运行函数；并返回值，然后再传给主线程
self.postMessage(Hello());
self.onmessage=function(e)
{
let numdata=e.data;
self.postMessage(add(numdata.x,numdata.y));
}
//greetWorker.html
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<title>测试用模块来加载worker</title>
</head>
<body>
<script>
//创建工作者专用线程，type：module表示模块；classic表示普通脚本
let w=new Worker('./greetWorker.js',{type:'module'});
//为线程传递参数值
w.postMessage({x:5,y:6});
//接收子线程返回的数据
w.onmessage=function(e){
console.log(e.data);
}
</script>
</body>
</html>
最后总结
区别
加载方式：importScripts() 是同步的，而 import 是异步的。
兼容性：importScripts() 兼容性更好，import 需要浏览器支持 ES6 模块。
作用域：importScripts() 加载的脚本共享全局作用域，而 import 导入的模块有自己的作用域。
语法：importScripts() 适用于传统脚本，import 适用于现代的模块化开发。
选择
如果你需要在 Worker 中加载多个脚本，并且不需要模块化开发，可以使用 importScripts()。
如果你的项目已经采用了 ES6 模块，并且需要利用模块化的优势，那么使用 import 语法是更好的选择。
总的来说，选择哪种方式取决于你的项目需求和浏览器兼容性要求。随着现代浏览器对 ES6 模块的支持越来越好，使用 import 语法在 Worker 中加载模块可能会成为主流。
原文地址：https://blog.csdn.net/cdcdhj/article/details/143652436
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！