JS 扩展

1 相关基础了解

1 MIME 类型是什么
-----------------------------------------------------------------------------------------
1 作用: 用来让某种扩展名的文件, 在浏览器中可以, 用对应的方式去解析

2 理解: 当扩展名文件在浏览器中被访问的时候, 浏览器会根据文件的 MIME 类型去以对应的方式去打开

3 每种扩展名的文件都有其对应的 MIME 类型

4 常见的MIME类型 (通用型)

超文本标记语言文本        .html            text/html
xml文档                            .xml            text/xml
XHTML文档                        xhtml         application/xhtml+xml
普通文本                          .txt              text/plain
RTF文本                              .rtf              application/rtf
PDF文档                              .pdf          application/pdf
Microsoft Word文件             .doc             application/msword
PNG图像                              .png          image/png
GIF图形                              .gif              image/gif
JPEG图形                          .jpeg,.jpg     image/jpeg
au声音文件                        .au              audio/basic
MIDI音乐文件                  .mid,.midi     audio/midi,audio/x-midi
RealAudio音乐文件           .ra, .ram     audio/x-pn-realaudio
MPEG文件                           .mpg,.mpeg     video/mpeg
AVI文件                           .avi             video/x-msvideo
GZIP文件                           .gz             application/x-gzip
TAR文件                           .tar             application/x-tar
任意的二进制数据                           application/octet-stream

每个MIME类型由两部分组成, 前面是数据的大类别，例如声音audio、图象image等，后面定义具体的种类
-----------------------------------------------------------------------------------------


2 二进制数据: 二进制数据是用0和1两个数码来表示的数

3 ArrayBuffer: 前端的一个通用的二进制缓冲区, 类似数组, 但在API和特性上却有诸多不同

4 Buffer: Node.js 提供的一个二进制缓冲区, 常用来处理I/O操作

1 Blob

1 简单描述: 
-----------------------------------------------------------------------------------------
  1 JS 中没有比较好的, 可以直接处理二进制数据的方法, Blob 可以让 JS 直接操作二进制数据
  
  2 一个 blob 对象就是一个包含有只读原始数据的类文件对象
  
  3 blob对 象中的数据并不一定得是JavaScript中的原生形式

  4 Blob 对象可以看作是存放二进制数据的容器(💕)

  5 可以通过 Blob, 设置二进制数据的 MIME 类型

  6 Blob 前端的一个专门用于支持文件操作的二进制对象

  7 JS中有两个构造函数 File 和 Blob, File 继承了所有 Blob 的属性

  8 所以在我们看来, File 对象可以看作一种特殊的 Blob 对象
-----------------------------------------------------------------------------------------


2 Blob实战
-----------------------------------------------------------------------------------------
1 Blob 实现下载文件
  1 window.URL.createObjectURL()  //接收一个 Blob (File)对象, 将其转化为 Blob URL
  2 然后赋给 a.download 属性值, 页面上点击这个链接就可以实现下载了
-----------------------------------------------------------------------------------------



2 代码范式
-----------------------------------------------------------------------------------------
1 定义数据
  1 let dataArr = [1, 2, 3]  //包含了要添加到 blob对象中的数据

1 创建 bolb: 
  1 var blob = new Blob()

-----------------------------------------------------------------------------------------

2 俩个 URL 中的 API

1 URL.createObjectURL
--------------------------------------------------------------------------------
1 代码范式: 
  let hh = URL.createObjectURL(blob || file)

2 简单描述: 
  1 URL.createObjectURL() 会根据传入的参数创建一个指向该参数对象的 URL
  2 新的 hh 对象的 URL 指向, 执行的 File 对象, 或者是 Blob 对象
  3 这个 URL 的生命, 仅存在于它被创建的这个 document 文档里
  4 可以把一个 bolb 转化为一个 Bolb URL, 且用于做文件下载或者图片显示链接

3 名词解释: 
  1 File 对象: 就是一个文件, 比如我用input type="file"标签来上传文件, 那么里面的每个文件都是一个File对象
  2 Blob 对象: 就是二进制数据, 比如通过 new Blob() 创建的对象就是 Blob 对象
--------------------------------------------------------------------------------

2 URL.revokeObjectURL
--------------------------------------------------------------------------------
window.URL.revokeObjectURL(objectURL)  // 页面不需要了, 释放掉以减轻压力
--------------------------------------------------------------------------------

3 案例展示

1 dataURL = URL.createObjectURL(blob);  //创建 blob对象

2 const link = document.createElement('a')  //创建 a标签

3 设置 link 标签的一些属性: 
  1 link.href = dataURL  //设置跳转目标
  2 link.download = fileName + '.png'  //图片文件
  3 link.style.display = 'none'  //目的 -> 创建以个页面不可见的 a标签, JS去执行
  4 document.body.appendChild(link)   //加入 a标签到页面
  5 link.click()  //让该标签执行点击事件

4 URL.revokeObjectURL(dataURL)  //专用于释放createObjectURL创建的对象