|
|
|
|
@ -0,0 +1,27 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-card title="创建webWorker时如何不指定特定的文件">
|
|
|
|
|
<p>
|
|
|
|
|
在创建webWorker时,默认是需要传入一个js文件作为worker的入口文件。如果我们不需要指定特定的文件,即把创建webworker的代码和需要引入的j代码写在同一个文件中
|
|
|
|
|
</p>
|
|
|
|
|
<h3>1: Object URL(blob文件流)</h3>
|
|
|
|
|
<h3>2: Data URL(base64)</h3>
|
|
|
|
|
</el-card>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="jsx">
|
|
|
|
|
import { ref } from 'vue';
|
|
|
|
|
const code1 = ref("console.log('worker1')");
|
|
|
|
|
const code2 = ref("console.log('worker2')");
|
|
|
|
|
|
|
|
|
|
// 1: Object URL(blob文件流)
|
|
|
|
|
const blob = new Blob([code1.value], { type: 'application/javascript' });
|
|
|
|
|
const objectUrl = URL.createObjectURL(blob);
|
|
|
|
|
|
|
|
|
|
// 2: Data URL(base64)
|
|
|
|
|
const dataUrl = `data:application/javascript;utf-8,${code2.value}`;
|
|
|
|
|
|
|
|
|
|
const worker1 = new Worker(objectUrl);
|
|
|
|
|
const worker2 = new Worker(dataUrl);
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped></style>
|