7、前端开发中的DOM元素观察器及应用实践

前端开发中的DOM元素观察器及应用实践

1. 异步数据库操作示例

在前端开发中，使用异步函数和Promise API可以简化数据库操作。以下是一个使用异步函数加载并打印联系人的示例：

async function loadAndPrintContacts() {
  try {
    const db = await openDatabase();
    const contacts = await getContacts();
    console.log('Got contacts:', contacts);
  } catch (error) {
    console.error('Error:', error);
  }
}

使用Promise API结合 async/await 可以避免传递成功处理回调，还能利用Promise链避免嵌套回调和事件处理程序。

2. 浏览器提供的DOM元素观察器

浏览器提供了三种观察器用于监视DOM元素，分别是 MutationObserver 、 IntersectionObserver 和 ResizeObserver 。这些观察器对象可以监视DOM元素，并在发生特定更改或事件时通知你。

创建观察器时需要传入一个回调函数，每当页面中发生相关事件时，该函数就会被调用，并传入一个或多个包含事件信息的条目。要实际开始监视元素，需要在观察器上调用 obse