收集.js | forPage()函数

收集.js是一个JavaScript库，它提供了一组函数来收集Web页面上的数据。其中，forPage()函数是一种用于循环遍历页面元素的方法。本文将介绍forPage()函数的使用方法和注意事项。

forPage()函数的语法

forPage(selector: string, callback: Function, ...args: any[]): Promise<any>

• selector: 页面元素选择器。
• callback: 回调函数，每次循环遍历都会执行。
• args: 可选参数，用于传递其他参数给回调函数。

forPage()函数的使用方法

基本用法

以下示例演示了如何使用forPage()函数来循环遍历页面中所有的li元素，并打印它们的文本内容。

import { forPage } from 'collect.js';

async function example() {
  await forPage('li', (element) => {
    console.log(element.innerText);
  });
}

example();

以上代码中，forPage()函数会在页面中查询所有的li元素，并依次将它们传递给回调函数。回调函数中的参数element就是当前循环遍历的元素。

传递额外参数

有时候，需要传递额外的参数给回调函数，以满足特定的需求。以下示例演示了如何使用args参数来传递额外参数。

import { forPage } from 'collect.js';

async function example() {
  const data = [
    { name: 'Alice', age: 18 },
    { name: 'Bob', age: 20 },
    { name: 'Charlie', age: 25 },
  ];
  await forPage('li', (element, index, dataItem) => {
    console.log(`${dataItem.name}(${dataItem.age}) - ${element.innerText}`);
  }, ...data);
}

example();

以上代码中，我们创建了一个包含多个对象的数据数组，并将它们作为args参数传递给回调函数。回调函数中的参数index表示当前循环遍历的元素在数组中的索引，dataItem就是当前索引对应的数据对象。

使用async/await

在forPage()函数中，我们可以使用async/await语法来处理异步操作。以下示例演示了如何在forPage()函数中调用一个异步函数。

import { forPage } from 'collect.js';

async function fetchUserData(userId) {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const data = await response.json();
  return data;
}

async function example() {
  await forPage('li', async (element) => {
    const userId = element.dataset.userId;
    const userData = await fetchUserData(userId);
    console.log(userData.name);
  });
}

example();

以上代码中，我们在回调函数中调用了一个异步函数fetchUserData()，来获取用户数据。当forPage()函数循环遍历到某个元素时，它会调用fetchUserData()函数，并在获取到数据后才往下执行。

注意事项

• forPage()函数只会循环遍历当前页面中已经加载的元素。如果页面中后续加载了新的元素，它们不会被循环遍历到。
• 回调函数不能返回Promise对象，否则forPage()函数会停止遍历。
• 回调函数的this指向的是当前元素，而不是forPage()函数本身。
• 如果forPage()函数使用了async/await语法，则必须使用try/catch语句来捕获异常。当出现异常时，forPage()函数将停止循环遍历并返回异常信息。