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

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

我必须检查方法二中是否存在rowComponent和height
我不需要检查component是否存在，但我必须检查方法一中是否存在height
在方法一中，我必须将elementHash,height设置为component.height * 50，而在方法二中，我只需将rowComponent.height分配给elementHash.height

我如何抽出这两行？

Answer 1

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

有两个函数，但它们都有一个共同的案例（single_value），所以实际上我们可以把这个共同的项目拿出来，我们有3个不同的案例（single_value，{ {1}}和table）
在第二个函数中，元素与thw rowComponent一起传递只是为了检查类型。所以我会选择第二个变量，它是一个可选的类型参数。如果没有提供，它将使用元素中的类型，它将像方法1一样工作
由于每个顶级if语句都基于元素的类型，我已将其更改为更清晰的案例陈述

rowComponent

现在，您之前调用了method1，可以使用@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，并且在使用method2的地方，您可以使用computeStyle(element)

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

computeStyle(rowComponent, element.type)

在Coffeescript中抽象出两行代码

1 个答案: