initial commit

2 files changed, 221 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/sharedworker/index.html b/files/zh-cn/web/api/sharedworker/index.html
new file mode 100644
index 0000000000..4ce698a3d9
--- /dev/null
+++ b/files/zh-cn/web/api/sharedworker/index.html
@@ -0,0 +1,118 @@
+---
+title: SharedWorker
+slug: Web/API/SharedWorker
+tags:
+  - Service Worker
+  - SharedWorker
+  - Worker
+translation_of: Web/API/SharedWorker
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<div><code><strong>SharedWorker</strong></code><strong> </strong>接口代表一种特定类型的 worker，可以从几个浏览上下文中<em>访问</em>，例如几个窗口、iframe 或其他 worker。它们实现一个不同于普通 worker 的接口，具有不同的全局作用域, {{domxref("SharedWorkerGlobalScope")}} 。</div>
+
+<div></div>
+
+<div class="note">
+<p><span style="font-size: 14px; line-height: 21px;"><strong>注意：如果要使 </strong></span>SharedWorker <span style="font-size: 14px; line-height: 21px;"><strong>连接到多个不同的页面，这些页面必须是同源的（相同的协议、host 以及端口）。</strong></span></p>
+</div>
+
+<h2 id="构造函数">构造函数</h2>
+
+<dl>
+ <dt>{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}</dt>
+ <dd>创建一个执行指定 url 脚本的共享 web worker。</dd>
+</dl>
+
+<h2 id="属性">属性</h2>
+
+<p><em>继承自其父类 {{domxref("EventTarget")}}，并实现 {{domxref("AbstractWorker")}} 中的属性 。</em></p>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>一个 {{domxref("EventListener")}}，当 {{domxref("ErrorEvent")}} 类型的 <code>error</code> 冒泡到 worker 时触发。</dd>
+ <dt>{{domxref("SharedWorker.port")}} {{readonlyInline}}</dt>
+ <dd>返回一个 {{domxref("MessagePort")}} 对象，该对象可以用来进行通信和对共享 worker 进行控制。</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p>继承自其<em>父类 {{domxref("EventTarget")}}，并实现 {{domxref("AbstractWorker")}} 中的方法 。</em></p>
+
+<h2 id="示例">示例</h2>
+
+<p>在这个 <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">shared worker </a>例子中 (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/"> 运行 shared worker</a>)， 我们有两个 HTML 页面， 每个页面中使用一些 JavaScript 来执行简单的计算。 这些脚本使用相同的 shared worker 来执行计算 — 都可以访问这个 worker，即使脚本在不同窗口的两个页面内运行。</p>
+
+<p>下面的代码展示了如何通过 {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} 方法来创建一个共享进程对象。</p>
+
+<pre class="brush: js">var myWorker = new SharedWorker("worker.js");
+</pre>
+
+<p>然后两个脚本都通过 {{domxref("MessagePort")}} 对象来访问worker，这个对象用{{domxref("SharedWorker.port")}} 属性获得。如果已经用 addEventListener 监听了 onmessage 事件，则可以使用 <code>start()</code> 方法手动启动端口：</p>
+
+<pre class="brush: js">myWorker.port.start();</pre>
+
+<p>当启动端口时，两个脚本都会向 worker 发送消息， 然后使用 <code>port.postMessage()</code>和 <code>port.onmessage</code> 处理从 worker 返回的消息:</p>
+
+<pre class="brush: js">first.onchange = function() {
+    myWorker.port.postMessage([first.value,second.value]);
+    console.log('Message posted to worker');
+  }
+
+  second.onchange = function() {
+    myWorker.port.postMessage([first.value,second.value]);
+    console.log('Message posted to worker');
+  }
+
+  myWorker.port.onmessage = function(e) {
+    result1.textContent = e.data;
+    console.log('Message received from worker');
+  }</pre>
+
+<p>在 worker 中我们使用 {{domxref("SharedWorkerGlobalScope.onconnect")}} 处理程序连接到上面讨论的相同端口。可以在 {{event("connect")}} 事件的 <code>ports</code> 属性中获取到与该 worker 相关联的端口 — 然后我们使用 {{domxref("MessagePort")}} <code>start()</code> 方法来启动端口，然后 <code>onmessage</code> 处理程序处理来自主线程的消息。</p>
+
+<pre class="brush: js">onconnect = function(e) {
+    var port = e.ports[0];
+
+    port.addEventListener('message', function(e) {
+      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+      port.postMessage(workerResult);
+    });
+
+    port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
+}</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("Web Workers")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.SharedWorker")}}</p>
+
+<h2 id="更多">更多</h2>
+
+<ul>
+ <li>{{domxref("Worker")}}</li>
+ <li><a class="internal" href="/zh-CN/docs/Web/Guide/Performance/Using_web_workers">使用 web worker</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/sharedworker/sharedworker/index.html b/files/zh-cn/web/api/sharedworker/sharedworker/index.html
new file mode 100644
index 0000000000..987f704be3
--- /dev/null
+++ b/files/zh-cn/web/api/sharedworker/sharedworker/index.html
@@ -0,0 +1,103 @@
+---
+title: SharedWorker()
+slug: Web/API/SharedWorker/SharedWorker
+translation_of: Web/API/SharedWorker/SharedWorker
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p><code><strong>SharedWorker()</strong></code> 构造函数实例化的 {{domxref("SharedWorker")}} 对象可以执行指定的 URL 的脚本。所执行的脚本必须遵守 <a href="/en-US/docs/Web/Security/Same-origin_policy">同源策略</a>。</p>
+
+<p>如果 URL 的语法无效或者违反了同源策略会抛出 <code>SECURITY_ERR</code> 类型的 {{domxref("DOMException")}} 异常。</p>
+
+<div class="note">
+<p><strong>注意</strong>: 浏览器开发者对于 data URI 是否同源产生分歧。尽管 Gecko 10.0 {{geckoRelease("10.0")}} 及之后版本支持 data URIs，其他浏览器并不能支持 。</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var myWorker = new SharedWorker(<em>aURL</em>, <em>name</em>);
+var myWorker = new SharedWorker(<em>aURL</em>, <em>options</em>);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><em>URL参数</em></dt>
+ <dd>一个代表了 worker 将执行的脚本 URL 的 {{domxref("DOMString")}}，它必须遵守同源策略。</dd>
+ <dt>name {{optional_inline}}</dt>
+ <dd>一个指定表示 worker 范围的{{domxref("SharedWorkerGlobalScope")}}的标识名称的 {{domxref("DOMString")}}，主要用于调试。</dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>创建实例时设定的包含了可选属性的对象。可用的属性包括：</dd>
+ <dd>
+ <ul>
+  <li><code>type</code>: 一个制定所创建 worker 类型的 {{domxref("DOMString")}}。可设定的值为 <code>classic</code> 或者 <code>module</code>. 若不指定，默认值为 <code>classic</code>.</li>
+  <li><code>credentials</code>: 一个指定要用于工作程序的凭据类型的  {{domxref("DOMString")}}。 可设定的值为<dfn> <code>omit<font face="Verdana, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">、</span></font></code></dfn><code><dfn>same-origin</dfn></code> 或 <dfn><code>include</code>. </dfn>若不指定，<dfn>或者 type 设定为 <code>classic</code>, </dfn>默认值为<dfn> <code>omit</code> （无需凭据）。</dfn></li>
+  <li><dfn><code>name</code>: </dfn>一个指定表示 worker 范围的{{domxref("SharedWorkerGlobalScope")}}的标识名称的 {{domxref("DOMString")}}，主要用于调试。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>创建的 worker</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li><code>SecurityError</code> 当文档不能正常启动 workers 时抛出</li>
+ <li><code>NetworkError</code> 如果其中一个脚本的MIME类型是text / csv，image / *，video / *或audio / * 时抛出。类型只应该为 <code>text/javascript</code>。</li>
+ <li><code>SyntaxError</code> 当 <em>URL</em> 不能被解析时抛出</li>
+</ul>
+
+<h2 id="示例">示例</h2>
+
+<p>以下代码段显示了使用 <code>SharedWorker()</code> 构造函数创建 {{domxref("SharedWorker")}} 对象以及对象的后续用法：</p>
+
+<pre class="brush: js">var myWorker = new SharedWorker('worker.js');
+
+myWorker.port.start();
+
+first.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+myWorker.port.onmessage = function(e) {
+  result1.textContent = e.data;
+  console.log('Message received from worker');
+}</pre>
+
+<p>看完整示例，请见 <a class="external-icon external" href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a class="external-icon external" href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>.)</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-sharedworker", "SharedWorker()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.SharedWorker.SharedWorker")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("SharedWorker")}} interface it belongs to.</li>
+</ul>