JavaScript 設(shè)計(jì)模式（二）：策略模式

荊兆峰發(fā)布于2019-08-23 18:17 / 3089人閱讀

摘要：策略模式實(shí)現(xiàn)的也是類似的場(chǎng)景。第二個(gè)部分是環(huán)境類不變，接收客戶的請(qǐng)求，隨后把請(qǐng)求委托給某一個(gè)策略類。參考文章設(shè)計(jì)模式設(shè)計(jì)模式與開發(fā)實(shí)踐設(shè)計(jì)模式系統(tǒng)講解與應(yīng)用本文首發(fā)，期待作者以樂之名本文原創(chuàng)，有不當(dāng)?shù)牡胤綒g迎指出。

策略模式：定義一系列的算法，把它們一個(gè)個(gè)封裝起來，并且使它們可以相互替換

生活小栗子：諸葛錦囊

諸葛給劉備的錦囊妙計(jì)，遇到任何困難都有應(yīng)對(duì)計(jì)策。策略模式實(shí)現(xiàn)的也是類似的場(chǎng)景。

再來一栗：給喜歡的女生買冰淇淋，事先不了解其喜好，只能集齊各種味道，總會(huì)命中。就是比較 “費(fèi)錢”，這也是策略模式的缺點(diǎn)，需事先考慮所有應(yīng)對(duì)場(chǎng)景。

模式特點(diǎn)

策略類：算法封裝成獨(dú)立的函數(shù)/對(duì)象

環(huán)境類：根據(jù)不同參數(shù)調(diào)用對(duì)應(yīng)的策略函數(shù)/對(duì)象執(zhí)行

模式實(shí)現(xiàn)

實(shí)現(xiàn)方式：一個(gè)基于策略模式的程序至少由兩部分組成，第一個(gè)部分是一組策略類 Strategies（可變），策略類封裝類具體的算法，并負(fù)責(zé)具體的計(jì)算過程。第二個(gè)部分是環(huán)境類 Context（不變）， Context 接收客戶的請(qǐng)求，隨后把請(qǐng)求委托給某一個(gè)策略類。

假設(shè)我們一個(gè)開發(fā)團(tuán)隊(duì)，人員組成包括（開發(fā)組長(zhǎng)，后端，前端，測(cè)試）。開發(fā)組長(zhǎng)領(lǐng)取開發(fā)任務(wù)（不變），但具體的任務(wù)執(zhí)行人員可根據(jù)類型劃分（可變）。

比如開發(fā)任務(wù)有以下幾項(xiàng)：

優(yōu)化服務(wù)器緩存（后端任務(wù)）

優(yōu)化首屏加載速度（前端任務(wù)）

完成系統(tǒng)并發(fā)測(cè)試（測(cè)試任務(wù)）

開發(fā)組長(zhǎng)會(huì)根據(jù)任務(wù)類型，分發(fā)到對(duì)應(yīng)的開發(fā)人員頭上，組長(zhǎng)不承擔(dān)具體開發(fā)任務(wù)。所以每一個(gè)開發(fā)人員就承擔(dān) Strategy 的作用（獨(dú)立的任務(wù)執(zhí)行），而組長(zhǎng)擁有并可支配所有開發(fā)人員的資源，充當(dāng) Context 的角色。團(tuán)隊(duì)每一個(gè)開發(fā)人員“組合”起來就是一個(gè) Strategies 類（執(zhí)行開發(fā)任務(wù)）。這個(gè) Strategies 是可變的，如果說后續(xù)開發(fā)任務(wù)需要安卓的、IOS的支持，只要添加安卓、IOS開發(fā)人員配置即可（可擴(kuò)展）。

// 策略類（開發(fā)人員）
var Strategies = {
    "backend": function(task) {
        console.log("進(jìn)行后端任務(wù)：", task);
    },
    "frontend": function(task) {
        console.log("進(jìn)行前端任務(wù)：", task);
    },
    "testend": function(task) {
        console.log("進(jìn)行測(cè)試任務(wù)：", task);
    }
};

//  環(huán)境類（開發(fā)組長(zhǎng)）
var Context = function(type, task) {
    typeof Strategies[type] === "function" && Strategies[type](task);
}

Context("backend", "優(yōu)化服務(wù)器緩存");
Context("frontend", "優(yōu)化首頁加載速度");
Context("testend", "完成系統(tǒng)并發(fā)測(cè)試");

上述代碼帶來的好處：

算法獨(dú)立封裝，任務(wù)分發(fā)；
開發(fā)組長(zhǎng)不承擔(dān)具體開發(fā)任務(wù)（只做頂層設(shè)計(jì)，不跟年輕人搶飯碗）

復(fù)用性更好，不局限于 Context 調(diào)用；
開發(fā)人員不愁下家（去哪寫代碼都是寫代碼）

策略模式的另一個(gè)好處就是，消除了大部分的 if...else / switch...case 條件分支語句，代碼閱讀性提高。

// 沒有使用策略模式的組長(zhǎng)...
var Context = function(type, task) {
    if (type === "backend") {
        // 把后端給我叫來
    } else if (type === "frontend") {
        // 把前端給我叫來
    } else if (type === "testend") {
        // 把測(cè)試給我叫來
    }
}

