浅谈几个前端开发中“冷门”的 API

冷门，无非于我们而言，在实际项目中登场的机会少，或许有些 API 压根没听说过。本文将介绍几个 API，它们算是冷门中的那几烁极光，在我们穷尽一切办法时，它或许带来那丝曙光。

CSS 中的“冷门”API

add() 和 remove() 方法

add() 和 remove() 方法用于操作元素的类属性。

// 添加指定类值
element.classList.add('active');

// 删除指定类值
element.classList.remove('active');

这两个方法可以很方便地操作元素的类属性，而不需要直接操作字符串。

toggle() 方法

toggle() 方法用于在元素上切换类属性。

// 如果元素有 active 类，则删除它；如果没有，则添加它
element.classList.toggle('active');

这个方法可以很方便地在元素上切换类属性，而不需要判断元素是否已经具有该类属性。

replace() 方法

replace() 方法用于替换元素的类属性。

// 将元素的类属性从 oldClass 替换为 newClass
element.classList.replace('oldClass', 'newClass');

这个方法可以很方便地替换元素的类属性，而不需要先删除旧的类属性再添加新的类属性。

DOM 中的“冷门”API

createDocumentFragment() 方法

createDocumentFragment() 方法用于创建一个新的文档片段。

// 创建一个新的文档片段
const fragment = document.createDocumentFragment();

// 向文档片段添加元素
fragment.appendChild(element1);
fragment.appendChild(element2);

// 将文档片段添加到文档中
document.body.appendChild(fragment);

文档片段可以用来暂存元素，然后一次性添加到文档中。这可以提高性能，因为浏览器不需要多次重绘文档。

querySelectorAll() 方法

querySelectorAll() 方法用于查找文档中的所有匹配指定 CSS 选择器的元素。

// 查找所有具有 active 类属性的元素
const elements = document.querySelectorAll('.active');

这个方法可以很方便地查找文档中的所有匹配指定 CSS 选择器的元素，而不需要遍历整个文档树。

closest() 方法

closest() 方法用于查找元素最近的祖先元素，该祖先元素匹配指定的 CSS 选择器。

// 查找元素最近的具有 active 类属性的祖先元素
const parent = element.closest('.active');

这个方法可以很方便地查找元素最近的祖先元素，该祖先元素匹配指定的 CSS 选择器，而不需要遍历整个文档树。

编程中的“冷门”API

Object.assign() 方法

Object.assign() 方法用于将一个或多个源对象的可枚举属性拷贝到目标对象。

// 将源对象 source 的属性拷贝到目标对象 target
Object.assign(target, source);

这个方法可以很方便地将一个或多个源对象的可枚举属性拷贝到目标对象，而不需要手动复制每一个属性。

Array.from() 方法

Array.from() 方法用于将类数组对象转换为真正的数组。

// 将类数组对象 elements 转换为真正的数组
const array = Array.from(elements);

这个方法可以很方便地将类数组对象转换为真正的数组，而不需要手动创建一个数组并逐个元素添加。

Promise.all() 方法

Promise.all() 方法用于等待所有给定的 Promise 都被解析，然后返回一个 Promise，该 Promise 的结果是一个数组，其中包含了所有给定 Promise 解析后的结果。

// 等待所有给定的 Promise 都被解析，然后返回一个 Promise
Promise.all([promise1, promise2, promise3])
  .then(results => {
    // results 是一个数组，其中包含了所有给定 Promise 解析后的结果
  });

这个方法可以很方便地等待所有给定的 Promise 都被解析，然后执行后面的代码。