重构代码以避免 DRY 失败

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

但这不是运行？我得到的错误是无关紧要的，因为我正在使用 nightwatch，它不会抛出任何错误，但它只是跳过了测试。你能发现我的重构有什么错误吗？

Answer 1

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

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

Answer 2

The error I got is irrelevant, because ...

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

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

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

当它在 actions 函数中使用时，我还将 this 更改为 that，因为它应该减少围绕它的一些混乱。

重构代码以避免 DRY 失败

refactor code to avoid DRY failed

javascript

nightwatch.js