zh-cn: Format /web/api using Prettier (part 9)

mdn · Jul 28, 2023 · e2d42db · e2d42db
1 parent 09c0ef4
commit e2d42db
Show file tree

Hide file tree

Showing 100 changed files with 1,002 additions and 823 deletions.
diff --git a/files/zh-cn/web/api/resizeobserver/resizeobserver/index.md b/files/zh-cn/web/api/resizeobserver/resizeobserver/index.md
@@ -44,19 +44,34 @@ const resizeObserver = new ResizeObserver((entries) => {
   for (const entry of entries) {
     if (entry.contentBoxSize) {
       if (entry.contentBoxSize[0]) {
-        h1Elem.style.fontSize = `${Math.max(1.5, entry.contentBoxSize[0].inlineSize / 200)}rem`;
-        pElem.style.fontSize = `${Math.max(1, entry.contentBoxSize[0].inlineSize / 600)}rem`;
+        h1Elem.style.fontSize = `${Math.max(
+          1.5,
+          entry.contentBoxSize[0].inlineSize / 200,
+        )}rem`;
+        pElem.style.fontSize = `${Math.max(
+          1,
+          entry.contentBoxSize[0].inlineSize / 600,
+        )}rem`;
       } else {
         // legacy path
-        h1Elem.style.fontSize = `${Math.max(1.5, entry.contentBoxSize.inlineSize / 200)}rem`;
-        pElem.style.fontSize = `${Math.max(1, entry.contentBoxSize.inlineSize / 600)}rem`;
+        h1Elem.style.fontSize = `${Math.max(
+          1.5,
+          entry.contentBoxSize.inlineSize / 200,
+        )}rem`;
+        pElem.style.fontSize = `${Math.max(
+          1,
+          entry.contentBoxSize.inlineSize / 600,
+        )}rem`;
       }
     } else {
-      h1Elem.style.fontSize = `${Math.max(1.5, entry.contentRect.width / 200)}rem`;
+      h1Elem.style.fontSize = `${Math.max(
+        1.5,
+        entry.contentRect.width / 200,
+      )}rem`;
       pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
     }
   }
-  console.log('Size changed');
+  console.log("Size changed");
 });
 
 resizeObserver.observe(divElem);

diff --git a/files/zh-cn/web/api/resizeobserver/unobserve/index.md b/files/zh-cn/web/api/resizeobserver/unobserve/index.md
@@ -36,23 +36,38 @@ const resizeObserver = new ResizeObserver((entries) => {
     if (entry.contentBoxSize) {
       // Checking for chrome as using a non-standard array
       if (entry.contentBoxSize[0]) {
-        h1Elem.style.fontSize = `${Math.max(1.5, entry.contentBoxSize[0].inlineSize / 200)}rem`;
-        pElem.style.fontSize = `${Math.max(1, entry.contentBoxSize[0].inlineSize / 600)}rem`;
+        h1Elem.style.fontSize = `${Math.max(
+          1.5,
+          entry.contentBoxSize[0].inlineSize / 200,
+        )}rem`;
+        pElem.style.fontSize = `${Math.max(
+          1,
+          entry.contentBoxSize[0].inlineSize / 600,
+        )}rem`;
       } else {
-        h1Elem.style.fontSize = `${Math.max(1.5, entry.contentBoxSize.inlineSize / 200)}rem`;
-        pElem.style.fontSize = `${Math.max(1, entry.contentBoxSize.inlineSize / 600)}rem`;
+        h1Elem.style.fontSize = `${Math.max(
+          1.5,
+          entry.contentBoxSize.inlineSize / 200,
+        )}rem`;
+        pElem.style.fontSize = `${Math.max(
+          1,
+          entry.contentBoxSize.inlineSize / 600,
+        )}rem`;
       }
     } else {
-      h1Elem.style.fontSize = `${Math.max(1.5, entry.contentRect.width / 200)}rem`;
+      h1Elem.style.fontSize = `${Math.max(
+        1.5,
+        entry.contentRect.width / 200,
+      )}rem`;
       pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
     }
   }
-  console.log('Size changed');
+  console.log("Size changed");
 });
 
 resizeObserver.observe(divElem);
 
