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

kk_miles 發(fā)布于2019-08-21 17:45 / 1139人閱讀

摘要：前端設(shè)計(jì)模式策略模式解決的問(wèn)題策略模式要解決的問(wèn)題是，代碼的復(fù)用和擴(kuò)展問(wèn)題。如果沒(méi)有策略模式的代碼是將處理函數(shù)代碼與邏輯代碼混在一起寫，這樣寫的好處是一次寫好，但代碼的擴(kuò)展性與代碼的復(fù)用性不好。

@(前端)[設(shè)計(jì)模式,JavaScript,TypeScript]

策略模式解決的問(wèn)題：策略模式要解決的問(wèn)題是，代碼的復(fù)用和擴(kuò)展問(wèn)題。如果沒(méi)有策略模式的代碼是將處理函數(shù)代碼與邏輯代碼混在一起寫，這樣寫的好處是一次寫好，但代碼的擴(kuò)展性與代碼的復(fù)用性不好。

沒(méi)有用策略模式的例子代碼：

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

可以看到的缺點(diǎn)是：如果想要擴(kuò)充代碼，只能在原來(lái)的對(duì)象上插入新的代碼，對(duì)于代碼的原作者來(lái)說(shuō)這不是為題，但是對(duì)于看別人寫的代碼的人來(lái)說(shuō)這樣的代碼想要做后期的維護(hù)難度之高可想而知。為了寫出具有高復(fù)用性，好維護(hù)的，可擴(kuò)展的代碼來(lái)說(shuō)這樣的代碼風(fēng)格是不合適的。

解決問(wèn)題的思路

1.分離出代碼中“變”與“不變”的部分。其中“變”的部分是啥？應(yīng)該是后續(xù)代碼中要擴(kuò)展的部分，不是將內(nèi)容固定死的代碼。而不變的部分就是代碼調(diào)用部分，通常來(lái)說(shuō)代碼中的調(diào)用部分是固定不變的。
2.所以將本來(lái)深度耦合的代碼分離出來(lái)，我自己給取了名字叫條件代碼和調(diào)用代碼；條件代碼時(shí)可變的可擴(kuò)展的，通常放到外部的模塊中用來(lái)調(diào)用和提高可維護(hù)性。而調(diào)用代碼提供set和`get類方法用來(lái)設(shè)置條件代碼的運(yùn)行時(shí)需要的參數(shù)和調(diào)用調(diào)用代碼用來(lái)輸出結(jié)果。

條件代碼

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

調(diào)用代碼

 /* 定義計(jì)算的調(diào)用方法類 */
 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);
    }
}

業(yè)務(wù)代碼（用來(lái)輸出結(jié)果的代碼）

let calculater = new Calculate();  //實(shí)例化生成可調(diào)用對(duì)象
calculater.setBase(1000); //設(shè)置計(jì)算基礎(chǔ)
calculater.setLeve( new L1() ); //設(shè)置計(jì)算的方式
console.log(calculater.getResult()); //get類方法，輸出最后的結(jié)果

小結(jié)

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

一個(gè)很好的決策模式的代碼

html代碼


    
        用戶名：
        密碼：   
        手機(jī)號(hào)碼：

typescript代碼

/* 定義檢查表單的規(guī)則 */
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()：添加檢查的規(guī)則; start()：開(kāi)始檢查 */
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;  //如果有返回值說(shuō)明驗(yàn)證沒(méi)有通過(guò)
        }
    }
}

/* 策略模式的表單校驗(yàn) */
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");

/* 檢查表單的函數(shù) ->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","號(hào)碼不是手機(jī)號(hào)碼");
    let msg = validator.start();
    return msg;
}
/* 檢查表單的函數(shù) ->1. */
if( regForm ){
    regForm.onsubmit = function(){
        let errMsg = ValidataFunc();
        if( errMsg ){
            alert(errMsg);
            return false;
        }
    }
}