JavaScript 中，函數(shù)作為“一等公民“，也稱“一等對(duì)象”。JavaScript 中 ”高階函數(shù)“ 應(yīng)用中，函數(shù)可被作為變量或參數(shù)進(jìn)行傳遞或調(diào)用。因此在 JavaScript 中，我們可將算法封裝成獨(dú)立的函數(shù)，并將它作為參數(shù)傳遞給另一個(gè)函數(shù)調(diào)用。

// 封裝獨(dú)立的函數(shù)
var backend = function(task) {
    console.log("進(jìn)行后端任務(wù)：", task);
};
var frontend = function(task) {
    console.log("進(jìn)行前端任務(wù)：", task);
};
var testend = function(task) {
    console.log("進(jìn)行測(cè)試任務(wù)：", task);
};

//  環(huán)境類（開發(fā)組長(zhǎng)）
var Context = function(func, task) {
    typeof func === "function" && func(task);
}

Context(backend, "優(yōu)化服務(wù)器緩存");
Context(frontend, "優(yōu)化首頁加載速度");
Context(testend, "完成系統(tǒng)并發(fā)測(cè)試");

少了 Strategies 策略類的外層包裹，函數(shù)更加獨(dú)立，并不妨礙其調(diào)用。使用函數(shù)替代策略類方式，正是我們?nèi)粘ｉ_發(fā)中經(jīng)常用到的 “隱形” 策略模式。

適用場(chǎng)景

多重條件語句判斷，執(zhí)行對(duì)應(yīng)的算法場(chǎng)景

表單校驗(yàn)（validator)

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

利用組合、委托、多態(tài)的技術(shù)和思想，避免多重條件選擇語句 if...else/switch...case；

復(fù)用性更高，算法函數(shù)可在系統(tǒng)其它地方使用；

支持設(shè)計(jì)模式 “開發(fā)-封閉原則“ ，算法封裝在獨(dú)立的 Strategy 中，易于維護(hù)和擴(kuò)展；

策略模式使用 “組合和委托” 來讓 Context 擁有執(zhí)行算法的能力，一種替換對(duì)象繼承的可行方案

缺點(diǎn)：

增加了許多策略類或?qū)ο螅ㄩ_發(fā)人員職能劃分明確，人員成本有所增加）；

必須了解各個(gè) Strategy 的不同點(diǎn)，違反 “最少知識(shí)原則”（組長(zhǎng)手底下有對(duì)應(yīng)的開發(fā)人員，才不用自己那么苦逼）

JavaScript設(shè)計(jì)模式整理系列正在更新中，敬請(qǐng)關(guān)注專欄 "前端進(jìn)擊的巨人"，獲取實(shí)時(shí)更新。

參考文章

《JavaScript 設(shè)計(jì)模式》

《JavaScript 設(shè)計(jì)模式與開發(fā)實(shí)踐》

《JavaScript 設(shè)計(jì)模式系統(tǒng)講解與應(yīng)用》

本文首發(fā)Github，期待Star！
https://github.com/ZengLingYong/blog

作者：以樂之名
本文原創(chuàng)，有不當(dāng)?shù)牡胤綒g迎指出。轉(zhuǎn)載請(qǐng)指明出處。

GPU云服務(wù)器云服務(wù)器策略模式策略者模式 javascript設(shè)計(jì)模式 javascript命令模式

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/104973.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

荊兆峰

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Tmwhost：七五折促銷BETA版本澳門VPS，1核1G內(nèi)存50G Raid5 SSD硬盤750G

閱讀 1325·2021-10-27 14:14
大廠的測(cè)試經(jīng)理們都在干什么呢？

閱讀 3579·2021-09-29 09:34
9102年，隔壁公司新來的女實(shí)習(xí)生問我什么是TypeScript ？

閱讀 2481·2019-08-30 15:44
幾種常見的CSS布局

閱讀 1728·2019-08-29 17:13
JS面對(duì)對(duì)象，我要面對(duì)兩頭象

閱讀 2576·2019-08-29 13:07
vue 實(shí)現(xiàn)搜索的結(jié)果頁面支持全選與取消全選

閱讀 874·2019-08-26 18:26
Node.js

閱讀 3349·2019-08-26 13:44
前端筆試中兩道與節(jié)點(diǎn)有關(guān)的算法題

閱讀 3214·2019-08-26 13:37

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

JavaScript 設(shè)計(jì)模式（二）：策略模式

相關(guān)文章

策略模式-javascript

*JavaScript**設(shè)計(jì)*模式與開發(fā)實(shí)踐 - 策略模式

js設(shè)計(jì)模式--策略模式

**《*JavaScript**設(shè)計(jì)*模式與開發(fā)實(shí)踐》讀書筆記**

【連載】前端個(gè)人文章整理-從基礎(chǔ)到入門

發(fā)表評(píng)論

0條評(píng)論

荊兆峰

男|高級(jí)講師

TA的文章

Tmwhost：七五折促銷BETA版本澳門VPS，1核1G內(nèi)存50G Raid5 SSD硬盤750G

大廠的測(cè)試經(jīng)理們都在干什么呢？

9102年，隔壁公司新來的女實(shí)習(xí)生問我什么是TypeScript ？

幾種常見的CSS布局

JS面對(duì)對(duì)象，我要面對(duì)兩頭象

vue 實(shí)現(xiàn)搜索的結(jié)果頁面支持全選與取消全選

Node.js

前端筆試中兩道與節(jié)點(diǎn)有關(guān)的算法題

最新活動(dòng)