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

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

Hide file tree

Showing 100 changed files with 1,256 additions and 1,055 deletions.
diff --git a/files/zh-cn/web/api/file/type/index.md b/files/zh-cn/web/api/file/type/index.md
@@ -20,7 +20,7 @@ var name = file.type;
 ## 示例
 
 ```html
-<input type="file" multiple onchange="showType(this)">
+<input type="file" multiple onchange="showType(this)" />
 ```
 
 ```js

diff --git a/files/zh-cn/web/api/file/webkitrelativepath/index.md b/files/zh-cn/web/api/file/webkitrelativepath/index.md
@@ -31,16 +31,20 @@ slug: Web/API/File/webkitRelativePath
 ### JavaScript
 
 ```js
-document.getElementById("filepicker").addEventListener("change", function(event) {
-  let output = document.getElementById("listing");
-  let files = event.target.files;
-
-  for (let i=0; i<files.length; i++) {
-    let item = document.createElement("li");
-    item.innerHTML = files[i].webkitRelativePath;
-    output.appendChild(item);
-  };
-}, false);
+document.getElementById("filepicker").addEventListener(
+  "change",
+  function (event) {
+    let output = document.getElementById("listing");
+    let files = event.target.files;
+
+    for (let i = 0; i < files.length; i++) {
+      let item = document.createElement("li");
+      item.innerHTML = files[i].webkitRelativePath;
+      output.appendChild(item);
+    }
+  },
+  false,
+);
 ```
 
 ### 结果

diff --git a/files/zh-cn/web/api/file_and_directory_entries_api/firefox_support/index.md b/files/zh-cn/web/api/file_and_directory_entries_api/firefox_support/index.md
@@ -31,7 +31,8 @@ slug: Web/API/File_and_Directory_Entries_API/Firefox_support
 为了确保你的代码可以在 Chrome 和其他浏览器上运行，你可以包括如下代码：
 
 ```js
-var FileSystemDirectoryEntry = window.FileSystemDirectoryEntry || window.DirectoryEntry;
+var FileSystemDirectoryEntry =
+  window.FileSystemDirectoryEntry || window.DirectoryEntry;
 var FileSystemEntry = window.FileSystemEntry || window.Entry;
 ```
 

diff --git a/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.md b/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.md
@@ -61,7 +61,7 @@ const numFiles = files.length;
 下面的例子展示了 `size` 属性的一种可能用法：
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
@@ -104,7 +104,7 @@ const numFiles = files.length;
           ];
           const exponent = Math.min(
             Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
-            units.length - 1
+            units.length - 1,
           );
           const approx = numberOfBytes / 1024 ** exponent;
           const output =
@@ -117,7 +117,7 @@ const numFiles = files.length;
             uploadInput.files.length;
           document.getElementById("fileSize").textContent = output;
         },
-        false
+        false,
       );
     </script>
   </body>
@@ -153,7 +153,7 @@ fileSelect.addEventListener(
       fileElem.click();
     }
   },
-  false
+  false,
 );
 ```
 
