成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

kk_miles / 1138人閱讀

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

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

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

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

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

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

解決問題的思路

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

條件代碼 
/* 定義各種計算方式 */
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)用代碼 
 /* 定義計算的調(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ù)代碼（用來輸出結(jié)果的代碼） 
let calculater = new Calculate();  //實例化生成可調(diào)用對象
calculater.setBase(1000); //設(shè)置計算基礎(chǔ)
calculater.setLeve( new L1() ); //設(shè)置計算的方式
console.log(calculater.getResult()); //get類方法，輸出最后的結(jié)果
小結(jié)

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

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

html代碼


    

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

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()：開始檢查 */
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");

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89955.html

相關(guān)文章

  • PHP面試?？?em>之設(shè)計模式——策略模式

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

    Drinkey 評論0 收藏0

  • JavaScript設(shè)計模式之策略模式

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

    go4it 評論0 收藏0

  • 設(shè)計模式之策略模式

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

    番茄西紅柿 評論0 收藏0

  • 設(shè)計模式之策略模式

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

    番茄西紅柿 評論0 收藏0

  • 設(shè)計模式之策略模式

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

    MangoGoing 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<