摘要：介一回，聊策略模式，策略模式定義了一系列的算法，并將每一個算法封裝起來，而且使它們還可以相互替換。策略模式讓算法獨立于使用它的客戶而獨立變化。下一回，聊一聊的享元模式。

上一回，聊了聊鏈?zhǔn)骄幊?，模擬了jQuery和underscore.js,并寫了一個遍歷多維數(shù)組的函數(shù)。
介一回，聊策略模式（Strategy），策略模式定義了一系列的算法，并將每一個算法封裝起來，而且使它們還可以相互替換。策略模式讓算法獨立于使用它的客戶而獨立變化。

先看一個計算獎金的例子，這個在網(wǎng)上的策略模式例子里曝光率很高，如下：

var a = window.alert;
// 定義一個年終獎策略
var strategy = {
    // 傳入的是工資，A級別的工資最高，倍數(shù)最多
    "A": function(salary) {
        return salary * 5;
    },
    "B": function(salary) {
        return salary * 3;
    },
    "C": function(salary) {
        return salary * 1;
    }
};

// 門面模式記得吧，系列08聊過的，這里就是接收level級別，salary薪資，返回年終獎
function Bonus(level, salary) {
    return strategy[level](salary);
};

// 測試
a(Bonus("C", 10000));    // 10000
a(Bonus("B", 20000));    // 60000
a(Bonus("A", 30000));    // 150000

策略對象封裝了具體的算法，然后一個方法接收傳參，委托給策略對象進(jìn)行計算。這個例子很容易理解，很直觀。

大家都看過電影《人在囧途》吧，兩人先是乘飛機，然后乘火車，最后乘汽車，轉(zhuǎn)換為代碼如下：

var a = window.alert;
// 接口類，不清楚的盆友請看系列05接口
var TravelStrategy = new Interface("TravelStrategy",["journey"]);

// 飛機類策略
var AirplanelStrategy = function (){
    // 檢測是否實現(xiàn)了接口方法
    Interface.ensureImplements(this,TravelStrategy);
}
AirplanelStrategy.prototype = {
    // 還原指針指向本類
    constructor:AirplanelStrategy,
    // 行程策略，這里的策略不具體實現(xiàn)，就彈出一個對白吧
    journey:function(){
        a("大衛(wèi)第一次坐飛機，登機前喝光了一箱牛奶~");
    }
}

// 火車類策略
var TrainStrategy = function (){
    Interface.ensureImplements(this,TravelStrategy);
}
TrainStrategy.prototype = {
    constructor:TrainStrategy,
    journey:function(){
        a("大衛(wèi)第一次坐火車，站票~");
    }
}

// 汽車類策略
var BusStrategy = function (){
    Interface.ensureImplements(this,TravelStrategy);
}
BusStrategy.prototype = {
    constructor:BusStrategy,
    journey:function(){
        a("大衛(wèi)第一次坐汽車，興奮不已，大唱回家過年~");
    }
}

// 定義一個人的類，其實這個就是上下文環(huán)境類，每一次對Strategy對象的請求中都將這個狀態(tài)傳遞過去
function Person(travelStrategy ){
    this.strategy = travelStrategy;
}

Person.prototype = {
    constructor:Person,
    setTravelStrategy:function(travelStrategy){
        this.strategy = travelStrategy;
    },
    travel:function(){
        this.strategy.journey();
    }
}

測試部分代碼如下:

// 測試部分，沒錯，又是大衛(wèi)登場了，首先，大衛(wèi)囧途，NO1：乘坐飛機回家
var david = new Person(new AirplanelStrategy());  
david.travel();  

// NO2：改策略乘坐火車回家
david = new Person(new TrainStrategy());  
david.travel();  
  
// NO3：該策略乘坐汽車回家  
david.setTravelStrategy(new BusStrategy());  
david.travel(); 

這個例子是根據(jù)一個java的策略模式例子改的JS版本，好玩兒吧，又玩兒了一次大衛(wèi)哥，以后一看到策略模式就會想起“衛(wèi)囧”。

有了上面兩個例子的基礎(chǔ)，對策略模式有了更深的理解，那介一個例子就來模擬validate，代碼如下：
html界面部分

    





    
    


    
    

        
登 錄
    

策略對象部分：

// 策略對象
var strategys = {
    // 判斷是否為空,傳參為dom元素的值，錯誤信息
    isNotEmpty: function(value,errMsg) {
        // 值為空，則返回傳入的提示信息
        if(value === "") {
            return errMsg;
        }
    },
    // 限制最小長度，如果不符合
    minLength: function(value,length,errMsg) {
        // 傳入的dom元素值的長度小于定義的長度，則返回錯誤信息
        if(value.length < length) {
            return errMsg;
        }
    }
};

下面是校驗類的代碼，如下：

// 定義驗證類
var Validator = function(){
    // 緩存驗證策略
    this.cache = [];  
};

