15-Vite中使用WebWorker原创

我们继续的来介绍V的功能，这一章呢，我们来看一下V中如何使用web worker。那什么是web worker呢？我们来回顾一下，Javascript语言采用的是单线程编程，也就是说所有的任务只能在一个线程上完成，一次只能做一件事，那前面的任务没有做完，后面的任务只能等着。那随着我们电脑计算能力的增强，尤其是多核的CPU的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。那web worker的作用就是javascript创造的多线程环境。它是在HTML5出现的时候随机推出来的，它允许主线程来创建worker线程，将一些任务分配给后者来运行。在主线程运行的同时，Worker线程在后台运行，两者互不干扰。等到worker线程完成计算任务，再把结果返回给主线程。这样做的好处就是一些计算密集型或者是高延迟的任务被worker线程负担了，而主线程就会很流畅。

比方说，主线程通常负责UI的交互，不会阻塞或者是拖慢。那worker线程一旦创建成功，就会始终运行，不会被主线程的活动所打断，比如像用户点击按钮啊，提交表单啊等等，这样呢就有利于随时响应我们主线上的通信。那如何使用纯的JS直接在浏览器下运行web worker呢？我们只需要去new一个worker对象就可以了，然后把我们写的worker程序给引入进来，通过返回的worker对象，我们就可以实时的监测到我们worker里边的一些数据的返回了。那在wait中我们不用这么复杂，我们只需要通过模块的方法导入一个worker的JS，然后在后面冠以问号worker，就会返回一个my worker或者是任何的worker对象，然后呢，我们再去通过实例化这个worker，就会返回这个worker对象了，也就是说我们可以把这个worker的JS当成是一个模块来使用，那下面呢，我们就来演示一下。

回到Vs code，打开我们终端工具，我们来创建一个项目，执行一下PM PM create wait。然后我们把项目的名字命名为纯的原生GS的一个名字叫做wait basics vanilla，我们使用vanilla这个模板，那在上面呢，我们就可以选择Van了，然后再选择Van na了，然后接下来我们CD到wait basics vanilla这个目录下面。然后接下来我们执行一下PN PM install来去安装我们这个依赖，安装好了以后，我们执行一下PN PM run，这样的话呢，我们就可以把我们当前的这个服务启动起来了，然后我们点击一下啊这个链接，我们就打开了这样的一个欢迎页面，那接下来呢，我们就在vanilla这个项目里边去创建我们的web worker，我们在项目根目录下面创建一个新的文件，取名为叫做worker.js。

在这里边儿呢，我们可以写一段运算，我们首先定义一个变量，它的值为零，然后我们再去定义一个函数，我们取名为叫做time count。这个函数里边就去每过比方说一秒来去讲I添加为一，这样的话呢，我们可以写一个I加加，然后在下面呢，我们再去写一个post message，这是一个非常有用的方法，这个post message可以把信息传递给我们的主线程。那它的信息的内容就是这个I了，那接在下面呢，我们让它每过一秒去执行一次，所以我们执行一下set time after在里边呢，我们去调用一下我们这个方法本身，然后让它每过一秒去执行一次，我们得需要让这个方法先去调用一下好了，这样的话我们这个worker的GS就编写好了，那么这个线程呢，会单独的运行，那如何的去引用呢？我们先使用原生的JS，我们在慢JS里边将这个代码先删除掉。

然后呢，我们去引入我们的worker JS，我们先使用原生的方法定义一个常量，叫做worker。然后它应该是等于new worker，注意这个worker呢是我们浏览器里自带的，所以我们直接可以使用，那这个路径应该就是我们当前目录下面的worker.js引入进来worker以后，我们需要收取我们在子线程里边发过来的数据，所以呢，我们要给worker定义一个啊，Message这样的一个事件。这个事件的后面是一个回调，在回调函数里边我们可以拿到一个event，这个event里头就可以拿到我们的数据了，所以我们可以通过调用event里面的data拿到这个数据。

好，下面呢，我们可以打开我们的控制台，好，我们看到每过一秒就会收到我们子线程里面获得这个信息。那接下来呢，我们开始看一看如何在V里面去使用我们这个worker，也就是把我们的worker的JS当成是一个模块来调用，而不是直接原生的使用方法，就是我们现在可以把这句话先注释掉，然后呢，我们再通过import去导入一个模块，这个模块的名字呢，我们可以取名为my worker，大家发现我这个变量的名字的开始是大写字母开头，那就是说它应该是个对象，然后from应该是当前目录下的worker的JS，注意在这后边呢，一定要冠以问号worker，这样的话，这个资源才是被当做成是一个worker来引入的。最后呢，我们还得需要去cost一个worker来去定义一个实例，然后呢，它应该等于new my worker。

它返回的就是一个蜗壳对象了，好，那返回回来以后，接下来呢，我们再看效果，跟刚才我们使用纯原生JS的效果是一致的，这就是我们如何的在V中去引入一个worker。关于worker，我们就讲这么多，大家加油。