diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/windoworworkerglobalscope | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/windoworworkerglobalscope')
9 files changed, 1232 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/caches/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/caches/index.html new file mode 100644 index 0000000000..8debcc3322 --- /dev/null +++ b/files/zh-cn/web/api/windoworworkerglobalscope/caches/index.html @@ -0,0 +1,127 @@ +--- +title: WindowOrWorkerGlobalScope.caches +slug: Web/API/WindowOrWorkerGlobalScope/caches +translation_of: Web/API/WindowOrWorkerGlobalScope/caches +--- +<p>{{APIRef()}}{{SeeCompatTable}}</p> + +<p><code><strong>caches</strong></code> 是{{domxref("WindowOrWorkerGlobalScope")}}接口的一个只读属性,它返回了与当前上下文紧密相关的{{domxref("CacheStorage")}}对象。此对象激活了诸如存储用于离线使用的资产,并生成对请求生成自定义响应等功能。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>myCacheStorage</em> = self.caches; // or just caches +</pre> + +<h3 id="值">值</h3> + +<p>{{domxref("CacheStorage")}} 对象.</p> + +<h2 id="例子">例子</h2> + +<p>下面的例子展示了你在<a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a>上下文中如何应该运用cache对离线资产的进行存储。</p> + +<pre class="brush: js">this.addEventListener('install', function(event) { + event.waitUntil( + caches.open('v1').then(function(cache) { + return cache.addAll( + '/sw-test/', + '/sw-test/index.html', + '/sw-test/style.css', + '/sw-test/app.js', + '/sw-test/image-list.js', + '/sw-test/star-wars-logo.jpg', + '/sw-test/gallery/', + '/sw-test/gallery/bountyHunters.jpg', + '/sw-test/gallery/myLittleVader.jpg', + '/sw-test/gallery/snowTroopers.jpg' + ); + }) + ); +});</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('Service Workers', '#self-caches', 'caches')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Defined in a <code>WindowOrWorkerGlobalScope</code> partial in the newest spec.</td> + </tr> + <tr> + <td>{{SpecName('Service Workers')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>40.0</td> + <td>{{CompatGeckoDesktop(42)}}<br> + {{CompatGeckoDesktop(52)}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(42)}}<br> + {{CompatGeckoMobile(52)}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>caches 现在被定义在</code> {{domxref("WindowOrWorkerGlobalScope")}} 中的mixin里.</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li> + <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li> + <li>{{domxref("CacheStorage")}}</li> + <li>{{domxref("Cache")}}</li> +</ul> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/createimagebitmap/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/createimagebitmap/index.html new file mode 100644 index 0000000000..72e7b8433e --- /dev/null +++ b/files/zh-cn/web/api/windoworworkerglobalscope/createimagebitmap/index.html @@ -0,0 +1,207 @@ +--- +title: self.createImageBitmap() +slug: Web/API/WindowOrWorkerGlobalScope/createImageBitmap +translation_of: Web/API/WindowOrWorkerGlobalScope/createImageBitmap +--- +<div>{{APIRef("Canvas API")}}</div> + +<p><code><strong>createImageBitmap</strong></code> 方法存在 windows 和 workers 中. 它接受各种不同的图像来源, 并返回一个{{domxref("Promise")}}, resolve为{{domxref("ImageBitmap")}}. 可选地参数,图像被剪裁成自(sx,sy)且宽度为sw,高度为sh的像素的矩形。</p> + +<h2 id="Syntax">Syntax</h2> + +<pre>createImageBitmap(<em>image</em>[, options]).then(function(response) { ... }); +createImageBitmap(<em>image, sx, sy, sw, sh</em>[, options]).then(function(response) { ... }); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>image</code></dt> + <dd>一个图像源, 可以是一个 {{HTMLElement("img")}}, SVG {{SVGElement("image")}}, {{HTMLElement("video")}}, {{HTMLElement("canvas")}}, {{domxref("HTMLImageElement")}}, {{domxref("SVGImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("HTMLCanvasElement")}}, {{domxref("Blob")}}, {{domxref("ImageData")}}, {{domxref("ImageBitmap")}}, 或 {{domxref("OffscreenCanvas")}} 对象.</dd> + <dt><code>sx</code></dt> + <dd>裁剪点x坐标.</dd> + <dt><code>sy</code></dt> + <dd>裁剪点y坐标.</dd> + <dt><code>sw</code></dt> + <dd>裁剪宽度,值可为负数.</dd> + <dt><code>sh</code></dt> + <dd>裁剪高度,值可为负数.</dd> + <dt>options {{optional_inline}}</dt> + <dd>为其设置选项的对象。可用的选项是: + <ul> + <li><code>imageOrientation</code>: 指示图像是按原样呈现还是垂直翻转. <code>none</code> (默认不翻转) 或 <code>flipY</code>.</li> + <li><code>premultiplyAlpha</code>: 指示位图颜色通道由alpha通道预乘. 选择其一:<code>none</code>, <code>premultiply</code>, 或 <code>default</code> (默认).</li> + <li><code>colorSpaceConversion</code>: 指示图像是否使用色彩空间转换进行解码. <code>none</code> 或 <code>default</code> (默认). The value <code>default</code> indicates that implementation-specific behavior is used.</li> + <li><code>resizeWidth</code>: 指示新宽度的长整数。</li> + <li><code>resizeHeight</code>: 指示新高度的长整数。</li> + <li><code>resizeQuality</code>: 指定图像缩放算法. 选择其一<code>pixelated</code>, <code>low</code> (默认), <code>medium</code>, 或 <code>high</code>.</li> + </ul> + </dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>返回一个解决ImageBitmap的{{domxref("Promise")}} ,当Promise成功时resolves接收一个包含所得到的矩形的位图数据{{domxref("ImageBitmap")}}。</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: js language-js">var canvas = document.getElementById('myCanvas'), +ctx = canvas.getContext('2d'), +image = new Image(); + +image.onload = function() { + Promise.all([ + createImageBitmap(this, 0, 0, 32, 32), + createImageBitmap(this, 32, 0, 32, 32) + ]).then(function(sprites) { + ctx.drawImage(sprites[0], 0, 0); + ctx.drawImage(sprites[1], 32, 32); + }); +} + +image.src = 'sprites.png'; +</pre> + +<h2 id="Specifications">Specifications</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', "webappapis.html#dom-createimagebitmap", "createImageBitmap")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(50)}}</td> + <td> + <p>{{CompatGeckoDesktop(42)}}<br> + {{CompatGeckoDesktop(52)}}<sup>[1]</sup></p> + </td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>options</code> parameter</td> + <td>{{CompatChrome(52)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>39</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>resizeWidth</code>, <code>resizeHeight</code>, and <code>resizeQuality</code></td> + <td>{{CompatChrome(54)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>SVGImageElement</code> as source image</td> + <td>{{CompatChrome(59)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(50)}}</td> + <td>{{CompatChrome(50)}}</td> + <td> + <p>{{CompatGeckomobile(42)}}<br> + {{CompatGeckoMobile(52)}}<sup>[1]</sup></p> + </td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>options</code> parameter</td> + <td>{{CompatChrome(52)}}</td> + <td>{{CompatChrome(52)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>39</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>resizeWidth</code>, <code>resizeHeight</code>, and <code>resizeQuality</code></td> + <td>{{CompatChrome(54)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td> </td> + </tr> + <tr> + <td><code>SVGImageElement</code> as source image</td> + <td>{{CompatChrome(59)}}</td> + <td>{{CompatChrome(59)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>createImageBitmap()</code> now defined on {{domxref("WindowOrWorkerGlobalScope")}} mixin.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("CanvasRenderingContext2D.drawImage()")}}</li> + <li>{{domxref("ImageData")}}</li> +</ul> + +<p> + <audio style="display: none;"> </audio> +</p> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/crossoriginisolated/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/crossoriginisolated/index.html new file mode 100644 index 0000000000..ad19e53c2e --- /dev/null +++ b/files/zh-cn/web/api/windoworworkerglobalscope/crossoriginisolated/index.html @@ -0,0 +1,58 @@ +--- +title: WindowOrWorkerGlobalScope.crossOriginIsolated +slug: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated +translation_of: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated +--- +<div>{{APIRef()}}{{SeeCompatTable}}</div> + +<p><code><strong>crossOriginIsolated</strong></code> 是 {{domxref("WindowOrWorkerGlobalScope")}} 的一个只读属性,返回一个布尔值,该值指示是否可以通过{{domxref("Window.postMessage()")}}调用发送 {{jsxref("SharedArrayBuffer")}}。</p> + +<p>该值取决于响应中存在的{{httpheader("Cross-Origin-Opener-Policy")}} 和{{httpheader("Cross-Origin-Embedder-Policy")}} 头。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>myCrossOriginIsolated</em> = self.crossOriginIsolated; // 或直接 crossOriginIsolated +</pre> + +<h3 id="类型">类型</h3> + +<p>布尔类型</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">if(crossOriginIsolated) { + // post SharedArrayBuffer +} else { + // Do something else +} +</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")}}</td> + <td></td> + <td>Not yet merged into the spec</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.WindowOrWorkerGlobalScope.crossOriginIsolated")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li> + <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li> +</ul> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/fetch/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/fetch/index.html new file mode 100644 index 0000000000..3ebf7d8fdb --- /dev/null +++ b/files/zh-cn/web/api/windoworworkerglobalscope/fetch/index.html @@ -0,0 +1,173 @@ +--- +title: WorkerOrGlobalScope.fetch() +slug: Web/API/WindowOrWorkerGlobalScope/fetch +tags: + - API + - Experimental + - Fetch + - FetchAPI + - GlobalFetch + - request +translation_of: Web/API/WindowOrWorkerGlobalScope/fetch +--- +<p>{{APIRef("Fetch")}}</p> + +<p>位于 {{domxref("WorkerOrGlobalScope")}} 这一个 mixin 中的 <strong><code>fetch()</code> </strong>方法用于发起获取资源的请求。它返回一个 promise,这个 promise 会在请求响应后被 resolve,并传回 {{domxref("Response")}} 对象。</p> + +<p>{{domxref("Window")}} 和 {{domxref("WorkerGlobalScope")}} 都实现了 WorkerOrGlobalScope。 ——这意味着基本在任何场景下只要你想获取资源,都可以使用 位于 WorkerOrGlobalScope 中的 <code>fetch()</code> 方法。</p> + +<p>当遇到网络错误时,{{domxref("WorkerOrGlobalScope.fetch","fetch()")}} 返回的 promise 会被 reject,并传回 {{jsxref("TypeError")}},虽然这也可能因为权限或其它问题导致。成功的 fetch() 检查不仅要包括 promise 被 resolve,还要包括 {{domxref("Response.ok")}} 属性为 true。HTTP 404 状态并不被认为是网络错误。</p> + +<p><code>fetch()</code> 方法由 <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> 的 <code>connect-src</code>指令控制,而不是它请求的资源。</p> + +<div class="note"> +<p><strong>注意</strong>:{{domxref("WorkerOrGlobalScope.fetch","fetch()")}} 方法的参数与 {{domxref("Request.Request","Request()")}} 构造器是一样的。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">Promise<Response> fetch(input[, init]); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><em>?input</em></dt> + <dd>定义要获取的资源。这可能是: + <ul> + <li>一个 {{domxref("USVString")}} 字符串,包含要获取资源的 URL。一些浏览器会接受 <code>blob:</code> 和 <code>data:</code> 作为 schemes.</li> + <li>一个 {{domxref("Request")}} 对象。</li> + </ul> + </dd> + <dt><em>init</em> {{optional_inline}}</dt> + <dd>一个配置项对象,包括所有对请求的设置。可选的参数有: + <ul> + <li><code>method</code>: 请求使用的方法,如 <code>GET<font face="Open Sans, Arial, sans-serif">、</font></code><code>POST。</code></li> + <li><code>headers</code>: 请求的头信息,形式为 {{domxref("Headers")}} 的对象或包含 {{domxref("ByteString")}} 值的对象字面量。</li> + <li><code>body</code>: 请求的 body 信息:可能是一个 {{domxref("Blob")}}、{{domxref("BufferSource")}}、{{domxref("FormData")}}、{{domxref("URLSearchParams")}} 或者 {{domxref("USVString")}} 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。</li> + <li><code>mode</code>: 请求的模式,如 <code>cors、</code> <code>no-cors 或者</code> <code>same-origin。</code></li> + <li><code>credentials</code>: 请求的 credentials,如 <code>omit<font face="Open Sans, Arial, sans-serif">、</font></code><code>same-origin 或者</code> <code>include</code>。为了在当前域名内自动发送 cookie , 必须提供这个选项, 从 Chrome 50 开始, 这个属性也可以接受 {{domxref("FederatedCredential")}} 实例或是一个 {{domxref("PasswordCredential")}} 实例。</li> + <li><code>cache</code>: 请求的 cache 模式: <code>default</code>、 <code>no-store</code>、 <code>reload</code> 、 <code>no-cache </code>、 <code>force-cache </code>或者 <code>only-if-cached</code> 。</li> + <li><code>redirect</code>: 可用的 redirect 模式: <code>follow</code> (自动重定向), <code>error</code> (如果产生重定向将自动终止并且抛出一个错误), 或者 <code>manual</code> (手动处理重定向). 在Chrome中默认使用<code>follow(</code>Chrome 47之前的默认值是<code>manual</code>)。</li> + <li><code>referrer</code>: 一个 {{domxref("USVString")}} 可以是 <code>no-referrer<font face="Open Sans, Arial, sans-serif">、</font></code><code>client</code>或一个 URL。默认是 <code>client。</code></li> + <li><code>referrerPolicy</code>: 指定了HTTP头部referer字段的值。可能为以下值之一: <code>no-referrer、</code> <code>no-referrer-when-downgrade、</code> <code>origin、</code> <code>origin-when-cross-origin、</code> <code>unsafe-url 。</code></li> + <li><code>integrity</code>: 包括请求的 <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a> 值 ( 例如: <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)。</code></li> + </ul> + </dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>一个 {{jsxref("Promise")}},resolve 时回传 {{domxref("Response")}} 对象。</p> + +<h3 id="例外">例外</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">类型</th> + <th scope="col"><strong>描述</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td><code>AbortError</code></td> + <td>请求被{{domxref("AbortController.abort()")}}终止。</td> + </tr> + <tr> + <td><code>TypeError</code></td> + <td>从<a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>开始,如果<code>fetch()</code>接收到含有用户名和密码的URL(例如<code>http://user:password@example.com</code>),它将会抛出一个<code>TypeError</code> 。</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<p>在 <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">Fetch Request 示例</a> (参见 <a href="http://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) 中,我们使用对应的构造器创建了一个新的 {{domxref("Request")}} 对象,然后调用 fetch() 方法获取资源。因为我们是在请求一个图片,为了解析正常,我们对响应执行 {{domxref("Body.blob")}} 来设置相应的 MIME 类型。然后创建一个 Object URL,并在 {{htmlelement("img")}} 元素中把它显示出来。</p> + +<pre class="brush: js notranslate">var myImage = document.querySelector('img'); + +var myRequest = new Request('flowers.jpg'); + +fetch(myRequest).then(function(response) { + return response.blob(); +}).then(function(response) { + var objectURL = URL.createObjectURL(response); + myImage.src = objectURL; +});</pre> + +<p>在 <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-with-init-then-request">Fetch with init then Request 示例</a> (参见 <a href="http://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) 中,我们做同样的操作,除了在调用 fetch() 时传入一个 init 对象:</p> + +<pre class="brush: js notranslate">var myImage = document.querySelector('img'); + +var myHeaders = new Headers(); +myHeaders.append('Content-Type', 'image/jpeg'); + +var myInit = { method: 'GET', + headers: myHeaders, + mode: 'cors', + cache: 'default' }; + +var myRequest = new Request('flowers.jpg'); + +fetch(myRequest,myInit).then(function(response) { + ... +});</pre> + +<p>你也可以传入同样的 init 对象到 Request 构造器,来实现同样的效果,如:</p> + +<pre class="brush: js notranslate">var myRequest = new Request('flowers.jpg',myInit); +</pre> + +<p><code>init</code> 对象中的 <code>headers</code> 也可以是一个对象字面量:</p> + +<pre class="brush: js notranslate"><span class="keyword token">var</span> myInit <span class="operator token">=</span> <span class="punctuation token">{</span> method<span class="punctuation token">:</span> <span class="string token">'GET'</span><span class="punctuation token">,</span> + headers<span class="punctuation token">:</span> <span class="punctuation token">{</span> + <span class="string token">'Content-Type'</span><span class="punctuation token">:</span> <span class="string token">'image/jpeg'</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + mode<span class="punctuation token">:</span> <span class="string token">'cors'</span><span class="punctuation token">,</span> + cache<span class="punctuation token">:</span> <span class="string token">'default'</span> <span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> myRequest <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Request</span><span class="punctuation token">(</span><span class="string token">'flowers.jpg'</span><span class="punctuation token">,</span> myInit<span class="punctuation token">)</span><span class="punctuation token">;</span></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('Fetch','#fetch-method','fetch()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Defined in a <code>WindowOrWorkerGlobalScope</code> partial in the newest spec.</td> + </tr> + <tr> + <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('Credential Management')}}</td> + <td>{{Spec2('Credential Management')}}</td> + <td>Adds {{domxref("FederatedCredential")}} or {{domxref("PasswordCredential")}} instance as a possible value for <code>init.credentials</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API">Fetch API</a></li> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..a0b3d68d14 --- /dev/null +++ b/files/zh-cn/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,182 @@ +--- +title: WindowOrWorkerGlobalScope +slug: Web/API/WindowOrWorkerGlobalScope +tags: + - API + - DOM + - DOM API + - Service Worker + - TopicStub + - Window + - WindowOrWorkerGlobalScope + - Worker + - WorkerGlobalScope +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +<div>{{ApiRef()}}</div> + +<p><strong><code>WindowOrWorkerGlobalScope</code></strong> mixin 了对 {{domxref("Window")}} 和{{domxref("WorkerGlobalScope")}} 接口的公共特性的描述。显然除了下文即将列出的之外,这些接口中的每一个,都可以增加更多的特性。</p> + +<div class="note"> +<p><strong>Note</strong>: <code>WindowOrWorkerGlobalScope</code> 是一个 mixin 而并非 interface。不能创建一个类型为 <code>WindowOrWorkerGlobalScope 的对象。</code></p> +</div> + +<h2 id="属性">属性</h2> + +<p>以下属性由 {{domxref("WindowOrWorkerGlobalScope")}} mixin 定义,同时被 {{domxref("Window")}} 和 {{domxref("WorkerGlobalScope")}} 实现。</p> + +<div id="Properties"> +<dl> + <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt> + <dd>返回与当前上下文相关联的 {{domxref("CacheStorage")}} 对象。这个对象提供了一些功能,例如存储可供离线使用的 asstes,以及对 requests 生成自定义的 responses 。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt> + <dd>提供一种机制,以供应用可以异步访问 indexed databases;返回 {{domxref("IDBFactory")}} 对象。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt> + <dd>返回一个 boolean 值, 表示当前上下文是否安全:安全返回 <code>true,<font face="Open Sans, arial, sans-serif">否则返回 </font></code><code>false 。</code></dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt> + <dd>返回全局对象的 origin,序列化为 string 。</dd> +</dl> +</div> + +<h2 id="方法">方法</h2> + +<p>以下方法由 {{domxref("WindowOrWorkerGlobalScope")}} mixin 定义,同时被 {{domxref("Window")}} 和 {{domxref("WorkerGlobalScope")}} 实现。</p> + +<dl> + <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> + <dd>对 base-64加密的数据字符串进行解码。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt> + <dd>从二进制数据中创建 base-64 编码的 ASCII 字符串。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt> + <dd>取消对 {{domxref("WindowOrWorkerGlobalScope.setInterval()")}} 的重复执行。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt> + <dd>取消对 {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}} 的延迟执行。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt> + <dd>接受多个不同的图像源, 返回一个 {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}} 。可选: 指定 <em>(sx, sy)</em> with width sw, and height sh ,将源裁切成矩形。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> + <dd>开始从网络中 fetch 一个资源的进程。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt> + <dd>每过一个指定的毫秒时间后,执行一次指定函数。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt> + <dd>过了一个指定的毫秒时间后,执行一次指定函数。</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', '<code>WindowOrWorkerGlobalScope</code> mixin')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>This is where the main mixin is defined.</td> + </tr> + <tr> + <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Definition of the <code>fetch()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Definition of the <code>caches</code> property.</td> + </tr> + <tr> + <td>{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td> + <td>{{Spec2('IndexedDB 2')}}</td> + <td>Definition of the <code>indexedDB</code> property.</td> + </tr> + <tr> + <td>{{SpecName('Secure Contexts', 'webappapis.html#dom-origin', 'isSecureContext')}}</td> + <td>{{Spec2('Secure Contexts')}}</td> + <td>Definition of the <code>isSecureContext</code> property.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop(52)}}</td> + <td>54</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>origin</code></td> + <td>{{CompatGeckoDesktop(54)}}</td> + <td>59</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(52)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>54</td> + </tr> + <tr> + <td><code>origin</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(54)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>59</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Window")}}</li> + <li>{{domxref("WorkerGlobalScope")}}</li> +</ul> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/indexeddb/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/indexeddb/index.html new file mode 100644 index 0000000000..1c1f17f52c --- /dev/null +++ b/files/zh-cn/web/api/windoworworkerglobalscope/indexeddb/index.html @@ -0,0 +1,175 @@ +--- +title: WindowOrWorkerGlobalScope.indexedDB +slug: Web/API/WindowOrWorkerGlobalScope/indexedDB +tags: + - API + - Database + - IndexedDB + - Reference + - Storage + - WindowOrWorkerGlobalScope + - 参考 + - 属性 +translation_of: Web/API/WindowOrWorkerGlobalScope/indexedDB +--- +<p>{{ APIRef() }}</p> + +<p><strong><code>indexedDB</code></strong> 是 {{domxref("WindowOrWorkerGlobalScope")}}的一个只读属性,它集成了为应用程序提供异步访问索引数据库的功能的机制。.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var IDBFactory = self.indexedDB;</pre> + +<div class="twocolumns"> +<h2 id="值">值</h2> +</div> + +<p>一个 {{domxref("IDBFactory")}} 对象.</p> + +<p id="示例">示例</p> + +<pre class="brush: js;highlight:[3]">var db; +function openDB() { + var DBOpenRequest = window.indexedDB.open('toDoList'); + DBOpenRequest.onsuccess = function(e) { + db = DBOpenRequest.result; + } +}</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('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td> + <td>{{Spec2('IndexedDB 2')}}</td> + <td>Defined in a <code>WindowOrWorkerGlobalScope</code> partial in the newest spec.</td> + </tr> + <tr> + <td>{{SpecName('IndexedDB', '#widl-IDBEnvironment-indexedDB', 'indexedDB')}}</td> + <td>{{Spec2('IndexedDB')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>23{{property_prefix("webkit")}}<br> + 24</td> + <td>{{CompatVersionUnknown}}</td> + <td>10 {{property_prefix("moz")}}<br> + {{CompatGeckoDesktop("16.0")}}<br> + {{CompatGeckoDesktop("52.0")}}<sup>[1]</sup></td> + <td>10, partial</td> + <td>15</td> + <td>7.1</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Indexed Database 2.0</td> + <td>{{CompatChrome(58)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(45)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("22.0")}}<br> + {{CompatGeckoMobile("52.0")}}<sup>[1]</sup></td> + <td>1.0.1</td> + <td>10</td> + <td>22</td> + <td>8</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Indexed Database 2.0</td> + <td>{{CompatChrome(58)}}</td> + <td>{{CompatChrome(58)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>indexedDB</code> 定义在 {{domxref("WindowOrWorkerGlobalScope")}} mixin(一种实现多继承的方法)上.</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> + <li>Starting transactions: {{domxref("IDBDatabase")}}</li> + <li>Using transactions: {{domxref("IDBTransaction")}}</li> + <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li> + <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li> + <li>Using cursors: {{domxref("IDBCursor")}}</li> + <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> +</ul> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/issecurecontext/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/issecurecontext/index.html new file mode 100644 index 0000000000..d9f72b13a5 --- /dev/null +++ b/files/zh-cn/web/api/windoworworkerglobalscope/issecurecontext/index.html @@ -0,0 +1,100 @@ +--- +title: WindowOrWorkerGlobalScope.isSecureContext +slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext +tags: + - API + - Property + - Reference + - Window + - WindowOrWorkerGlobalContext + - Workers + - isSecureContext +translation_of: Web/API/WindowOrWorkerGlobalScope/isSecureContext +--- +<p>{{APIRef()}}{{SeeCompatTable}}</p> + +<p><code><strong>isSecureContext</strong></code> 是 {{domxref("WindowOrWorkerGlobalScope")}} 的一个只读属性,返回一个布尔值,标识当前上下文是否安全,安全(true)或不安全(false)。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>isItSecure</em> = self.isSecureContext; // 或者直接使用 isSecureContext +</pre> + +<h3 id="类型">类型</h3> + +<p> {{domxref("Boolean")}}.</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('Secure Contexts', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.isSecureContext')}}</td> + <td>{{Spec2('Secure Contexts')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(55)}}</td> + <td>{{CompatGeckoDesktop(52)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(55)}}</td> + <td>{{CompatChrome(55)}}</td> + <td>{{CompatGeckoMobile(52)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="/en-US/docs/Web/Security/Secure_Contexts">Secure contexts</a></li> +</ul> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/origin/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/origin/index.html new file mode 100644 index 0000000000..eac425fbd9 --- /dev/null +++ b/files/zh-cn/web/api/windoworworkerglobalscope/origin/index.html @@ -0,0 +1,98 @@ +--- +title: WindowOrWorkerGlobalScope.origin +slug: Web/API/WindowOrWorkerGlobalScope/origin +tags: + - global scope + - origin + - serialized +translation_of: Web/API/WindowOrWorkerGlobalScope/origin +--- +<p>{{APIRef()}}{{SeeCompatTable}}{{domxref("WindowOrWorkerGlobalScope")}} 接口的 <code><strong>origin</strong></code> 只读属性返回全局范围的 <strong>origin</strong>, 序列化为一个字符串。</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">let <em>myOrigin</em> = self.origin; // or just origin +</pre> + +<h3 id="Value">Value</h3> + +<p>A {{domxref("USVString")}}.</p> + +<h2 id="Examples">Examples</h2> + +<p>Executed from inside a worker script, the following snippet will log the worker's global scope's origin to the console each time it receives a message</p> + +<pre class="brush: js">onmessage = function() { + console.log(self.origin); +};</pre> + +<p>If the origin is not a scheme/host/port tuple (say you are trying to run it locally, i.e. via <code>file://</code> URL), <code>origin</code> will return the string <code>"null"</code>.</p> + +<h2 id="Specifications">Specifications</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', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.origin')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(59)}}</td> + <td>{{CompatGeckoDesktop(54)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(59)}}</td> + <td>{{CompatChrome(59)}}</td> + <td>{{CompatGeckoMobile(54)}} </td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/queuemicrotask/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/queuemicrotask/index.html new file mode 100644 index 0000000000..271773fb93 --- /dev/null +++ b/files/zh-cn/web/api/windoworworkerglobalscope/queuemicrotask/index.html @@ -0,0 +1,112 @@ +--- +title: WindowOrWorkerGlobalScope.queueMicrotask() +slug: Web/API/WindowOrWorkerGlobalScope/queueMicrotask +tags: + - API + - JavaScript + - Method + - Microtask + - 参考 + - 同步 + - 方法 +translation_of: Web/API/WindowOrWorkerGlobalScope/queueMicrotask +--- +<div>{{APIRef("HTML DOM")}}</div> + +<div><span class="seoSummary">{{domxref("Window")}} 或 {{domxref("Worker")}} 接口的 <code><strong>queueMicrotask()</strong></code> 方法,queues a microtask to be executed at a safe time prior to control returning to the browser's event loop.</span>microtask 是一个简短的函数,它将在当前任务(task)完成其工作之后运行,并且在执行上下文的控制返回到浏览器的事件循环之前,没有其他代码等待运行。The microtask is a short function which will run after the current task has completed its work and when there is no other code waiting to be run before control of the execution context is returned to the browser's event loop.</div> + +<div></div> + +<p>This lets your code run without interfering with any other, potentially higher priority, code that is pending, but before the browser regains control over the execution context, potentially depending on work you need to complete. You can learn more about how to use microtasks and why you might choose to do so in our <a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">microtask guide</a>.</p> + +<p>The importance of microtasks comes in its ability to perform tasks asynchronously but in a specific order. See <a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">Using microtasks in JavaScript with queueMicrotask()</a> for more details.</p> + +<p>Microtasks are especially useful for libraries and frameworks that need to perform final cleanup or other just-before-rendering tasks.</p> + +<p><code>queueMicrotask()</code> 处于 {{domxref("WindowOrWorkerGlobalScope")}} mixin 之下。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>scope</em>.queueMicrotask(<em>function</em>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>function</code></dt> + <dd>A {{jsxref("function")}} to be executed when the browser engine determines it is safe to call your code.微任务(microtask)的执行顺序在所有挂起的任务(pending tasks)完成之后,在对浏览器的事件循环产生控制(yielding control to the browser's event loop)之前。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p><code>undefined</code>。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">self.queueMicrotask(() => { + // 函数的内容 +})</pre> + +<p>来自 <a href="https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#microtask-queuing"><code>queueMicrotask</code> 的规范文档:</a></p> + +<pre class="brush: js">MyElement.prototype.loadData = function (url) { + if (this._cache[url]) { + queueMicrotask(() => { + this._setData(this._cache[url]); + this.dispatchEvent(new Event("load")); + }); + } else { + fetch(url).then(res => res.arrayBuffer()).then(data => { + this._cache[url] = data; + this._setData(data); + this.dispatchEvent(new Event("load")); + }); + } +};</pre> + +<h2 id="polyfill">polyfill</h2> + +<p>下面的代码是一份 <code>queueMicrotask()</code> 的 polyfill。它通过使用立即 resolve 的 promise 创建一个微任务(microtask),如果无法创建 promise,则回落(fallback)到使用<code>setTimeout()</code>。</p> + +<pre class="brush: js">if (typeof window.queueMicrotask !== "function") { + window.queueMicrotask = function (callback) { + Promise.resolve() + .then(callback) + .catch(e => setTimeout(() => { throw e; })); + }; +} +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "timers-and-user-prompts.html#microtask-queuing", "self.queueMicrotask()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">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.<br> +<br> +NOTE: data on this has been submitted; just waiting on it to be reviewed, merged, and for a new data release before it will show up here. See https://github.com/mdn/browser-compat-data/pull/4754 for PR.</div> + +<p>{{Compat("api.WindowOrWorkerGlobalScope.queueMicrotask")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">Using microtasks in JavaScript with queueMicrotask()</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a></li> + <li><a href="https://github.com/fergald/docs/blob/master/explainers/queueMicrotask.md">queueMicrotask explainer</a></li> + <li><a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/">Tasks, microtasks, queues and schedules</a> by Jake Archibald</li> +</ul> |
