Question

这段代码有效，但我对函数体部分感到多余，所以我继续重构它。

const loginCommands = {
  loginAdmin: function(email, password) {
    return this.waitForElementVisible('body', 1000)
      .setValue('@email', email)
      .setValue('@password', password)
      .click('@submit')
      .waitForElementVisible('@adminMainMenu', 1000)
      .verify.attributeEquals('@adminMainMenu', 'data-role', 'admin')
  },

  loginMember: function(email, password) {
    return this.waitForElementVisible('body', 1000)
      .setValue('@email', email)
      .setValue('@password', password)
      .click('@submit')
      .waitForElementVisible('@adminMainMenu', 1000)
      .verify.attributeEquals('@adminMainMenu', 'data-role', 'member')
  }
}

我在上面重构了

const loginCommands = {

  function actions(this) {
    return this.setValue('@email', email)
    .setValue('@password', password)
    .click('@submit')
    .waitForElementVisible('@adminMainMenu', 1000)
  }

  loginAdmin: function(email, password) {
    return actions(this)
      .verify.attributeEquals('@adminMainMenu', 'data-role', 'admin')
  },

  loginMember: function(email, password) {
    return actions(this)
      .verify.attributeEquals('@adminMainMenu', 'data-role', 'member')
  }
}

但这不会运行？我得到的错误是无关紧要的，因为我正在使用夜间监视器，它没有错误，但它只是跳过测试。你能发现我的重构中的任何错误吗？

Answer 1

我得到的错误无关紧要，因为......

实际上错误是相关的。它直接指向您的问题。错误是，

const loginCommands = {

  function actions(this) { // Error: Uncaught SyntaxError: Unexpected identifier
    ...
  }
  ...
}

那是因为loginCommands应该是一个对象，修复语法的方法之一就是创建action作为该对象的属性：

const loginCommands = {
  actions: function(this) { 
    ...
  },
  ...
}

但是你仍然应该避免将this作为参数传递给函数。如果我必须重构原始代码，我会按如下方式编写：

const loginCommands = (function() {

    function actions(that) {
        return that.setValue('@email', email)
        .setValue('@password', password)
        .click('@submit')
        .waitForElementVisible('@adminMainMenu', 1000)
    }

    return {
        loginAdmin: function(email, password) {
            return actions(this)
              .verify.attributeEquals('@adminMainMenu', 'data-role', 'admin')
        },

        loginMember: function(email, password) {
            return actions(this)
              .verify.attributeEquals('@adminMainMenu', 'data-role', 'member')
        }
    };
}());

这会将action函数保留在闭包中，因此无法通过loginCommands.actions()调用它。

我在this函数中使用that时已将actions更改为let，因为它可以减少对它的一些混淆。

Answer 2

你不能在像这样的普通对象中声明一个函数。将该函数分配给属性，并确保之后使用逗号：

const loginCommands = {
  actions: function(email, password) {
    return this.setValue('@email', email)
      .setValue('@password', password)
      .click('@submit')
      .waitForElementVisible('@adminMainMenu', 1000)
  },
  loginAdmin: function(email, password) {
    return this.actions(email, password)
      .verify.attributeEquals('@adminMainMenu', 'data-role', 'admin')
  },
  loginMember: function(email, password) {
    return this.actions(email, password)
      .verify.attributeEquals('@adminMainMenu', 'data-role', 'member')
  }
}

重构代码，以避免DRY失败

2 个答案: