JavaScript 类 : storing variables in constructor vs get methods

Question

因此，我正在使用页面对象模型模式以及 Cypress(用 JavaScript 编写)开发自动化框架。

对于页面的某些部分，我正在制作页面组件(本质上是较小的页面对象)。为了减少维护，我想存储网络元素的“定位器”以便于访问(以防它们发生变化)。

我将在类中的更大方法中进一步引用这些定位器(组合多个元素并使用它们执行操作)。但是我不确定存储它们的最佳方式。

我想到了两个选择(我不是 JavaScript 专家，所以可能有更好的方法。无论如何，有..

选项 1:(将它们存储在简单的 GET 方法中，如下所示):

saveButton() {
    return cy.contains('Save')
}

nameField() {
    return cy.get('.form-control[name="name"]')
}

descriptionField() {
    return cy.get('.form-control[name="description"]')
}

然后，当我需要访问定位器时，我只需调用 nameField().type()或saveButton().click()在更大的类方法中更进一步(尽管我想我需要在它们之前添加 this 。

另一种选择是使用构造函数:

选项 2:(使用构造函数)

class WidgetForm extends PageObject {
    constructor() {
        this.saveButton = 'Save'
        this.nameField = '.form-control[name="name"]'
        this.descriptionField = '.form-control[name="description"]'
    }
//...more code further down that uses these values

然后我可以以类似的方式引用它们，例如 cy.get(this.nameField).type()尽管我想我也可以将整个 Cypress 命令函数存储在构造函数值中，例如:

this.nameField = cy.get('.form-control[name="name"]') (至少我认为)。

两者有什么特别的优势吗？我希望 JavaScript 允许像其他语言一样将常量私有(private)值存储在类中(我知道它会在 ES7 中出现，但我想坚持使用现在有效的方法)。

显然欢迎任何其他建议。由于某种原因Option 1对我来说看起来更好。但我不确定定义这么多函数是否会更慢/更丑。

Answer 1

我认为选项 1 看起来不错，组织更直观，最终结果看起来更好。

Class WidgetForm {

    nameField() {
        return cy.get('.form-control[name="name"]')
    }

}

然后在你的测试中:

beforeEach(function () {
  WidgetForm.nameField().type({"Smith"})
})

不确定您的第二个建议是否是这个意思，但您可以使用 setter/getter :

Class WidgetForm extends PageObject{
    constructor() {
        this.saveButton = 'Save'
        this.nameField = '.form-control[name="name"]'
        this.descriptionField = '.form-control[name="description"]'
    }
    get nameField() {
        return cy.get(this.nameField)
    }
}