@@ -308,7 +308,7 @@ URL.revokeObjectURL(objectURL);
 </div>
 ```
 
-这就建立了我们的文件 {{HTMLElement("input")}} 元素，以及调用文件选取器的链接（因为我们把文件 input 隐藏起来，以防止显示那个不那么吸引人的用户界面）。这在[使用 click() 方法隐藏文件 input 元素](#通过_click()_方法使用隐藏的_file_input_元素)一节中有所说明，调用文件选取器的方法也是如此。
+这就建立了我们的文件 {{HTMLElement("input")}} 元素，以及调用文件选取器的链接（因为我们把文件 input 隐藏起来，以防止显示那个不那么吸引人的用户界面）。这在[使用 click() 方法隐藏文件 input 元素](<#通过_click()_方法使用隐藏的_file_input_元素>)一节中有所说明，调用文件选取器的方法也是如此。
 
 `handleFiles()` 方法如下：
 
@@ -325,7 +325,7 @@ fileSelect.addEventListener(
     }
     e.preventDefault(); // 避免导航至“#”
   },
-  false
+  false,
 );
 
 fileElem.addEventListener("change", handleFiles, false);
@@ -364,12 +364,12 @@ function handleFiles() {
 2. 通过调用列表的 {{DOMxRef("Node.appendChild()")}} 方法来将新的列表元素插入到 {{HTMLElement("div")}} 块。
 3. 遍历 `files` 代表的文件集合 {{DOMxRef("FileList")}} 中的每个 {{DOMxRef("File")}}：
 
-    1. 创建一个新的列表项（{{HTMLElement("li")}}）元素并插入到列表中。
-    2. 创建一个新的图片（{{HTMLElement("img")}}）元素。
-    3. 设置图片的源为一个新的指代文件的对象 URL，使用 {{DOMxRef("URL.createObjectURL()")}} 来创建 blob URL。
-    4. 设置图片的高度为 60 像素。
-    5. 设置图片的 load 事件处理器来释放对象 URL，当图片加载完成之后对象 URL 就不再需要了。这个可以通过调用 {{DOMxRef("URL.revokeObjectURL()")}} 方法并且传递 `img.src`中的对象 URL 字符串来实现。
-    6. 将新的列表项添加到列表中。
+   1. 创建一个新的列表项（{{HTMLElement("li")}}）元素并插入到列表中。
+   2. 创建一个新的图片（{{HTMLElement("img")}}）元素。
+   3. 设置图片的源为一个新的指代文件的对象 URL，使用 {{DOMxRef("URL.createObjectURL()")}} 来创建 blob URL。
+   4. 设置图片的高度为 60 像素。
+   5. 设置图片的 load 事件处理器来释放对象 URL，当图片加载完成之后对象 URL 就不再需要了。这个可以通过调用 {{DOMxRef("URL.revokeObjectURL()")}} 方法并且传递 `img.src`中的对象 URL 字符串来实现。
+   6. 将新的列表项添加到列表中。
 
 这是上面代码的一个在线示例：
 
@@ -415,7 +415,7 @@ function FileUpload(img, file) {
         self.ctrl.update(percentage);
       }
     },
-    false
+    false,
   );
 
   xhr.upload.addEventListener(
@@ -425,11 +425,11 @@ function FileUpload(img, file) {
       const canvas = self.ctrl.ctx.canvas;
       canvas.parentNode.removeChild(canvas);
     },
-    false
+    false,
   );
   xhr.open(
     "POST",
-    "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php"
+    "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php",
   );
   xhr.overrideMimeType("text/plain; charset=x-user-defined-binary");
   reader.onload = (evt) => {
@@ -453,7 +453,7 @@ function createThrobber(img) {
       0,
       0,
       (throbberWidth * percent) / 100,
-      throbberHeight
+      throbberHeight,
     );
     if (percent === 100) {
       throbber.ctx.fillStyle = "green";

diff --git a/files/zh-cn/web/api/filelist/index.md b/files/zh-cn/web/api/filelist/index.md
@@ -20,7 +20,7 @@ slug: Web/API/FileList
 下面的一行代码演示如何获取到一个 FileList 对象中的第一个文件 ([`File`](/zh-CN/docs/Web/API/File) 对象):
 
 ```js
-var file = document.getElementById('fileItem').files[0];
+var file = document.getElementById("fileItem").files[0];
 ```
 
 ## 方法概述
@@ -70,53 +70,47 @@ var file;
 
 // 遍历所有文件
 for (var i = 0; i < files.length; i++) {
-
-    // 取得一个文件
-    file = files.item(i);
-    // 这样也行
-    file = files[i];
-    // 取得文件名
-    alert(file.name);
+  // 取得一个文件
+  file = files.item(i);
+  // 这样也行
+  file = files[i];
+  // 取得文件名
+  alert(file.name);
 }
 ```
 
 下面是一个更完整的例子。
 
 ```html
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html>
-<head>
-</head>
-<body>
-<!-- multiple 属性允许用户选择多个文件 -->
-
-<input id="myfiles" multiple type="file">
-
-</body>
-
-<script>
-
-var pullfiles=function(){
-    // love the query selector
-    var fileInput = document.querySelector("#myfiles");
-    var files = fileInput.files;
-    // 获取所选文件数量
-    var fl = files.length;
-    var i = 0;
-
-    while ( i < fl) {
+  <head> </head>
+  <body>
+    <!-- multiple 属性允许用户选择多个文件 -->
+
+    <input id="myfiles" multiple type="file" />
+  </body>
+
+  <script>
+    var pullfiles = function () {
+      // love the query selector
+      var fileInput = document.querySelector("#myfiles");
+      var files = fileInput.files;
+      // 获取所选文件数量
+      var fl = files.length;
+      var i = 0;
+
+      while (i < fl) {
         // localize file var in the loop
         var file = files[i];
         alert(file.name);
         i++;
-    }
-}
-
-// 设置 change 事件处理函数
-document.querySelector("#myfiles").onchange=pullfiles;
-
-</script>
+      }
+    };
 
+    // 设置 change 事件处理函数
+    document.querySelector("#myfiles").onchange = pullfiles;
+  </script>
 </html>
 ```
 

