Javascript / Node.js中的嵌套类实例

时间:2017-12-18 13:10:23

标签: javascript node.js puppeteer

我正在使用puppeteer,这是一个控制chrome的NodeJS模块。

它有2个功能来启动新浏览器和新页面。

const browser = await puppeteer.launch()和browser.newPage()

我想创建一个用于创建新页面和新浏览器的类。

这是我正在做的旧方式,没有课程,它可以工作,但它不允许我创建新页面。这就是为什么我想转向使用类。

let chrome = {}

chrome.init = async (options) => {
    chrome.browser = await puppeteer.launch(options)
    chrome.page = await chrome.browser.newPage()   
}

chrome.pageContains = async (string) => {

    return await chrome.page.evaluate( (string) => {

        const regex = new RegExp(string, 'i')

        return regex.test( document.querySelector('body').innerText )

    }, string)
}

module.exports = chrome

这是我的新代码,但我不知道我在做什么,这显然是错的,没有任何意义。

chrome.init = async (options) => {
    return {browser: await new Chrome(options)
}

class Chrome {
    async constructor(options) {
        this.browser = await puppeteer.launch(options)
    }

    newPage() {
        return await this.browser.newPage()
    }
}

class Page {
    async constructor() {
        this.page = await chrome.browser.newPage()
    }

}

那么如何使用类而不是对象来使旧代码工作呢?

1 个答案:

答案 0 :(得分:0)

你有一些拼写错误,构造函数不是异步。

除此之外,您只需将正确的浏览器功能传递给Page类。您可以使用页面扩展Chrome并使用super,或将它们分开,但页面必须能够访问浏览器。

首先,我们将启动浏览器并返回它。 Await会照顾好承诺。

const puppeteer = require('puppeteer');

class Chrome {
    constructor(options) {
        this.browser = puppeteer.launch(options);
        return this.browser;
    }
}

然后我们将它传递给页面构造函数并从那里使用它。

class Page {
    constructor(browser) {
        this.browser = browser;
        this.page = browser.newPage();
        return this.page;
    }

    async pageContains(string){
        return await this.browser.page.evaluate( (string) => {
            const regex = new RegExp(string, 'i')
            return regex.test( document.querySelector('body').innerText )
        }, string)
    }
}

然后,我们调用它们并使它们可用。如果需要,返回浏览器和页面对象。

const getChrome = async (options) => {
    const browser = await new Chrome(options);
    const page = await new Page(browser);
    return { browser, page }
}

现在我们可以使用它们了。

(async ()=>{
    const page = (await getChrome({headless: false})).page;
    await page.goto('http://example.com');
})()

我很确定它可以被重构,我在这里写的不是最好的做法,但这会让你顺利。