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

我正在使用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()
    }

}

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

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

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

首先，我们将启动浏览器并返回它。等待将照顾承诺。

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');
})()

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

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

我正在使用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()
    }

}

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

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

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

首先，我们将启动浏览器并返回它。等待将照顾承诺。

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');
})()

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