JavaScript高级程序设计-JavaScript API

新时代的弩力

已于 2022-05-10 22:40:15 修改

阅读量865

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 react.js

于 2022-05-09 23:52:45 首次发布

本文链接：https://blog.csdn.net/qq_42372534/article/details/124678412

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

javascript API

javascript API

javascript API

Encoding API

用途:实现字符串和定型数组的转换

四个执行转换的全局类

TextEncoder
TextEncoderStream
TextDecoder
TextDecoderStream

1. 文本编码

TextEncoder

字符串->定型数组二进制格式:批量编码和流编码,使用 UTF-8

批量编码
批量:指 JavaScript 引擎会同步编码整个字符串

encode

// TextEncoder实例上有encode方法,接收字符串,以Uint8Array的格式返回每个字符的utf-8编码,有些表情符号可能不止占一个字节,
const textEncoder = new TextEncoder();
// f 的UTF-8 编码是0x66（即十进制102）
// o 的UTF-8 编码是0x6F（即二进制111）
const decodedText = "foo";
const decodedEmoji = "😊";
const encodedText = textEncoder.encode(decodedText);
const encodedEmoji = textEncoder.encode(decodedEmoji);

console.log(encodedText); //Uint8Array(3) [ 102, 111, 111 ],102是其十六进制对应的十进制

console.log(encodedEmoji); //Uint8Array(4)[(240, 159, 152, 138)];

encodeInto

和 encode 的区别在于 encodeInto 指定了写入的定型数组,

const textEncoder = new TextEncoder();
const fooArr = new Uint8Array(3);
const barArr = new Uint8Array(2);
const fooResult = textEncoder.encodeInto("foo", fooArr);
const barResult = textEncoder.encodeInto("bar", barArr);

// read表示从源字符串读取了多少字符
// written表示向目标定型数组写入了多少字符
console.log(fooResult); //{ read: 3, written: 3 }
console.log(barResult); //{ read: 2, written: 2 }

2. 文本解码

TextDecoder

将定性数组转成字符串:批量解码和流解码
解码时默认字符编码格式是 utf-8,也支持其他的编码格式

批量解码

批量，指的是 JavaScript 引擎会同步解码整个字符串

decode
该方法接收一个定型数组参数，返回解码后的字符串

// 默认是utf-8编码,传"utf-16"则可以解码对应的字符串
const textDecoder = new TextDecoder();

const encodedText = Uint8Array.of(102, 111, 111);
const decodedText = textDecoder.decode(encodedText);

console.log(decodedText); //foo

File API & Blob API

File API 和 Blob API 可以让开发者方便访问到客户端机器上的文件,通过

File 类型

HTML5 在 type=file 的 input 控件的 dom 上增加了 files 属性,包含了一组 File 对象,每个 File 对象都有以下只读属性

name:本地系统的文件名
size:文件大小,单位:字节
type: 文件的 MIME 类型的字符串
lastModifiedDate:文件最后修改的时间的字符串,只有 chrome 实现
通过监听其 change 事件,遍历 files 集合获取选择文件的信息

let fileInput = document.querySelector("#file-input");

fileInput.addEventListener("change", (e) => {
  // files集合
  const files = e.target.files;

  for (let f of files) {
    console.log(
      `文件名称:${f.name},文件大小:${f.size}字节,文件类型:${f.type},文件最近依次修改时间:${f.lastModifiedDate}`
    );
  }
});

FileReader 类型

FileReader 类型表示一种异步文件读取机制,从本地文件系统读取文件.有以下几个读取文件的 API,读取完的文件内容都保存到 FileReader 实例的 result 属性中.

参数 file 表示 File 对象,encoding 表示编码格式

readAsText(file,encoding)
readAsDataURL(file)
readAsBinaryString(file)
readAsArrayBuffer(file)

readAsText()和 readAsDataURL()方法已经得到了所有主流浏览器支持

异步读取文件时的 progress,error,load 事件

