本篇內(nèi)容介紹了“什么是TypeScript策略模式”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站建設(shè)、盧龍網(wǎng)絡(luò)推廣、小程序制作、盧龍網(wǎng)絡(luò)營(yíng)銷、盧龍企業(yè)策劃、盧龍品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供盧龍建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com

 一、什么是策略模式

定義： 定義一系列的算法，把它們一個(gè)個(gè)封裝起來(lái)，并且使它們可以互相替換。

一個(gè)基于策略模式的程序至少由兩部分組成。

第一個(gè)部分是一組策略類 strategy，策略類封裝了具體的算法，并負(fù)責(zé)具體的計(jì)算過(guò)程。

第二個(gè)部分是環(huán)境類 Context , Context 接受客戶的請(qǐng)求，隨后把請(qǐng)求委托給某一個(gè)策略類

二、策略模式的作用

在現(xiàn)實(shí)中，很多時(shí)候也有多種途徑到達(dá)同一個(gè)目的地。比如我們要去某個(gè)地方旅游，可以根據(jù)具體的實(shí)際情況來(lái)選擇出行的線路。

• 如果沒(méi)有時(shí)間但是不在乎錢，可以選擇坐飛機(jī)。

• 如果沒(méi)有錢，可以選擇坐大巴或者火車。

• 如果再窮一點(diǎn)，可以選擇騎自行車。

Untitled Diagram.png

在程序設(shè)計(jì)中，我們也常常遇到類似的情況，要實(shí)現(xiàn)某一個(gè)功能有多種方案可以選擇。比如一個(gè)壓縮文件的程序，既可以選擇zip算法，也可以選擇gzip算法。

這些算法靈活多樣，而且可以隨意互相替換。這種解決方案就是本章將要介紹的策略模式。

三、策略模式案例

1、計(jì)算獎(jiǎng)金

案例描述：某公司的年終獎(jiǎng)是根據(jù)員工的工資基數(shù)和年底績(jī)效來(lái)發(fā)放的。例如，績(jī)效為S的人年終獎(jiǎng)有4倍工資，績(jī)效為A的人年終獎(jiǎng)有3倍工資，績(jī)效為B的人年終獎(jiǎng)有2倍工資，財(cái)務(wù)部要求我們提供一段代碼，來(lái)方便他們計(jì)算員工的年終獎(jiǎng)。

計(jì)算獎(jiǎng)金：最初版本

const calculateBouns = function(level: string,salary: number) :number {     if (level === 'S') {       return salary * 4;     }     if (level === 'A') {       return salary * 3;     }     if (level === 'B') {       return salary * 2;     }  }  console.log(calculateBouns('S',4000));  // 輸出16000  console.log(calculateBouns('A',3000));  // 輸出9000  console.log(calculateBouns('B',2000));  // 輸出4000

** 分析 **：

• calculateBonus 函數(shù)比較龐大，包含了很多 if-else 語(yǔ)句，這些語(yǔ)句需要覆蓋所有的邏輯分支。

• calculateBonus 函數(shù)缺乏彈性，如果增加了一種新的績(jī)效等級(jí)C，或者想把績(jī)效S的獎(jiǎng)金系數(shù)改為5，那我們必須深入 calculateBonus  函數(shù)的內(nèi)部實(shí)現(xiàn)，這是違反開放-封閉原則的。

• 算法的復(fù)用性差，如果在程序的其他地方需要重用這些計(jì)算獎(jiǎng)金的算法呢?我們的選擇只有復(fù)制和粘貼。

計(jì)算獎(jiǎng)金：(使用策略模式)面向?qū)ο笸晟瓢姹?/p>

// 計(jì)算獎(jiǎng)金：面向?qū)ο笸晟瓢姹?nbsp;class PerformanceS {     calculate(salary: number): number {         return salary * 4     } }  class PerformanceA {     calculate(salary: number): number {         return salary * 3     } }  class PerformanceB {     calculate(salary: number): number {         return salary * 2     } }  interface strategy {     calculate: (salary: number) => number; }

先創(chuàng)建一個(gè) bonus(Context)對(duì)象，并且給 bonus 對(duì)象設(shè)置一些原始的數(shù)據(jù)，比如員工的原始工資數(shù)額。

接下來(lái)把某個(gè)計(jì)算獎(jiǎng)金的策略對(duì)象也傳入bonus對(duì)象內(nèi)部保存起來(lái)。

當(dāng)調(diào)用 bonus.getBonus()來(lái)計(jì)算獎(jiǎng)金的時(shí)候，bonus對(duì)象本身并沒(méi)有能力進(jìn)行計(jì)算，

而是把請(qǐng)求委托給了之前保存好的策略對(duì)象：

// Context 對(duì)象 class Bouns {      public salary: number; // 原始工資     public strategy: strategy; // 績(jī)效等級(jí)對(duì)應(yīng)的策略對(duì)象      setSalary(salary: number) {         this.salary = salary; // 設(shè)置員工的原始工資     }      setStrategy(strategy: strategy) {       this.strategy = strategy // 設(shè)置員工績(jī)效等級(jí)對(duì)應(yīng)的策略對(duì)象     }      getBouns() { // 取得獎(jiǎng)金數(shù)額         return this.strategy.calculate(this.salary); // 把計(jì)算獎(jiǎng)金的操作委托給對(duì)應(yīng)的策略對(duì)象     } }  const bouns = new Bouns();  bouns.setSalary(4000); bouns.setStrategy(new PerformanceS()); console.log(bouns.getBouns());  // 輸出16000  bouns.setSalary(3000); bouns.setStrategy(new PerformanceA()); console.log(bouns.getBouns());  // 輸出9000  bouns.setSalary(2000); bouns.setStrategy(new PerformanceB()); console.log(bouns.getBouns());  // 輸出4000

