javascript - 向 puppeteer.Page 对象添加自定义方法

Question

我想将自定义方法添加到 puppeteer.Page对象，所以我可以像这样调用它们:

let page = await browser.newPage();
page.myNewCustomMethod();

这是我创建的众多自定义方法之一。它使用表达式数组通过 XPath 表达式找到第一个可用元素:

const findAnyByXPath = async function (page: puppeteer.Page, expressions: string[]) {
    for (const exp of expressions) {
        const elements = await page.$x(exp);

        if (elements.length) {
            return elements[0];
        }
    }

    return null;
}

我必须像这样调用它...

let element = await findAnyByXPath(page, arrayOfExpressions);

对我来说，这在编辑器中看起来很奇怪，尤其是在调用许多自定义方法的区域中。在我看来，有点“断章取义”。所以我宁愿这样调用它:

page.findAnyByXPath(arrayOfExpressions);

我知道有一个 page.exposeFunction 方法，但这不是我要找的。

有什么方法可以做到这一点？

Answer 1

你能做到吗？是的。

您可以通过修改其原型(prototype)来扩展 JavaScript 中的任何对象。为了向 Page 对象添加函数，您可以使用 __proto__ 访问 Page 对象的原型(prototype)。属性(property)。

这是一个简单的示例，将函数 customMethod 添加到所有 Page 对象:

const page = await browser.newPage();
page.__proto__.customMethod = async function () {
    // ...
    return 123;
}
console.log(await page.customMethod()); // 123

const anotherPage = await browser.newPage();
console.log(await anotherPage.customMethod()); // 123

请注意，您首先需要一个 Page 对象来访问原型(prototype)，因为构造函数(或类)本身并未公开。

你应该这样做吗？没有。

您可能已经注意到上面链接的 MDN 文档中的红色警告。仔细阅读它们。一般情况下，不建议更改您正在使用且未自己创建的对象的原型(prototype)。有人已经创建了原型(prototype)，他并不指望有人会对其进行修补。有关更多信息，请查看此 stackoverflow 问题:

• "Why is extending native objects a bad practice?"

该怎么做？

相反，您应该只使用自己的函数。拥有自己的函数并使用 page 作为参数调用它们并没有错，如下所示:

// simple function
findAnyByXPath(page);

// your own "namespace" with more functionality
myLibrary.findAnyByXPath(page);
myLibrary.anotherCustomFunction(page);

通常，您也可以扩展 Page 类，但在这种情况下，库不会导出 class 本身。因此，您只能创建一个包装类，它在内部执行相同的功能，但在顶部提供更多功能。但这是一种非常复杂的方法，在这种情况下确实值得付出努力。