progress 事件,每 50ms 触发依次,事件对象包含 lengthComputable,loaded(已加载文件的字节大小)和 total(总字节大小)
error 事件,事件对象包含一个 code 属性,1-未找到文件,2-安全错误,3-读取中断,4-文件不可读,5-编码错误
load 事件,文件加载成功后触发

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>file and blob</title>
  </head>
  <body>
    <input type="file" id="file-input" />
    <div id="output"></div>
    <div id="progress"></div>
    <script>
      let fileInput = document.querySelector("#file-input");

      fileInput.addEventListener("change", (e) => {
        let info = "",
          output = document.getElementById("output"),
          progress = document.getElementById("progress"),
          files = e.target.files,
          type = "default",
          reader = new FileReader();

        if (/image/.test(files[0].type)) {
          // 读取图片,result为数据URI
          reader.readAsDataURL(files[0]);
          type = "image";
        } else {
          // 读取文本
          reader.readAsText(files[0]);
          type = "text";
        }

        //progress 事件用于跟踪和显示读取文件的进度;
        reader.onprogress = function (e) {
          if (e.lengthComputable) {
            progress.innerHTML = `${e.loaded}/${e.total}字节`;
          }
        };

        //error 事件用于监控错误
        reader.onerror = function (e) {
          output.innerHTML = `读取不了文件,错误码:${e.code}`;
        };

        reader.onload = function () {
          let html = "";

          switch (type) {
            case "image":
              html = `<img src=${reader.result} />`;
              break;
            case "text":
              html = reader.result;
              break;
          }
          output.innerHTML = html;
        };
      });
    </script>
  </body>
</html>

Blob 与部分读取

读取部分文件,为此,File 对象提供一个 slice 方法,接收两个参数:起始字节和要读取的字节数,返回一个 Blob 实例,Blob 实例是 File 的超类.
blob 表示二进制大对象(binary large object,blob 就是其缩写),是 JavaScript 对不可修改二进制数据的封装类型.包含字符串的数组、ArrayBuffers、ArrayBufferViews，甚至其他 Blob 都可以用来创建 blob。Blob 构造函数可以接收一个 options 参数，并在其中指定 MIME 类型

console.log(new Blob(["foo"])); //Blob {size: 3, type: ''}

// 第二个参数 指定MIME类型
console.log(new Blob(['{"a":"b"}'], { type: "application/json" })); //Blob {size: 9, type: 'application/json'}

console.log(new Blob(["<p>Foo</p>", "<p>Bar</p>"], { type: "text/html" })); //Blob {size: 20, type: 'text/html'}

let fileInput = document.querySelector("#file-input");

fileInput.addEventListener("change", (e) => {
  let info = "",
    output = document.getElementById("output"),
    progress = document.getElementById("progress"),
    files = e.target.files,
    reader = new FileReader(),
    // file对象的slice方法,返回Blob实例
    blob = files[0].slice(0, 32);

  if (blob) {
    // readAsText方法读取文件
    reader.readAsText(blob);

    reader.onerror = function (e) {
      output.innerHTML = `读取不了文件,错误码:${e.code}`;
    };

    reader.onload = function () {
      output.innerHTML = reader.result;
    };
  } else {
    console.log("你的浏览器不支持slice().");
  }
});

只读取部分文件可以节省时间，特别是在只需要数据特定部分比如文件头的时候

对象 URL 与 Blob

对象 URL,也叫 Blob URL,是指引用存储在 File 或 Blob 中数据的 URL.
window.URL.createObjectURL(File/Blob)

返回一个指向内存中地址的字符串 URL,可以在 DOM 中直接使用,可用于设置图片的 src

let fieldList = document.getElementById("field-list");

fieldList.addEventListener("change", (e) => {
  let files = e.target.files,
    output = document.getElementById("output"),
    reader = new FileReader(),
    // 创建objectURL
    url = window.URL.createObjectURL(files[0]);

  if (url) {
    if (/image/.test(files[0].type)) {
      // 设置图片URL
      output.innerHTML = `<img src="${url}"/>`;
    } else {
      output.innerHTML = "不是图片";
    }
  } else {
    output.innerHTML = "您的浏览器不支持object URLs";
  }
});