我們?cè)賮?lái)回顧一下策略模式的思想：定義一系列的算法，把它們一個(gè)個(gè)封裝起來(lái)，并且使它們可以相互替換。這句話如果說(shuō)得更詳細(xì)一點(diǎn)，就是：定義一系列的算法，把它們各自封裝成策略類，算法被封裝在策略類內(nèi)部的方法里。在客戶對(duì)  Context發(fā)起請(qǐng)求的時(shí)候，Context總是把請(qǐng)求委托給這些策略對(duì)象中間的某一個(gè)進(jìn)行計(jì)算。

計(jì)算獎(jiǎng)金：JavaScript的完善版本

// 計(jì)算獎(jiǎng)金：JavaScript的完善版本 // 在JavaScript語(yǔ)言中，函數(shù)也是對(duì)象，所以更簡(jiǎn)單和直接的做法是把strategy直接定義為函數(shù) interface strategy {     S:(salary: number) => number;     A:(salary: number) => number;     B:(salary: number) => number; }  const strategy: strategy= {     S: function(salary: number): number {       return salary * 4;     },     A: function(salary: number): number {       return salary * 3;     },     B: function(salary: number): number {       return salary * 2;     } } // Context   var calcluateBouns = function(level: string,salary: number): number{     return strategy[level](salary);   }   console.log(calcluateBouns('S',4000));  // 輸出16000   console.log(calcluateBouns('A',3000));  // 輸出9000   console.log(calcluateBouns('B',2000));  // 輸出4000

2、表單驗(yàn)證

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. 用戶名(驗(yàn)證是否為空)

3. 密碼(驗(yàn)證長(zhǎng)度不能小于6位)

4. 手機(jī)號(hào)(驗(yàn)證是否是手機(jī)號(hào)格式)

表單驗(yàn)證：最初版本

? ?        ? 請(qǐng)輸入用戶名： 請(qǐng)輸入密碼：?   請(qǐng)輸入手機(jī)號(hào)碼：? 提交?        ?         ?           ?      

分析:

• registerForm.onsubmit函數(shù)比較龐大，包含了很多if-else語(yǔ)句，這些語(yǔ)句需要覆蓋所有的校驗(yàn)規(guī)則。

• registerForm.onsubmit函數(shù)缺乏彈性，如果增加了一種新的校驗(yàn)規(guī)則，或者想把密碼的長(zhǎng)度校驗(yàn)從6改成8，我們都必須深入  registerForm.onsubmit函數(shù)的內(nèi)部實(shí)現(xiàn)，這是違反開放—封閉原則的。

• 算法的復(fù)用性差，如果在程序中增加了另外一個(gè)表單，這個(gè)表單也需要進(jìn)行一些類似的校驗(yàn)，那我們很可能將這些校驗(yàn)邏輯復(fù)制得漫天遍野

表單驗(yàn)證：策略模式案例

// 策略對(duì)象 const strategies: Object = {     isEmpty(value: string, errMsg: string): string {       if(value === '') {         return errMsg       }     },     minLength(value: string, length: number, errMsg: string) : string{       if (value.length;      constructor() {         this.cache = []     }      add(value: string, rule: string, msg: string) {         const params: Array = rule.split(':');         this.cache.push(() => {             const strategy: string = params.shift();             params.unshift(value);             params.push(msg);             return strategies[strategy].apply(null, params)         })     }      check(): string {         let value: Function;         for (value of this.cache) {             const msg = value();             if (msg) {                 return msg             }         }     } }    var submitBtn = document.getElementById('submitBtn'); var registerForm = document.getElementById('registerForm'); var validateFunc = function() {     var validator = new Validator();   // 添加規(guī)則     validator.add(registerForm.username.value,'isEmpty','用戶名不能為空');     validator.add(registerForm.password.value,'minLength:6','密碼長(zhǎng)度不能小于6位');     validator.add(registerForm.phone.value,'isMobile','手機(jī)號(hào)格式不正確');      // 校驗(yàn)結(jié)果     var errMsg = validator.check();     return errMsg; }   submitBtn.onclick = function() {     var errMsg = validateFunc();     if(errMsg) {       console.log(errMsg);       return false;     } else {       console.log('表單驗(yàn)證成功')     }   }

四、策略模式的優(yōu)缺點(diǎn)

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

策略模式利用組合、委托和多態(tài)等技術(shù)和思想，可以有效地避免多重條件選擇語(yǔ)句。

策略模式提供了對(duì)開放—封閉原則的完美支持，將算法封裝在獨(dú)立的 strateg (策略)中，使得它們易于切換，易于理解，易于擴(kuò)展。

策略模式中的算法也可以復(fù)用在系統(tǒng)的其他地方，從而避免許多重復(fù)的復(fù)制粘貼工作。

在策略模式中利用組合和委托來(lái)讓 Context 擁有執(zhí)行算法的能力，這也是繼承的一種更輕便的替代方案。

缺點(diǎn)：

1、使用策略模式會(huì)在程序中增加許多策略類或者策略對(duì)象，但實(shí)際上這比把它們負(fù)責(zé)的邏輯堆砌在 Context 中要好。

2、要使用策略模式，必須了解所有的 strategy ，必須了解各個(gè) strategy  之間的不同點(diǎn)，這樣才能選擇一個(gè)合適的strategy。比如，我們要選擇一種合適的旅游出行路線，必須先了解選擇飛機(jī)、火車、自行車等方案的細(xì)節(jié)。此時(shí)strategy要向客戶暴露它的所有實(shí)現(xiàn)，這是違反最少知識(shí)原則的。

“什么是TypeScript策略模式”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！