Web API

1、拖拽API

// 被拖拽元素需要设置draggable=true
<div id="drag1" draggable="true"></div>
// dragstart 拖拽开始时触发
// drag 拖拽过程中持续触发
// dragend 拖拽结束时触发

<div id="container"></div>
// dragenter 被拖拽对象开始进入容器对象范围内
// dragover 被拖拽对象在容器对象范围内移动时触发
// dragleave 被拖拽对象离开容器对象范围时触发
// drop 被拖拽对象在容器对象范围内被释放时触发

// 数据传输‌：使用 DataTransfer 对象的 setData() 和 getData() 方法
 target.addEventListener('dragstart', function(e) {
        e.dataTransfer.setData('text/plain', this.id);
 });
container.addEventListener('drop', function(e) {
        e.preventDefault();
        const data = e.dataTransfer.getData('text/plain');
})

2、文件API

Blob（Binary Large Object）是 JavaScript 中用于处理二进制数据的核心对象，它表示不可变的原始数据，类似于文件对象；可以包含任意类型的二进制数据，如图像、音频、视频等。

const blob = new Blob(["这是一段话"], { type: "text/plain" });   // 创建一个blob
const blob_slice4 = blob.slice(0, 4);   // 切割4个字节 并返回一个新的blob
blob_slice4.text().then(text => {      // 转换为文本 返回的是promise对象
      console.log("text", text);
});

// File 继承自Blob 专门用于处理文件信息
  const file = new File(["这是一段话"], "1.txt", { type: "text/plain" });
// 文件上传一般通过e.dataTransfer.files拿到files
  container.addEventListener('drop', function(e) {
        e.preventDefault();
        const data = e.dataTransfer.files;
})

// FileReader 读取file
    const file = new File(["这是一段话"], "1.txt", { type: "text/plain" });
    const fileReader = new FileReader();
    fileReader.onload = function (e) {     // 解析结果
      const result = e.target.result;
      console.log("result", result);
    };
    fileReader.readAsArrayBuffer(file);  // 解析file为arrayBuffer
    fileReader.readAsDataURL(file);    // 解析file为base64
    fileReader.readAsText(file);		// 解析结果为文本

3、IndexdDB数据库

IndexedDB是一种浏览器端的大容量、持久化存储方案，特别适合需要本地处理大量结构化数据的场景
离线应用与PWA‌：支持应用在无网络环境下正常运行，将核心数据预先缓存到本地
大数据可视化‌：存储海量图表数据，实现流畅的缩放、平移和时间轴回滚
文档编辑器与IDE‌：保存文档历史版本、用户配置和大型项目文件
游戏开发‌：存储游戏资源、存档记录和用户配置数据
实时数据同步‌：作为本地缓存层，减少服务器请求，提升响应速度
多媒体应用‌：缓存图片、音频、视频的元数据和用户操作记录

 // open 连接以及创建数据库
    const request = window.indexedDB.open("text", 1); // 参数一数据库名称 参数二版本 版本只能升级不能降级
    // 数据库链接成功
    request.onsuccess = function (e) {
      console.log("数据库链接成功");
      const db = e.target.result;
      // 后续对表的操作都是通过事务才完成
      const transaction = db.transaction(["user"], "readwrite"); // 参数一表示表名称集合  参数二表示是否只读以及可读写，不给默认只读
      const userStore = transaction.objectStore("user");
      // userStore.add({ id: 1, name: "用户3" }, "用户3"); // 添加记录
      // userStore.delete('用户3')                      // 根据key值删除数据表单行记录
      userStore.put({ id: 1, b: "用户3333" }, "用户3"); // 根据key值修改 如果key值找不到则会新增 操作是异步的，上一步刚添加的无法直接修改操作

      // const g = userStore.get("用户3"); // 根据key值查询记录
      // g.onsuccess = function (_e) {
      //   console.log("_e", _e.target.result);
      // };

      const gAll = userStore.getAll(); // 查询所有记录
      gAll.onsuccess = function (_e) {
        console.log("_e", _e.target.result);
      };
    };

    // 数据库链接失败
    request.onerror = function (e) {
      console.log("数据库链接失败");
    };

    // 数据库初始化或版本升级触发
    request.onupgradeneeded = function (e) {
      console.log("数据库初始化或版本升级触发");
      const db = e.target.result;
      // 建表 该过称只能在初始化阶段可以做
      const userStore = db.createObjectStore("user");
      userStore.add({ id: 1, name: "用户1" }, "用户1");
    };

4、Worker线程

Web Worker 是浏览器提供的 JavaScript 多线程解决方案，允许在后台线程中执行复杂计算而不阻塞主线程

 // 开启worker线程
    const worker = new Worker("./worker.js", {
      type: "module", // 导入模块支持es6模块化 不给则不支持
      name: "worker1", // 调试名称
    });

    worker.postMessage(10); // 通知线程模块
    worker.onmessage = function (e) {
      // 接收worker线程模块数据
      console.log("接收线程模块数据", e.data);
    };
    // worker.terminate() // 关闭worker线程
	
	// worker.js
	// 接收js主线程传来的消息
	self.onmessage = function (e) {
	    console.log('接收js主线程传来的消息', e.data);
	    self.postMessage(100)   // 通知js主线程
	}

5、IntersectionObserver

异步监听元素与视窗/根元素的交叉状态变化
应用场景：图片懒加载、无限滚动

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        console.log('元素进入视窗');
      } else {
        console.log('元素离开视窗');
      }
    });
  },
  {
    root: null, // 根元素，默认为视窗 也可以传父级元素
    rootMargin: '0px', // 扩展检测范围
    threshold: [0, 0.5, 1] // 触发交叉条件判断的可见比例阈值
  }
);
observer.observe(targetElement);    // 被观察的目标元素

// observer.disconnect(); // 完全移除监察
// observer.unobserve(target); // 移除特定目标监察

// isIntersecting: 元素是否可见
// intersectionRatio: 可见比例 (0-1)
// boundingClientRect: 元素位置信息

6、MutationObserver

监听 DOM 树的结构变化

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      console.log('子节点变化');
    } else if (mutation.type === 'attributes') {
      console.log(`属性 ${mutation.attributeName} 被修改`);
    }
  });
});
const config = { 
  childList: true, 
  attributes: true, 
  subtree: true 
};
observer.observe(targetEle, config);   // targetEle被监听元素 

// observer.disconnect(); // 停止所有观察并销毁观察器

// childList: 监听子节点变化
// attributes: 监听属性变化
// subtree: 监听后代节点变化
// attributeFilter: 指定监听哪些属性