設計模式之策略模式

kk_miles 發布于2019-08-21 17:45 / 1136人閱讀

摘要：前端設計模式策略模式解決的問題策略模式要解決的問題是，代碼的復用和擴展問題。如果沒有策略模式的代碼是將處理函數代碼與邏輯代碼混在一起寫，這樣寫的好處是一次寫好，但代碼的擴展性與代碼的復用性不好。

@(前端)[設計模式,JavaScript,TypeScript]

策略模式解決的問題：策略模式要解決的問題是，代碼的復用和擴展問題。如果沒有策略模式的代碼是將處理函數代碼與邏輯代碼混在一起寫，這樣寫的好處是一次寫好，但代碼的擴展性與代碼的復用性不好。

沒有用策略模式的例子代碼：

var calculateBonus = function( performanceLevel, salary ){
    if ( performanceLevel === "S" ){ 
        return salary * 4;
    }
    if ( performanceLevel === "A" ){
        return salary * 3;
    }
    if ( performanceLevel === "B" ){
        return salary * 2;
    } 
};
calculateBonus( "B", 20000 ); //40000 
calculateBonus( "S", 6000 ); //    24000

可以看到的缺點是：如果想要擴充代碼，只能在原來的對象上插入新的代碼，對于代碼的原作者來說這不是為題，但是對于看別人寫的代碼的人來說這樣的代碼想要做后期的維護難度之高可想而知。為了寫出具有高復用性，好維護的，可擴展的代碼來說這樣的代碼風格是不合適的。

解決問題的思路

