这是否遵循策略设计模式

Question

我和我的同事对于这是否遵循策略模式存在分歧。

我们有一个反应组件List，它需要一个具有以下形状的“策略”道具：

interface ListStrategy {
  renderItem: (index: number) => React.ReactNode
  itemCount: number
}

我们有一些函数可以创建一个“策略”来以某种方式呈现列表。例如，我们有以下策略构造函数。

createGroupedListStrategy(...args: GroupedListStrategyArgs): ListStrategy
createFlatListStrategy(...args: FlatListStrategyArgs): ListStrategy
createTreeListStrategy(...args: TreeListStrategyArgs): ListStrategy

我发现了很多示例，其中策略的构造函数要么不期望参数，要么期望每个策略都使用相同的参数。但是每个上面的构造函数都期望不同的参数。 createGroupedListStrategy 期望作为选项的函数可以在策略内部使用，以将项目与其组匹配。 createTreeListStrategy 期望一个可用于访问项目子项的函数作为选项。

由于构造函数如此不同，我的同事开始怀疑这些策略是否在策略模式的定义所谈论的意义上可以互换。但我的观点是，一旦策略被实例化，它们就可以毫无问题地互换。

谁能解决这个问题？我真的很好奇。

Answer 1

策略的构造函数与某事物是还是不是策略没有任何关系。策略模式的目标是提取一个独立于类的操作，并允许您在不改变类的情况下确定类的行为。

考虑以下情况，我们想要制作一个简单的“计算器”，它接受两个值并使用它们进行运算。然后它以某种方式显示该结果。我们要提取以下逻辑：

• 计算 - 如何处理两个数字
• 显示 - 结果的显示方式

这意味着我们可以在不改变类本身的情况下改变计算器的工作方式。因此，我们提取了两种策略：

interface CalculationStrategy {
    doMaths: (a: number, b: number) => number
}

interface DisplayStrategy {
    show: (num: number) => void
}

我们可以提供多种实现方式：

//calculation strategies
class AddStrategy {
  doMaths(a, b) {
    return a + b;
  }
}

class MultiplyByConstantStrategy {
  constructor(x) {
    this.x = x;
  }

  doMaths(a, b) {
    return (a + b) * this.x;
  }
}

//display strategies
class ConsoleDisplayStrategy {
  show(num) {
    console.log(num.toFixed(2))
  }
}

class HTMLDisplayStrategy {
  constructor(elementSelector) {
    this.inputElement = document.querySelector(elementSelector);
  }

  show(num) {
    this.inputElement.value = num;
  }
}

//calculate class
class Calculate {
  constructor(operationHandler, displayHandler) {
    this.operationHandler = operationHandler;
    this.displayHandler = displayHandler;
  }

  calculate(a, b) {
    const result = this.operationHandler.doMaths(a, b);
    this.displayHandler.show(result);
  }
}


/*     usage     */

//calculate the total for a bill + tip
const tip = new Calculate(
  new MultiplyByConstantStrategy(1.15), 
  new HTMLDisplayStrategy("#totalWithTip")
);
document.querySelector("#billTotal")
  .addEventListener("click", () => {
    const coffee = Number(document.querySelector("#coffeePrice").value);
    const bagel = Number(document.querySelector("#bagelPrice").value);
    
    tip.calculate(coffee, bagel);
  });
  
//just display a calculation on the page
const showAdd = new Calculate(
  new AddStrategy(),
  new HTMLDisplayStrategy("#addResult")
);
showAdd.calculate(2, 8);


//print a sum
const printAdd = new Calculate(
  new AddStrategy(),
  new ConsoleDisplayStrategy()
);

document.querySelector("#printSum")
  .addEventListener("click", () => {
    const a = Number(document.querySelector("#a").value);
    const b = Number(document.querySelector("#b").value);
    
    printAdd.calculate(a, b);
  });

.as-console-wrapper {
    /* prevent the console output from covering the page */
    position: initial !important; 
}

<pre>MultiplyByConstantStrategy + HTMLDisplayStrategy</pre>

<div>
  <label for="coffeePrice">Price for coffee:</label>
  <input id="coffeePrice" value="2" type="number" />
</div>
<div>
  <label for="bagelPrice">Price for bagel:</label>
  <input id="bagelPrice" value="8" type="number" />
</div>
<div>
  <label for="totalWithTip">You owe:</label>
  <input id="totalWithTip" readonly/>
</div>
<button id="billTotal">Bill please!</button>

<hr/>

<pre>AddStrategy + HTMLDisplayStrategy</pre>

<div>
  <label for="addResult">2 + 8 = </label>
  <input id="addResult" readonly/>
</div>

<hr/>

<pre>AddStrategy + ConsoleDisplayStrategy</pre>

<div>
  <input id="a" value="2" type="number" />
  +
  <input id="b" value="8" type="number" />
</div>
<button id="printSum">print the sum</button>

到这里就达到了目标。我们已经成功地解耦了计算和显示。我们可以更改每一个，而无需更改另一个或Calculate 类。这就是策略模式试图解决的问题。使用不同参数构建策略这一事实与此结果无关。