Javascript 重构代码以避免干燥失败

这段代码工作正常，但我觉得函数体部分是多余的，所以我继续重构它

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，它不会抛出错误，但它只是跳过了测试。你能在我的重构过程中发现任何错误吗？

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

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

我犯的错误是无关紧要的，因为

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

const loginCommands = {

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

这是因为

loginCommands

应该是一个对象，修复语法的方法之一是在该对象上创建

action

作为属性：

const loginCommands = {
  actions: function(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
，当它在
操作
函数中使用时，它会减少一些混淆。
不要使用
this
作为参数-使用不同的变量名。@CertainPerformance Tested，无效。为什么要对操作使用arrow函数？我得到了这个
ReferenceError：没有定义操作
只要不需要完整的
函数
就可以使用箭头函数。请参阅编辑-只需更改为
this.actions（this）
。（或者使用你以前的方法加上一个完整的函数，除了没有
this
作为参数-只需使用本机
this
引用调用上下文）你还必须将电子邮件和密码作为参数传递给操作，我想我明白了，你能编辑你的代码以便我可以将其标记为答案吗，非常感谢@MadelineRies别忘了对你觉得有用的答案进行投票，尤其是那些被接受的答案。谢谢你的解释，但最终我把actions函数作为对象，并像这样访问它