1.分離出代碼中“變”與“不變”的部分。其中“變”的部分是啥？應該是后續代碼中要擴展的部分，不是將內容固定死的代碼。而不變的部分就是代碼調用部分，通常來說代碼中的調用部分是固定不變的。
2.所以將本來深度耦合的代碼分離出來，我自己給取了名字叫條件代碼和調用代碼；條件代碼時可變的可擴展的，通常放到外部的模塊中用來調用和提高可維護性。而調用代碼提供set和`get類方法用來設置條件代碼的運行時需要的參數和調用調用代碼用來輸出結果。

條件代碼

/* 定義各種計算方式 */
class L1{
    calculate(base:number){
        return base*2;
    }
}
class L2{
    calculate(base:number){
        return base*3;
    }
}
class L3 {
    calculate(base: number) {
        return base * 4;
    }
}

調用代碼

 /* 定義計算的調用方法類 */
 class Calculate{
    private base: number;
    private way: any;
    setBase(base: number) {
        this.base = base;
    }
    setLeve(leve:Object) {
        this.way = leve;
    }
    getResult(){
        return this.way.calculate(this.base);
    }
}

業務代碼（用來輸出結果的代碼）

let calculater = new Calculate();  //實例化生成可調用對象
calculater.setBase(1000); //設置計算基礎
calculater.setLeve( new L1() ); //設置計算的方式
console.log(calculater.getResult()); //get類方法，輸出最后的結果

小結

從以上代碼可看出，擴展可在條件代碼中擴展。保持了代碼的高擴展和高可維護性。

一個很好的決策模式的代碼

html代碼


    
        用戶名：
        密碼：   
        手機號碼：

typescript代碼

/* 定義檢查表單的規則 */
namespace RuleList{
    export const Rules: any = {
        "isNotEmpty": function (value: any, errMsg: string) {
            console.log(11);
            if (value === "") return errMsg;
        },
        "minLength": function (value: any, minLength: number, errMsg: string) {
            console.log(22);
            if (value.length < minLength) return errMsg;
        },
        "isMobile": function (value: any, errMsg: string) {
            console.log(33);
            if (!/^1[3|5|8][0-9]{9}$/.test(value)) return errMsg;
        }
    }
}

/* 定義檢查表單的方法類：add()：添加檢查的規則; start()：開始檢查 */
class Validator {
    cache: object[] = [];
    add(dom: any, rule: string, errMsg: string) {
        let arr: any = rule.split(":");
        this.cache.push(function () {
            let whichRule: string = arr.shift();
            arr.unshift(dom.value);
            arr.push(errMsg);
            return RuleList.Rules[whichRule].apply(dom, arr);
        });
    };
    start() {
        for (let i: number = 0, func: any; i < this.cache.length; i++) {
            func = this.cache[i];
            let msg = func();
            if (msg) return msg;  //如果有返回值說明驗證沒有通過
        }
    }
}

/* 策略模式的表單校驗 */
let regForm = document.querySelector("form");
let usr:any = document.querySelector("input[type=text]:first-of-type");
let pwd:any = document.querySelector("input[type=password]");
let phone:any = document.querySelector("#ph");

/* 檢查表單的函數 ->1.1 */
let ValidataFunc = function(){
    let validator = new Validator();
    validator.add(usr, "isNotEmpty","用戶名為空");
    validator.add(pwd, "isNotEmpty", "密碼為空");
    validator.add(pwd, "minLength:6", "密碼小于6位");
    validator.add(phone,"isMobile","號碼不是手機號碼");
    let msg = validator.start();
    return msg;
}
/* 檢查表單的函數 ->1. */
if( regForm ){
    regForm.onsubmit = function(){
        let errMsg = ValidataFunc();
        if( errMsg ){
            alert(errMsg);
            return false;
        }
    }
}

云服務器 GPU云服務器 Java設計模式之（五）——代理模式策略模式策略者模式代碼設計模式工廠模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89955.html

PHP面試常考之設計模式——策略模式

摘要：策略模式介紹策略模式定義了一系列的算法，并將每一個算法封裝起來，而且使它們還可以相互替換。策略模式讓算法獨立于使用它的客戶而獨立變化。使用策略模式的好處策略模式提供了管理相關的算法族的辦法。使用策略模式可以避免使用多重條件轉移語句。你好，是我琉憶，PHP程序員面試筆試系列圖書的作者。本周（2019.3.11至3.15）的一三五更新的文章如下：周一：PHP面試常考之設計模式——工...

Drinkey 2019-07-01 12:35 評論0 收藏0
JavaScript設計模式之策略模式

摘要：設計模式與開發實踐讀書筆記。策略模式可以有效避免多重條件選擇語句。當然，策略模式也有一些缺點增加了許多策略類或者策略對象。要使用策略模式，必須了解所有的，違反了最少知識原則。至此，回家咯附設計模式之發布訂閱模式觀察者模式《JavaScript設計模式與開發實踐》讀書筆記。這本書挺好的，推薦。俗話說，條條大路通羅馬。在現實生活中，我們可以采用很多方法實現同一個目標。比如我們先定個小目...

go4it 2019-08-22 10:39 評論0 收藏0
設計模式之策略模式

摘要：一定義定義維基百科策略模式作爲一種軟件設計模式，指對象有某個行爲，但是在不同的場景中，該行爲有不同的實現算法。二策略模式圖我們看看策略模式是有怎樣設計結構的。如中創建線程池，線程池任務滿時，對提交的任務做處理就使用了策略模式。以前完整的看過《大話設計模式》，雖然完整看過，也做過筆記，但現在依然很多已經很模糊。這段時間趁著離職，有時間，打算重新過一遍，該篇將介紹策略模式。一、定義定義（維基百科...

番茄西紅柿 2019-05-23 16:08 評論0 收藏0
設計模式之策略模式

摘要：一定義定義維基百科策略模式作爲一種軟件設計模式，指對象有某個行爲，但是在不同的場景中，該行爲有不同的實現算法。二策略模式圖我們看看策略模式是有怎樣設計結構的。如中創建線程池，線程池任務滿時，對提交的任務做處理就使用了策略模式。以前完整的看過《大話設計模式》，雖然完整看過，也做過筆記，但現在依然很多已經很模糊。這段時間趁著離職，有時間，打算重新過一遍，該篇將介紹策略模式。一、定義定義（維基百科...

番茄西紅柿 2019-05-23 16:08 評論0 收藏0
設計模式之策略模式

摘要：一定義定義維基百科策略模式作爲一種軟件設計模式，指對象有某個行爲，但是在不同的場景中，該行爲有不同的實現算法。二策略模式圖我們看看策略模式是有怎樣設計結構的。如中創建線程池，線程池任務滿時，對提交的任務做處理就使用了策略模式。以前完整的看過《大話設計模式》，雖然完整看過，也做過筆記，但現在依然很多已經很模糊。這段時間趁著離職，有時間，打算重新過一遍，該篇將介紹策略模式。一、定義定義（維基百科...

MangoGoing 2019-05-22 18:00 評論0 收藏0