JavaScript高级程序设计第四版学习--第二十章

---

title: JavaScript高级程序设计第四版学习–第二十章
date: 2021-5-29 20:59:12
author: Xilong88
tags: JavaScript

本章内容
Atomics与SharedArrayBuffer
跨上下文消息
Encoding API
File API与Blob API
拖放
Notifications API
Page Visibility API
Streams API
计时API
Web组件
Web Cryptography API
可能出现的面试题：
1.如何跨文档传递信息，了解过XDM吗？
2.文件拖拽如何实现？
3.拖放事件的组成？
4.通知API了解过吗？
5.如何测试加载性能?(高精度时间戳怎么获取)
6.了解过影子DOM吗？

知识点：

Atomics与SharedArrayBuffer 略
Streams API 略
自定义元素 略
Web Cryptography API 略

1.跨上下文消息

跨文档消息 ，有时候也简称为XDM（cross-document messaging），是一种在不同执行上下文（如不同工作线程或不同源的页面）间传递信息的能力。

let iframeWindow = document.getElementById("myframe").contentWindow;
iframeWindow.postMessage("A secret", "http://www.wrox.com");

如果不想限制接收目标，则可以给postMessage() 的第二个参数传"*" ，但不推荐这么做。

传给onmessage 事件处理程序的event 对象包含以下3方面重要信息。

data ：作为第一个参数传递给postMessage() 的字符串数据。
origin ：发送消息的文档源，例如"http://www.wrox.com" 。
source ：发送消息的文档中window 对象的代理。这个代理对象主
要用于在发送上一条消息的窗口中执行postMessage() 方法。如
果发送窗口有相同的源，那么这个对象应该就是window 对象。

window.addEventListener("message", (event) => {
   
  // 确保来自预期发送者
  if (event.origin == "http://www.wrox.com") {
   
    // 对数据进行一些处理
    processMessage(event.data);
    // 可选：向来源窗口发送一条消息
    event.source.postMessage("Received!", "http://p2p.wrox.com");
  }
});

2.Encoding API

批量编码是通过TextEncoder的实例完成

const textEncoder = new TextEncoder();
const decodedText = 'foo';
const encodedText = textEncoder.encode(decodedText);
// f的UTF-8编码是0x66（即十进制102）
// o的UTF-8编码是0x6F（即二进制111）
console.log(encodedText); // Uint8Array(3) [102, 111, 111]

编码器是用于处理字符的，有些字符（如表情符号）在最终返回的数组中可能会占多个索引：

const textEncoder = new TextEncoder();
const decodedText = '☺';
const encodedText = textEncoder.encode(decodedText);
// ☺的UTF-8编码是0xF0 0x9F 0x98 0x8A（即十进制240、159、152、138）
console.log(encodedText); // Uint8Array(4) [240, 159, 152, 138]

解码

const textDecoder = new TextDecoder();
// f的UTF-8编码是0x66（即十进制102）
// o的UTF-8编码是0x6F（即二进制111）
const encodedText = Uint8Array.of(102, 111, 111);
const decodedText = textDecoder.decode(encodedText);
console.log(decodedText); // foo

3.File API与Blob API

name ：本地系统中的文件名。
size ：以字节计的文件大小。
type ：包含文件MIME类型的字符串。
lastModifiedDate ：表示文件最后修改时间的字符串。这个属性只有Chome实现了。

let filesList = document.getElementById("files-list");
filesList.addEventListener("change", (event) => {
   
  let files = event.target.files,
      i = 0,
      len = files.length;
  while (i < len) {
   
    const f = files[i];
    console.log(`${
   f.name} (${
   f.type}, ${
   f.size} bytes)`);

    i++;
  }
});

FileReader 类型

FileReader 类型提供了几个读取文件数据的方法。

readAsText(file, encoding) ：从文件中读取纯文本内容并保
存在result 属性中。第二个参数表示编码，是可选的。
readAsDataURL(file) ：读取文件并将内容的数据URI保存
在result 属性中。
readAsBinaryString(file) ：读取文件并将每个字符的二进制
数据保存在result 属性中。
readAsArrayBuffer(file) ：读取文件并将文件内容以
ArrayBuffer 形式保存在result 属性。

因为这些读取方法是异步的，所以每个FileReader 会发布几个事件，其中3个最有用的事件是progress 、error 和load ，分别表示还有更多数据、发生了错误和读取完成。

progress 事件每50毫秒就会触发一次，其与XHR的progress 事件具有相同的信息：lengthComputable 、loaded 和total 。

在progress 事件中可以读取FileReader 的result 属性，即使其中尚未包含全部数据。

触发error 事件时，FileReader 的error 属性会包含错误信息。这个属性是一个对象，只包含一个属性：code 。这个错误码的值可能是1（未找到文件）、2（安全错误）、3（读取被中断）、4（文件不可读）或5（编码错误）。

let filesList = document.getElementById("files-list");
filesList.addEventListener("change", (event) => {
   
  let info = "",
      output = document.getElementById("output"),
      progress = document.getElementById("progress"),
      files = event.target.files,
      type = "default",
      reader = new FileReader();
  if (/image/.test(files[0].type)) {
   
    reader.readAsDataURL(files[0]);
    type = "image";
  } else {
   
    reader.readAsText(files[0]);
    type = "text";
  }
  reader.onerror = function() {
   
    output.innerHTML