javascript - 重构代码以避免 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

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，因为它应该可以减少围绕它的一些混淆。