Validator.prototype = {
    constructor:Validator,
    // 傳入的dom為元素的值，rules為驗證規(guī)則
    add:function(dom,rules) {
        var self = this;
        // 遍歷驗證規(guī)則數(shù)組
        for(var i=0,len=rules.length;i
測試部分代碼,如下：
// 代碼調(diào)用
var btn = document.getElementById("btn");
var sub = document.getElementById("sub");
// 校驗環(huán)境類
function validateContext(){
    // 創(chuàng)建Validator對象
    var validator = new Validator();
    // 添加一些效驗規(guī)則
    validator.add(sub.username,[
        {strategy: "isNotEmpty",errMsg:"用戶名不能為空"},
        {strategy: "minLength:6",errMsg:"用戶名長度不能小于6位"}
    ]);
    validator.add(sub.pwd,[
        {strategy: "minLength:6",errMsg:"密碼長度不能小于6位"},
    ]);
    // 獲取效驗結(jié)果
    var errMsg = validator.run();
    // 返回效驗信息
    return errMsg;
};
// 點擊確定提交
btn.addEventListener("click",function(){
    var errMsg = validateContext();
    // 如果有提示信息則直接提示
    if(errMsg){
        alert(errMsg);
        return false;
    // 否則errMsg為undefined，那么跳轉(zhuǎn)到飛狐系列，嘿嘿~
    }else{
        var url = "http://segmentfault.com/blog/%E9%A3%9E%E7%8B%90";
        window.location.href = url;
    }
},false)
這里就是模擬validator的簡版代碼了，我沒有寫太多方法，大家可以擴充。這個例子更貼近實際開發(fā)，相信對策略模式會有更深的理解。

裝個逼，剛策略模式聊到了人在囧途，突然就想起了《唐人街探案》，其中肖央演的坤泰確實很出彩~~
這一回聊的策略模式，模擬了下validator，難度適中~
下面的內(nèi)容是一道題，記得系列03里的某客面試題嗎，還有一道題是數(shù)字轉(zhuǎn)中文, 例：123轉(zhuǎn)一百二十三~
JS數(shù)字轉(zhuǎn)中文
中國古代表示數(shù)量的單位依次是：個、十、百、千、萬、億、兆、京、垓、秭...這里的單位我就直接copy了。
function convert(num){
    // cn和unit是單位，unit我這里分為兩組
    var cn      = ["零","一","二","三","四","五","六","七","八","九"];
    var unit = ["十","百","千"],bigUnit = ["","萬","億","兆","京","垓","杼","穰","溝","澗","正","載"];
    var str  = "";        // 轉(zhuǎn)換字符串
    var arr  = [];        // 結(jié)果數(shù)組
    var index = 0;        // 單位索引
    var r = [];            // result縮寫
    
    if(isNaN(num)){
        throw new Error("輸入數(shù)字有誤，請重新輸入數(shù)字！");
    }
    
    if(typeof num === "number")    str = str+num;                // 數(shù)字轉(zhuǎn)字符串
    else if(typeof num === "string") str = num;
    
    if(str.length>0){
        // 判斷如果有小數(shù)，則取左邊整數(shù)
        if(str.indexOf(".")) str = str.split(".")[0];        
        // 拆分字符串到數(shù)組
        arr = str.split("");
        // 排除開頭為0的情況
        while(arr.indexOf("0")==0){
            arr.shift();
        }                                
    }
    
    // 補位，不滿4位就補足4位，如：10->0010;126->0126
    var fill = str.length%4;
    if(fill != 0 ){
        fill = 4 - str.length%4;
        for(var i=0;i
這里就已經(jīng)可以實現(xiàn)數(shù)字轉(zhuǎn)中文了，繼續(xù)寫帶有單位的計算轉(zhuǎn)換，接著敲代碼吧^_^。
JS數(shù)字轉(zhuǎn)中文進(jìn)階版
上面例子的基礎(chǔ)上，再做每四位一組，遍歷單位轉(zhuǎn)換，再加一個判斷零的情況，代碼如下：
function convert(num){
    // cn和unit是單位，unit我這里分為兩組
    var cn      = ["零","一","二","三","四","五","六","七","八","九"];
    var unit = ["十","百","千"],bigUnit = ["","萬","億","兆","京","垓","杼","穰","溝","澗","正","載"];
    var str  = "";        // 轉(zhuǎn)換字符串
    var arr  = [];        // 結(jié)果數(shù)組
    var index = 0;        // 單位索引
    var r = [];            // result縮寫
    
    if(isNaN(num)){
        throw new Error("輸入數(shù)字有誤，請重新輸入數(shù)字！");
    }
    
    if(typeof num === "number")    str = str+num;                // 數(shù)字轉(zhuǎn)字符串
    else if(typeof num === "string") str = num;
    
    if(str.length>0){
        // 判斷如果有小數(shù)，則取左邊整數(shù)
        if(str.indexOf(".")) str = str.split(".")[0];        
        // 拆分字符串到數(shù)組
        arr = str.split("");
        // 排除開頭為0的情況
        while(arr.indexOf("0")==0){
            arr.shift();
        }                                    
    }
    
    // 補位，不滿4位就補足4位，如：10->0010;126->0126
    var fill = str.length%4;
    if(fill != 0 ){
        fill = 4 - str.length%4;
        for(var i=0;i0){
        var o = {};
        // 按照四位一組
        for(var i=0;i
這就是完整的代碼了，我沒有做更多的測試，只能算是粗略的完成了，確實是簡單粗暴的敲完了代碼，其實再完美一點，在判斷零的時候還可以計算，整體代碼還可以優(yōu)化算法，更簡單，性能更優(yōu)化，拋磚引玉，這個就給大家繼續(xù)完善了，優(yōu)化了這個例子的童鞋，也分享分享唄，可以直接評論，多碰撞碰撞，大家一起進(jìn)步唄，嘿嘿~~
這一回，主要策略模式，模擬了validate，做了一道題數(shù)字轉(zhuǎn)中文的題。
下一回，聊一聊JS的享元模式。
客觀看完點個贊，推薦推薦唄，嘿嘿~~

注：此系飛狐原創(chuàng)，轉(zhuǎn)載請注明出處