aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/worker/index.html
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/worker/index.html
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/zh-cn/web/api/worker/index.html')
-rw-r--r--files/zh-cn/web/api/worker/index.html106
1 files changed, 106 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/worker/index.html b/files/zh-cn/web/api/worker/index.html
new file mode 100644
index 0000000000..915aceb681
--- /dev/null
+++ b/files/zh-cn/web/api/worker/index.html
@@ -0,0 +1,106 @@
+---
+title: Worker
+slug: Web/API/Worker
+tags:
+ - DOM
+ - Worker
+translation_of: Web/API/Worker
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>Worker 接口是 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers API </a>的一部分,指的是一种可由脚本创建的后台任务,任务执行中可以向其创建者收发信息。要创建一个 Worker<strong> ,</strong>只须调用 <code>Worker(URL) </code>构造函数,函数参数 `URL` 为指定的脚本。</p>
+
+<p>Worker 也可以创建新的 Worker,当然,所有 Worker 必须与其创建者<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy">同源</a>(注意:<a href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5R3B4RN4GHU">Blink</a>暂时不支持嵌套 Worker)。 </p>
+
+<p>需要注意的是,不是所有函数和构造函数(或者说…类)都可以在 Worker 中使用。具体参考页面 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers">Worker 所支持的函数和类</a>。Worker 可以使用 <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> 发送请求,但是请求的<span style="line-height: inherit;">  </span><code style="font-size: 14px; line-height: inherit;">responseXML</code><span style="line-height: inherit;"> 与 </span><code style="font-size: 14px; line-height: inherit;">channel</code><span style="line-height: inherit;"> 两个属性值始终返回</span><span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">null</code> (<code>fetch</code> 仍可正常使用,没有类似的限制)。 </p>
+
+<div class="blockIndicator note">
+<p> 如果你要在火狐浏览器的扩展使用 Worker 访问 <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/js-ctypes">js-ctypes</a>,应使用 {{ domxref("ChromeWorker") }} 对象来替代。(译者注:这里没有看懂,希望有人能驳正,或添加说明)</p>
+</div>
+
+<h2 id="构造函数">构造函数</h2>
+
+<dl>
+ <dt>{{domxref("Worker.Worker", "Worker()")}}</dt>
+ <dd>创建一个专用Web worker,它只执行URL指定的脚本。使用 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Blob">Blob URL</a> 作为参数亦可。</dd>
+</dl>
+
+<h2 id="属性">属性</h2>
+
+<p><em>继承</em>父对象<em>{{domxref("EventTarget")}} 的属性,以及实现对象 {{domxref("AbstractWorker")}}的属性。</em></p>
+
+<h3 id="事件句柄"><em>事件句柄</em></h3>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>当{{domxref("ErrorEvent")}} 类型的事件冒泡到 worker 时,事件监听函数 {{ domxref("EventListener") }} 被调用. 它继承于 {{domxref("AbstractWorker")}}.</dd>
+ <dt>{{domxref("Worker.onmessage")}}</dt>
+ <dd>当{{domxref("MessageEvent")}}类型的事件冒泡到 worker 时,事件监听函数 {{ domxref("EventListener") }} 被调用.  例如,一个消息通过 {{domxref("DedicatedWorkerGlobalScope.postMessage")}},从执行者发送到父页面对象,消息保存在事件对象的 {{domxref("MessageEvent.data", "data")}} 属性中.</dd>
+ <dt>{{domxref("Worker.onmessageerror")}}</dt>
+ <dd>当{{event("messageerror")}} 类型的事件发生时,对应的{{domxref("EventHandler")}} 代码被调用。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>继承</em>父对象<em>{{domxref("EventTarget")}} 的方法,以及实现对象 {{domxref("AbstractWorker")}}的方法。</em></p>
+
+<dl>
+ <dt>{{domxref("Worker.postMessage()")}}</dt>
+ <dd>发送一条消息到最近的外层对象,消息可由任何 JavaScript 对象组成。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Worker.terminate()")}}</dt>
+ <dd>立即终止 worker。该方法不会给 worker 留下任何完成操作的机会;就是简单的立即停止。Service Woker 不支持这个方法。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<p>下面的代码通过构造函数 {{domxref("Worker.Worker", "Worker()")}}  创建了一个 {{domxref("Worker")}} 对象。</p>
+
+<pre class="brush: js notranslate">var myWorker = new Worker('worker.js');
+var first = document.querySelector('#number1');
+var second = document.querySelector('#number2');
+
+first.onchange = function() {
+ myWorker.postMessage([first.value,second.value]);
+ console.log('Message posted to worker');
+}</pre>
+
+<p>完整的示例,请查阅 <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">规范</th>
+ <th scope="col">状态</th>
+ <th scope="col">说明</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', "#worker", "Worker")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>不同类型的worker兼容度不一致,详细参考具体定义的页面。</p>
+
+<p>{{Compat("api.Worker")}}</p>
+
+<h3 id="跨域行为的错误事件">跨域行为的错误事件</h3>
+
+<p>浏览器的早期版本中,加载跨域的执行者脚本导致 <code>SecurityError</code>事件。根据规范的变更,而新版本的浏览器只有{{event("error")}}事件发生。关于如何处理这种事件的更多信息参考 <a href="https://www.fxsitecompat.com/en-CA/docs/2016/loading-cross-origin-worker-now-fires-error-event-instead-of-throwing-worker-in-sandboxed-iframe-no-longer-allowed/">Loading cross-origin worker now fires error event instead of throwing; worker in sandboxed iframe no longer allowed</a>.</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li><a class="internal" href="/En/Using_web_workers" title="en/Using DOM workers">Using web workers</a></li>
+ <li><a href="/En/DOM/Worker/Functions_available_to_workers" title="https://developer.mozilla.org/En/DOM/Worker/Functions_available_to_workers">Functions available to workers</a></li>
+ <li>Other kind of workers: {{ domxref("SharedWorker") }} and <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker</a>.</li>
+ <li>Non-standard, Gecko-specific workers: {{ domxref("ChromeWorker") }}, used by extensions.</li>
+</ul>