javascript - 在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 和 rowComponent)
• 在第二个函数中，元素与 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