diff --git a/files/zh-cn/web/api/filereader/abort_event/index.md b/files/zh-cn/web/api/filereader/abort_event/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'FileReader: 中止事件 (abort)'
+title: "FileReader: 中止事件 (abort)"
 slug: Web/API/FileReader/abort_event
 ---
 
@@ -36,22 +36,22 @@ slug: Web/API/FileReader/abort_event
 
 ```html
 <div class="example">
+  <div class="file-select">
+    <label for="avatar">选择你的头像：</label>
+    <input
+      type="file"
+      id="avatar"
+      name="avatar"
+      accept="image/png, image/jpeg" />
+  </div>
 
-    <div class="file-select">
-        <label for="avatar">选择你的头像：</label>
-        <input type="file"
-               id="avatar" name="avatar"
-               accept="image/png, image/jpeg">
-    </div>
-
-    <img src="" class="preview" height="200" alt="图像预览...">
-
-    <div class="event-log">
-        <label>事件日志：</label>
-        <textarea readonly class="event-log-contents"></textarea>
-    </div>
+  <img src="" class="preview" height="200" alt="图像预览..." />
 
+  <div class="event-log">
+    <label>事件日志：</label>
+    <textarea readonly class="event-log-contents"></textarea>
   </div>
+</div>
 ```
 
 ```css hidden
@@ -63,15 +63,15 @@ img.preview {
   width: 18rem;
   height: 5rem;
   border: 1px solid black;
-  margin: .2rem;
-  padding: .2rem;
+  margin: 0.2rem;
+  padding: 0.2rem;
 }
 
 .example {
   display: grid;
   grid-template-areas:
-              "select  log"
-              "preview log";
+    "select  log"
+    "preview log";
 }
 
 .file-select {
@@ -86,7 +86,7 @@ img.preview {
   grid-area: log;
 }
 
-.event-log>label {
+.event-log > label {
   display: block;
 }
 
@@ -99,38 +99,40 @@ img.preview {
 
 ```js
 const fileInput = document.querySelector('input[type="file"]');
-const preview = document.querySelector('img.preview');
-const eventLog = document.querySelector('.event-log-contents');
+const preview = document.querySelector("img.preview");
+const eventLog = document.querySelector(".event-log-contents");
 const reader = new FileReader();
 
 function handleEvent(event) {
-    eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
+  eventLog.textContent =
+    eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
 
-    if (event.type === "load") {
-        preview.src = reader.result;
-    }
+  if (event.type === "load") {
+    preview.src = reader.result;
+  }
 }
 
 function addListeners(reader) {
-    reader.addEventListener('loadstart', handleEvent);
-    reader.addEventListener('load', handleEvent);
-    reader.addEventListener('loadend', handleEvent);
-    reader.addEventListener('progress', handleEvent);
-    reader.addEventListener('error', handleEvent);
-    reader.addEventListener('abort', handleEvent);
+  reader.addEventListener("loadstart", handleEvent);
+  reader.addEventListener("load", handleEvent);
+  reader.addEventListener("loadend", handleEvent);
+  reader.addEventListener("progress", handleEvent);
+  reader.addEventListener("error", handleEvent);
+  reader.addEventListener("abort", handleEvent);
 }
 
 function handleSelected(e) {
-    eventLog.textContent = '';
-    const selectedFile = fileInput.files[0];
-    if (selectedFile) {
-        addListeners(reader);
-        reader.readAsDataURL(selectedFile);
-    }
-    reader.abort();
+  eventLog.textContent = "";
+  const selectedFile = fileInput.files[0];
+  if (selectedFile) {
+    addListeners(reader);
+    reader.readAsDataURL(selectedFile);
+  }
+  reader.abort();
 }
 
-fileInput.addEventListener('change', handleSelected);返回返回发的
+fileInput.addEventListener("change", handleSelected);
+返回返回发的;
 ```
 
 #### 结果

diff --git a/files/zh-cn/web/api/filereader/filereader/index.md b/files/zh-cn/web/api/filereader/filereader/index.md
@@ -24,7 +24,7 @@ None.
 ```js
 function printFile(file) {
   var reader = new FileReader();
-  reader.onload = function(evt) {
+  reader.onload = function (evt) {
     console.log(evt.target.result);
   };
   reader.readAsText(file);