diff options
Diffstat (limited to 'files/zh-cn/web/api/worker/index.html')
| -rw-r--r-- | files/zh-cn/web/api/worker/index.html | 106 |
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> |