-checkbox.addEventListener('change', () => {
+checkbox.addEventListener("change", () => {
   if (checkbox.checked) {
     resizeObserver.observe(divElem);
   } else {

diff --git a/files/zh-cn/web/api/resizeobserverentry/borderboxsize/index.md b/files/zh-cn/web/api/resizeobserverentry/borderboxsize/index.md
@@ -29,12 +29,12 @@ const resizeObserver = new ResizeObserver((entries) => {
     if (entry.borderBoxSize?.length > 0) {
       entry.target.style.borderRadius = calcBorderRadius(
         entry.borderBoxSize[0].inlineSize,
-        entry.borderBoxSize[0].blockSize
+        entry.borderBoxSize[0].blockSize,
       );
     } else {
       entry.target.style.borderRadius = calcBorderRadius(
         entry.contentRect.width,
-        entry.contentRect.height
+        entry.contentRect.height,
       );
     }
   }

diff --git a/files/zh-cn/web/api/resizeobserverentry/contentboxsize/index.md b/files/zh-cn/web/api/resizeobserverentry/contentboxsize/index.md
@@ -32,12 +32,12 @@ const resizeObserver = new ResizeObserver((entries) => {
     if (entry.borderBoxSize?.length > 0) {
       entry.target.style.borderRadius = calcBorderRadius(
         entry.borderBoxSize[0].inlineSize,
-        entry.borderBoxSize[0].blockSize
+        entry.borderBoxSize[0].blockSize,
       );
     } else {
       entry.target.style.borderRadius = calcBorderRadius(
         entry.contentRect.width,
-        entry.contentRect.height
+        entry.contentRect.height,
       );
     }
   }

diff --git a/files/zh-cn/web/api/resizeobserverentry/contentrect/index.md b/files/zh-cn/web/api/resizeobserverentry/contentrect/index.md
@@ -21,10 +21,19 @@ slug: Web/API/ResizeObserverEntry/contentRect
 const resizeObserver = new ResizeObserver((entries) => {
   for (const entry of entries) {
     if (entry.contentBoxSize) {
-      h1Elem.style.fontSize = `${Math.max(1.5, entry.contentBoxSize.inlineSize / 200)}rem`;
-      pElem.style.fontSize = `${Math.max(1, entry.contentBoxSize.inlineSize / 600)}rem`;
+      h1Elem.style.fontSize = `${Math.max(
+        1.5,
+        entry.contentBoxSize.inlineSize / 200,
+      )}rem`;
+      pElem.style.fontSize = `${Math.max(
+        1,
+        entry.contentBoxSize.inlineSize / 600,
+      )}rem`;
     } else {
-      h1Elem.style.fontSize = `${Math.max(1.5, entry.contentRect.width / 200)}rem`;
+      h1Elem.style.fontSize = `${Math.max(
+        1.5,
+        entry.contentRect.width / 200,
+      )}rem`;
       pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
     }
   }

diff --git a/files/zh-cn/web/api/resizeobserverentry/devicepixelcontentboxsize/index.md b/files/zh-cn/web/api/resizeobserverentry/devicepixelcontentboxsize/index.md
@@ -30,7 +30,7 @@ const observer = new ResizeObserver((entries) => {
 
   /* … render to canvas … */
 });
-observer.observe(canvas, {box: 'device-pixel-content-box'});
+observer.observe(canvas, { box: "device-pixel-content-box" });
 ```
 
 ## 规范

diff --git a/files/zh-cn/web/api/resizeobserverentry/index.md b/files/zh-cn/web/api/resizeobserverentry/index.md
@@ -33,11 +33,20 @@ slug: Web/API/ResizeObserverEntry
 ```js
 const resizeObserver = new ResizeObserver((entries) => {
   for (let entry of entries) {
-    if(entry.contentBoxSize) {
-      h1Elem.style.fontSize = `${Math.max(1.5, entry.contentBoxSize.inlineSize / 200)}rem`;
-      pElem.style.fontSize = `${Math.max(1, entry.contentBoxSize.inlineSize / 600)}rem`;
+    if (entry.contentBoxSize) {
+      h1Elem.style.fontSize = `${Math.max(
+        1.5,
+        entry.contentBoxSize.inlineSize / 200,
+      )}rem`;
+      pElem.style.fontSize = `${Math.max(
+        1,
+        entry.contentBoxSize.inlineSize / 600,
+      )}rem`;
     } else {
-      h1Elem.style.fontSize = `${Math.max(1.5, entry.contentRect.width / 200)}rem`;
+      h1Elem.style.fontSize = `${Math.max(
+        1.5,
+        entry.contentRect.width / 200,
+      )}rem`;
       pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
     }
   }

diff --git a/files/zh-cn/web/api/resizeobserverentry/target/index.md b/files/zh-cn/web/api/resizeobserverentry/target/index.md
@@ -22,14 +22,21 @@ slug: Web/API/ResizeObserverEntry/target
 const resizeObserver = new ResizeObserver((entries) => {
   for (const entry of entries) {
     if (entry.contentBoxSize) {
-      entry.target.style.borderRadius = `${Math.min(100, (entry.contentBoxSize.inlineSize / 10) + (entry.contentBoxSize.blockSize / 10))}px`;
+      entry.target.style.borderRadius = `${Math.min(
+        100,
+        entry.contentBoxSize.inlineSize / 10 +
+          entry.contentBoxSize.blockSize / 10,
+      )}px`;
     } else {
-      entry.target.style.borderRadius = `${Math.min(100, (entry.contentRect.width / 10) + (entry.contentRect.height / 10))}px`;
+      entry.target.style.borderRadius = `${Math.min(
+        100,
+        entry.contentRect.width / 10 + entry.contentRect.height / 10,
+      )}px`;
     }
   }
 });
 
-resizeObserver.observe(document.querySelector('div'));
+resizeObserver.observe(document.querySelector("div"));
 ```
 
 ## 规范

diff --git a/files/zh-cn/web/api/response/arraybuffer/index.md b/files/zh-cn/web/api/response/arraybuffer/index.md
@@ -35,25 +35,25 @@ Once `getData()` has finished running, we start the audio source playing with `s
 function getData() {
   source = audioCtx.createBufferSource();
 
-  var myRequest = new Request('viper.ogg');
+  var myRequest = new Request("viper.ogg");
 
-  fetch(myRequest).then(function(response) {
-    response.arrayBuffer().then(function(buffer) {
-      audioCtx.decodeAudioData(buffer, function(decodedData) {
+  fetch(myRequest).then(function (response) {
+    response.arrayBuffer().then(function (buffer) {
+      audioCtx.decodeAudioData(buffer, function (decodedData) {
         source.buffer = decodedData;
         source.connect(audioCtx.destination);
       });
     });
   });
-};
+}
 
 // wire up buttons to stop and play audio
 
-play.onclick = function() {
+play.onclick = function () {
   getData();
   source.start(0);
-  play.setAttribute('disabled', 'disabled');
-}
+  play.setAttribute("disabled", "disabled");
+};
 ```
 
 ## 规范

diff --git a/files/zh-cn/web/api/response/blob/index.md b/files/zh-cn/web/api/response/blob/index.md
@@ -10,7 +10,7 @@ slug: Web/API/Response/blob
 ## 句法
 
 ```js
-response.blob().then(function(myBlob) {
+response.blob().then(function (myBlob) {
   // do something with myBlob
 });
 ```
@@ -28,18 +28,18 @@ A promise that resolves with a {{domxref("Blob")}}.
 在我们 [fetch request example](https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request) (run [fetch request live](http://mdn.github.io/fetch-examples/fetch-request/)) 中，我们使用[Request.Request](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/RequestFilter)构造方法创建了一个新的 request 对象，然后使用它来获取一个 JPG 文件。当 fetch 成功的时候，我们使用 blob() 从 response 中读取一个[Blob](/zh-CN/docs/Web/API/Blob)对象，并使用[URL.createObjectURL](/zh-CN/docs/Web/API/URL/createObjectURL) 将它放入一个 object URL，然后把 URL 设置为[img](/zh-CN/docs/Web/HTML/Element/img)元素的 src 属性以显示这张图片。
 
 ```js
-var myImage = document.querySelector('img');
+var myImage = document.querySelector("img");
 
-var myRequest = new Request('flowers.jpg');
+var myRequest = new Request("flowers.jpg");
 
 fetch(myRequest)
-.then(function(response) {
-  return response.blob();
-})
-.then(function(myBlob) {
-  var objectURL = URL.createObjectURL(myBlob);
-  myImage.src = objectURL;
-});
+  .then(function (response) {
+    return response.blob();
+  })
+  .then(function (myBlob) {
+    var objectURL = URL.createObjectURL(myBlob);
+    myImage.src = objectURL;
+  });
 ```
 
 ## 规范

diff --git a/files/zh-cn/web/api/response/body/index.md b/files/zh-cn/web/api/response/body/index.md
@@ -18,40 +18,40 @@ slug: Web/API/Response/body
 在我们的[简单 pump 流](https://mdn.github.io/dom-examples/streams/simple-pump.html)示例中，我们获取一个图片，使用 `response.body` 暴露响应的流，用 {{domxref("ReadableStream.getReader()", "ReadableStream.getReader()")}} 创建一个 reader，然后将其置入第二个自定义读取流中——有效的创建了一个完全相同的图片副本。
 
 ```js
-const image = document.getElementById('target');
+const image = document.getElementById("target");
 
 // 请求原始图片
-fetch('./tortoise.png')
-// 取出 body
-.then(response => response.body)
-.then(body => {
-  const reader = body.getReader();
-
-  return new ReadableStream({
-    start(controller) {
-      return pump();
-
-      function pump() {
-        return reader.read().then(({ done, value }) => {
-          // 读不到更多数据就关闭流
-          if (done) {
-            controller.close();
-            return;
-          }
-
-          // 将下一个数据块置入流中
-          controller.enqueue(value);
-          return pump();
-        });
-      }
-    }
+fetch("./tortoise.png")
+  // 取出 body
+  .then((response) => response.body)
+  .then((body) => {
+    const reader = body.getReader();
+
+    return new ReadableStream({
+      start(controller) {
+        return pump();
+
+        function pump() {
+          return reader.read().then(({ done, value }) => {
+            // 读不到更多数据就关闭流
+            if (done) {
+              controller.close();
+              return;
+            }
+
+            // 将下一个数据块置入流中
+            controller.enqueue(value);
+            return pump();
+          });
+        }
+      },
+    });
   })
-})
-.then(stream => new Response(stream))
-.then(response => response.blob())
-.then(blob => URL.createObjectURL(blob))
-.then(url => console.log(image.src = url))
-.catch(err => console.error(err));
+  .then((stream) => new Response(stream))
+  .then((response) => response.blob())
+  .then((blob) => URL.createObjectURL(blob))
+  .then((url) => console.log((image.src = url)))
+  .catch((err) => console.error(err));
 ```
 
 ## 规范

diff --git a/files/zh-cn/web/api/response/bodyused/index.md b/files/zh-cn/web/api/response/bodyused/index.md
@@ -26,22 +26,26 @@ var myBodyUsed = response.bodyUsed;
 ### HTML Content
 
 ```html
-<img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png">
+<img
+  class="my-image"
+  src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png" />
 ```
 
 ### JS Content
 
 ```js
-var myImage = document.querySelector('.my-image');
-fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg').then(function(response) {
+var myImage = document.querySelector(".my-image");
+fetch("https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg")
+  .then(function (response) {
     console.log(response.bodyUsed);
     var res = response.blob();
     console.log(response.bodyUsed);
     return res;
-}).then(function(response) {
+  })
+  .then(function (response) {
     var objectURL = URL.createObjectURL(response);
     myImage.src = objectURL;
-});
+  });
 ```
 
 {{EmbedLiveSample('示例', '100%', '250px')}}

diff --git a/files/zh-cn/web/api/response/clone/index.md b/files/zh-cn/web/api/response/clone/index.md
@@ -30,10 +30,10 @@ clone()
 在我们的 [Fetch Response 克隆示例](https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-response-clone)（请参阅[在线 Fetch Response 克隆示例](http://mdn.github.io/fetch-examples/fetch-response-clone/)）我们使用 {{domxref("Request.Request","Request()")}} 构造函数创建一个新的 {{domxref("Request")}} 来传递一个 JPG 路径。然后我们使用 {{domxref("GlobalFetch.fetch","fetch()")}} 获取这个请求。当 fetch 成功兑现时，我们克隆它，使用两个 {{domxref("Body.blob")}} 调用从两个响应中提取 blob，使用 {{domxref("URL.createObjectURL")}} 从 blob 创建对象 URL，并将它们显示在两个单独的 {{htmlelement("img")}} 元素中。
 
 ```js
-const image1 = document.querySelector('.img1');
-const image2 = document.querySelector('.img2');
+const image1 = document.querySelector(".img1");
+const image2 = document.querySelector(".img2");
 
-const myRequest = new Request('flowers.jpg');
+const myRequest = new Request("flowers.jpg");
 
 fetch(myRequest).then((response) => {
   const response2 = response.clone();