如果把对象 URL 直接放到标签，就不需要把数据先读到 JavaScript 中了。标签可以直接从相应的内存位置把数据读取到页面上
window.URL.revokeObjectURL(url)

使用完数据之后，最好能释放与之关联的内存。只要对象 URL 在使用中，就不能释放内存。如果
想表明不再使用某个对象 URL，则可以把它传给 window.URL.revokeObjectURL()。页面卸载时，所有对象 URL 占用的内存都会被释放。不过，最好在不使用时就立即释放内存，以便尽可能保持页面占用最少资源。

读取拖放文件

放置目标元素的拖动事件,dragenter,dragover,drop
当拖动桌面文件到放置目标元素时,触发 drop 事件,可以通过 event.dataTransfer.files 读取文件

files = event.dataTransfer.files;

原生拖放

所有主流浏览器都实现了 HTML5 规范实现原生的拖放

1. 拖放事件

两个元素:被拖放元素,放置目标.

默认情况下，图片、链接和文本是可拖动的,文本选中就可以拖动,其余的可通过 draggable=true 来设置为可拖动

被拖放元素触发事件

dragstart,开始拖动
drag,拖动中
dragend,拖动结束

放置目标事件

dragenter,类似 mouseover 事件,被拖动元素进入放置目标范围
dragover,元素在放置目标范围内被拖动期间此事件会持续触发
dragleave 或 drop,元素离开目标范围或放到了目标身上

2. 自定义放置目标

所有元素都支持放置目标事件,但是默认不允许放置,需要阻止放置目标的 dragenter 和 dragover 的默认行为,就可以成为有效的放置目标

3. dataTransfer 对象

event.dataTransfer 对象,setData()的第一个参数以及 getData()的唯一参数是一个字符串，表示要设置的数据类型：“text"或"URL”,HTML5 还会继续支持"text"和"URL"，但它们会分别被映射到"text/plain"和"text/uri-list"

getData()
setData()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>File</title>
    <style>
      #drag-target {
        width: 100px;
        height: 100px;
        background: rgb(33, 164, 197);
      }
    </style>
  </head>
  <body>
    <div id="drag-target"></div>
    <span id="text">hello world</span>
    <script>
      let dragTarget = document.getElementById("drag-target");
      let text = document.getElementById("text");

      function preventDefaultHandler(e) {
        e.preventDefault();
        if (e.type == "drop") {
          const text = e.dataTransfer.getData("text");
          console.log(text);
          dragTarget.innerHTML = text;
        }
      }

      dragTarget.addEventListener("dragenter", preventDefaultHandler);
      dragTarget.addEventListener("dragover", preventDefaultHandler);
      dragTarget.addEventListener("drop", preventDefaultHandler);

      text.addEventListener("dragstart", (e) => {
        // e.dataTransfer.setData("text", "hello wolrd");
      });
    </script>
  </body>
</html>

Page Visibility API

页面最小化,或隐藏在其他标签后,触发 document 的 visibilitychange 事件,document.visibilityState 的值会改变

用途:页面不可见时,轮询服务器或更新动画等功能可能就没有必要

document.visibilityState

hidden
visible
prerender

document.addEventListener("visibilitychange", (e) => {
  console.log(document.visibilityState);
});

新时代的弩力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级程序设计-JavaScript API

javascript APIEncoding API用途:实现字符串和定型数组的转换四个执行转换的全局类TextEncoderTextEncoderStreamTextDecoderTextDecoderStream1. 文本编码TextEncoder字符串->定型数组二进制格式:批量编码和流编码,使用 UTF-8批量编码批量:指 JavaScript 引擎会同步编码整个字符串encode// TextEncoder实例上有encode方法,接收字符串,
复制链接

扫一扫