前端設計模式——策略模式-有解無憂

在前端開發中，策略模式是一種常用的設計模式，它可以讓我們在不改變物件本身的情況下，通過修改其內部的演算法實作不同的行為，策略模式常常被用于實作一些復雜的業務邏輯，特別是需要根據不同的條件進行處理的情況，

下面是一個簡單的示例，演示了如何使用策略模式來實作一個計算器：

// 定義一個策略物件
const strategies = {
  add: function(num1, num2) {
    return num1 + num2;
  },
  subtract: function(num1, num2) {
    return num1 - num2;
  },
  multiply: function(num1, num2) {
    return num1 * num2;
  },
  divide: function(num1, num2) {
    return num1 / num2;
  }
};

// 定義一個計算器物件
const Calculator = function(strategy) {
  this.calculate = function(num1, num2) {
    return strategy(num1, num2);
  }
};

// 使用策略模式來創建一個計算器物件
const addCalculator = new Calculator(strategies.add);
const subtractCalculator = new Calculator(strategies.subtract);
const multiplyCalculator = new Calculator(strategies.multiply);
const divideCalculator = new Calculator(strategies.divide);

// 使用計算器物件進行計算
console.log(addCalculator.calculate(10, 5)); // 輸出 15
console.log(subtractCalculator.calculate(10, 5)); // 輸出 5
console.log(multiplyCalculator.calculate(10, 5)); // 輸出 50
console.log(divideCalculator.calculate(10, 5)); // 輸出 2

在上面的示例中，我們首先定義了一個策略物件，其中包含了四個不同的演算法：加、減、乘和除，然后我們定義了一個計算器物件，它接收一個策略物件作為引數，并將其保存在內部，最后，我們使用策略模式來創建四個不同的計算器物件，每個物件使用不同的演算法進行計算，

這個示例展示了如何使用策略模式來實作一個簡單的計算器，但實際上它可以應用于許多其他的場景中，例如表單驗證、圖表繪制等，策略模式可以讓我們通過修改策略物件來改變物件的行為，從而實作更加靈活和可擴展的代碼，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/546569.html

標籤：JavaScript

上一篇：vue+leaflet示例:地圖分屏對比展示(附原始碼下載)

下一篇：如何使用webgl(three.js)實作3D消防、3D建筑消防大樓、消防數字孿生、消防可視化解決方案——第十八課（一）