[Day26] 為厲害的怪獻上會心一擊 ─ 策略(Strategy) <模式篇>

第 11 屆 iThome 鐵人賽

DAY 26

Software Development

用設計模式與Typescript，在React異世界築起堅固保壘！系列第 26 篇

11th鐵人賽 design pattern typescript react strategy

Yuri Tsai

2019-10-11 06:52:33

1004 瀏覽

嗨大家好我是一路爬坡的阿肥

今天是澎湖遊 Day2，先來分享個照片吧～

從民宿就能看到海景

情境描述

佐藤和肥是在異世界奮鬥多年的冒險者。雖然他的同伴們都不給力，還會扯後腿。但是憑著自己的努力和摸索，慢慢的等級愈升愈高，會的技能也愈來愈多了。現在他不僅可以發動不少技能，必要時候也會使用同伴的力量，一起打倒敵人。

不過因為愈強的技能，等待下次可以發動的時間也就愈長; 同時還要掌握同伴們的實力。所以和肥整理了一下作戰策略：

遇到會飛高麗菜：武器啾啾丸第一型＋Dark尼斯的肉盾戰術
遇到巨型蟾蜍：武器啾啾丸第二型＋啊！嗑啞的淨化魔法
遇到魔王軍幹部：武器啾啾丸第三型＋會會的 explosion!!

對於和肥來說，只要關注現在的敵人是誰，然後發動對應的技能; 並不需要知道同伴跟武器如何實現技能。我們可以說，想在異世界生存下來，熟悉 策略模式(Strategy Pattern) 的運用，就是個不可或缺的實力。

策略模式 (Strategy Pattern)

先看guru上的解釋：

Strategy is a behavioral design pattern that lets you define a family of algorithms, put each of them into a separate class, and make their objects interchangeable.
(策略模式是行為型的模式，讓你可以為每個項目產生各自的類別，並且定義一系列的演算法。最後可以讓他們的物件可以交互使用。)

在系統開發中，最常用來做決策與判斷該執行哪段程式的方式，就是 if else 跟 swtich case 了。

在決策樹簡單，執行程式也單純的情況下，我們可以用一般的語法來解決。但是如果決策的流程太多或太深，主程式可能光是 if else 或 swtich case 就佔了大半，大大降低可讀性; 另外決策內容的執行程式如果都有各自複雜的執行邏輯，而且沒有進行封裝的話，可能就不好維護和擴充，甚至也很難妥善分離功能，進行協同開發。

而策略模式就是要解決這種問題，來達到程式單一職責的目的。這個模式有兩大主要的類別，接下來搭配例子來說明。

Strategy - 抽象策略類別 & 實體策略類別

對應到 if else的實作，其實就是區塊裡執行的內容。我們把執行的內容稱為策略，並且為這些策略建立一個抽象的類別。其中，excute() 是定義每個策略類別需要實作複雜邏輯的方法，另外可以定義一些共用的方法供類別使用。

abstract class FightStrategy {
    // 留給繼承的策略實作細節
    public excute(): any { }

    // 共用方法
    public setWeapon(e: E_ChuchuMaru): string {
        //...
    }
}

繼承抽象類別的策略類別，只要實作 excute()即可。

export class Lavel1FightStrategy extends FightStrategy {
    public excute(): I_StrategyResult {
        //...
    }
}

Context - 策略中心類別

這個類別負責決策的流程，以及策略類別的建立與存取。其中，outputStrategy() 會執行目前儲存的策略實體的 excute()，來產出決策的結果。 setStrategy() 可以根據實際情況，直接將新的策略實體傳入取代現有策略; 或是將判斷用的參數傳入，在這裏進行決策的流程，並且決定要建立哪種策略實體。

export class StrategyCenter {
    protected strategy: FightStrategy;

    constructor(strategy?: FightStrategy) {
        if (strategy) this.strategy = strategy;
    }

    public setStrategy() {
        // ...
    }

    public outputStrategy(): I_StrategyResult {
        return this.strategy.excute();
    }
}