在 Coffeescript 中抽象出两行代码

Question

我目前正在将指令中存在的两种方法重构为服务。

这是方法一：

scope.computeStyle = (component) ->
  elementHash = {}
  if component.element.type == 'table'
    elementHash.height = 600
    if component.height?
      elementHash.height = component.height * 50
  else if component.element.type == 'single_value'
    elementHash.height = 200
    elementHash.width = 800
  return elementHash

这是方法二：

scope.computeStyle = (element, rowComponent) ->
  elementHash = {}
  if element.type == 'table'
    elementHash.height = 600
    if rowComponent?.height?
      elementHash.height = rowComponent.height
  else if element.type == 'single_value'
    elementHash.height = 200
    elementHash.width = 800
  return elementHash

他们都做同样的事情（略有不同）。他们采用element/component（这些对象包含有关我的应用程序中的对象的数据），检查它们是什么类型的对象（在本例中为表格或单个值），并应用高度和/或宽度转换。

在我的服务范围内，这是我所做的：

angular = require "angular"

angular.module("myapp.dashboards.layouts").service("DashboardLayoutComputeStyle" ->

  @computeStyle = (componentElement, height) ->
    elementHash = {}
    if componentElement.type == 'table'
      elementHash.height = 600
      if height?
        elementHash.height = height
    else if element.type == 'single_value'
      elementHash.height = 200
      elementHash.width = 800
    return elementHash

  @
)

这就是我的问题所在：

我不确定在我的抽象方法中的这一行要做什么：

  if height?
    elementHash.height = height

在方法一中，它是这样的：

    if component.height?
      elementHash.height = component.height * 50

方法二是这样的：

    if rowComponent?.height?
      elementHash.height = rowComponent.height

我对这两行的重构有三个限制：

1. 我必须检查方法二中是否同时存在rowComponent和height

2. 我不需要检查component是否存在，但我必须在方法一中检查height是否存在

3. 在方法一中，我必须将elementHash,height设置为component.height * 50，而在方法二中，我可以简单地将rowComponent.height分配给elementHash.height

如何将这两行抽象出来？

Answer 1

这是一个相当令人困惑的场景，所以我尝试将其分解 - 如果我对它的工作方式有任何错误，请纠正我。我正在使用您的两个原始功能，而不是您的组合版本。

• 有 2 个函数，但它们都有一个共同点（single_value），所以实际上我们可以把这个共同项去掉，我们有 3 个不同的情况（single_value、table 和 @ 987654324@)
• 在第二个函数中，元素与 thw rowComponent 一起传递只是为了检查类型。因此，我会选择第二个变量，它是一个可选类型参数。如果未提供，它将使用元素中的类型，并且将像方法 1 一样工作
• 由于每个顶级 if 语句都基于元素的类型，我已将其更改为更清晰的 case 语句

---

  @computeStyle = (element, type) ->
    # if no type is supplied, use the element's type
    type ?= element.type
    elementHash = {}
    switch type
      when 'rowComponent'
        elementHash.height = if element?.height?
          rowComponent.height
        else
          600
      when 'table'
        elementHash.height = if component.height? 
          component.height * 50
        else
          600
      when 'single_value'
        elementHash.height = 200
        elementHash.width = 800
    elementHash

现在你之前调用method1的地方可以使用computeStyle(element)，你使用method2的地方可以使用computeStyle(rowComponent, element.type)

=编辑= 根据 OP 的评论，没有类型可以识别 rowComponent，我想出了一个替代解决方案

---

  @computeStyle = (element, rowComponent) ->
    elementHash = {}
    # check the second argument to decide if we have a rowComponent or not
    if element.type is table and rowComponent?
      elementHash.height = if rowComponent.height?
        rowComponent.height
      else
        600
    # otherwise check the first elements type
    else
      switch element.type
        when 'table'
          elementHash.height = if component.height? 
            component.height * 50
          else
            600
        when 'single_value'
          elementHash.height = 200
          elementHash.width = 800
    elementHash