国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

聽飛狐聊JavaScript設計模式系列15

guyan0319 / 2608人閱讀

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

本回內容介紹

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

1. 策略模式

先看一個計算獎金的例子,這個在網上的策略模式例子里曝光率很高,如下:

var a = window.alert;
// 定義一個年終獎策略
var strategy = {
    // 傳入的是工資,A級別的工資最高,倍數最多
    "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

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

2. 策略模式之人在囧途

大家都看過電影《人在囧途》吧,兩人先是乘飛機,然后乘火車,最后乘汽車,轉換為代碼如下:

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

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

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

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

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

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

測試部分代碼如下:

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

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

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

3. 策略模式之validate

有了上面兩個例子的基礎,對策略模式有了更深的理解,那介一個例子就來模擬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為驗證規則
    add:function(dom,rules) {
        var self = this;
        // 遍歷驗證規則數組
        for(var i=0,len=rules.length;i

測試部分代碼,如下:

// 代碼調用
var btn = document.getElementById("btn");
var sub = document.getElementById("sub");
// 校驗環境類
function validateContext(){
    // 創建Validator對象
    var validator = new Validator();
    // 添加一些效驗規則
    validator.add(sub.username,[
        {strategy: "isNotEmpty",errMsg:"用戶名不能為空"},
        {strategy: "minLength:6",errMsg:"用戶名長度不能小于6位"}
    ]);
    validator.add(sub.pwd,[
        {strategy: "minLength:6",errMsg:"密碼長度不能小于6位"},
    ]);
    // 獲取效驗結果
    var errMsg = validator.run();
    // 返回效驗信息
    return errMsg;
};
// 點擊確定提交
btn.addEventListener("click",function(){
    var errMsg = validateContext();
    // 如果有提示信息則直接提示
    if(errMsg){
        alert(errMsg);
        return false;
    // 否則errMsg為undefined,那么跳轉到飛狐系列,嘿嘿~
    }else{
        var url = "http://segmentfault.com/blog/%E9%A3%9E%E7%8B%90";
        window.location.href = url;
    }
},false)

這里就是模擬validator的簡版代碼了,我沒有寫太多方法,大家可以擴充。這個例子更貼近實際開發,相信對策略模式會有更深的理解。


裝個逼,剛策略模式聊到了人在囧途,突然就想起了《唐人街探案》,其中肖央演的坤泰確實很出彩~~

這一回聊的策略模式,模擬了下validator,難度適中~
下面的內容是一道題,記得系列03里的某客面試題嗎,還有一道題是數字轉中文, 例:123轉一百二十三~

JS數字轉中文

中國古代表示數量的單位依次是:個、十、百、千、萬、億、兆、京、垓、秭...這里的單位我就直接copy了。

function convert(num){
    // cn和unit是單位,unit我這里分為兩組
    var cn      = ["零","一","二","三","四","五","六","七","八","九"];
    var unit = ["十","百","千"],bigUnit = ["","萬","億","兆","京","垓","杼","穰","溝","澗","正","載"];
    var str  = "";        // 轉換字符串
    var arr  = [];        // 結果數組
    var index = 0;        // 單位索引
    var r = [];            // result縮寫
    
    if(isNaN(num)){
        throw new Error("輸入數字有誤,請重新輸入數字!");
    }
    
    if(typeof num === "number")    str = str+num;                // 數字轉字符串
    else if(typeof num === "string") str = num;
    
    if(str.length>0){
        // 判斷如果有小數,則取左邊整數
        if(str.indexOf(".")) str = str.split(".")[0];        
        // 拆分字符串到數組
        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

這里就已經可以實現數字轉中文了,繼續寫帶有單位的計算轉換,接著敲代碼吧^_^。

JS數字轉中文進階版

上面例子的基礎上,再做每四位一組,遍歷單位轉換,再加一個判斷零的情況,代碼如下:

function convert(num){
    // cn和unit是單位,unit我這里分為兩組
    var cn      = ["零","一","二","三","四","五","六","七","八","九"];
    var unit = ["十","百","千"],bigUnit = ["","萬","億","兆","京","垓","杼","穰","溝","澗","正","載"];
    var str  = "";        // 轉換字符串
    var arr  = [];        // 結果數組
    var index = 0;        // 單位索引
    var r = [];            // result縮寫
    
    if(isNaN(num)){
        throw new Error("輸入數字有誤,請重新輸入數字!");
    }
    
    if(typeof num === "number")    str = str+num;                // 數字轉字符串
    else if(typeof num === "string") str = num;
    
    if(str.length>0){
        // 判斷如果有小數,則取左邊整數
        if(str.indexOf(".")) str = str.split(".")[0];        
        // 拆分字符串到數組
        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

這就是完整的代碼了,我沒有做更多的測試,只能算是粗略的完成了,確實是簡單粗暴的敲完了代碼,其實再完美一點,在判斷零的時候還可以計算,整體代碼還可以優化算法,更簡單,性能更優化,拋磚引玉,這個就給大家繼續完善了,優化了這個例子的童鞋,也分享分享唄,可以直接評論,多碰撞碰撞,大家一起進步唄,嘿嘿~~

這一回,主要策略模式,模擬了validate,做了一道題數字轉中文的題。
下一回,聊一聊JS的享元模式。

客觀看完點個贊,推薦推薦唄,嘿嘿~~

注:此系飛狐原創,轉載請注明出處

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

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

相關文章

  • 飛狐JavaScript設計模式系列03

    摘要:閉包與柯里化閉包有權訪問另一個函數作用域中變量的函數。柯里化把接受多個參數的函數變換成接受一個單一參數最初函數的第一個參數的函數,并且返回接受余下的參數而且返回結果的新函數的技術。 本回內容介紹 上一回聊到JS的Object類型,簡單模擬了一下Java的Map,介一講,偶們來聊一下函數好唔好,介可系JS世界的一等公民喲。從函數開始,我們就將逐步過渡到設計模式,來吧,帥狐帶你裝逼帶你飛:...

    levy9527 評論0 收藏0
  • 飛狐JavaScript設計模式系列06

    本回內容介紹 上一回聊到JS中模擬接口,裝飾者模式,摻元類,分析了backbone的繼承源碼,感覺還好吧! 介一回,偶們來聊一下在JS單例模式(singleton),單例模式其實運用很廣泛,比如:jquery,AngularJS,underscore吖蝦米的都是單例模式,來吧,直接開始咯: 1. 單例模式 保證一個類只有一個實例,從全局命名空間里提供一個唯一的訪問點來訪問該對象。其實之前寫過的對象...

    hiYoHoo 評論0 收藏0
  • 飛狐JavaScript設計模式系列02

    摘要:本回內容介紹上一回聊到數據類型,簡單的過了一遍,包括個數組新特性等,這一回來聊聊對象,結合數組來實戰一些例子,在做題中成長,記憶會更深刻,來吧,開始咯創建實例的方式有兩種使用操作符后跟構造函數飛狐使用對象字面量表示法飛狐也可以飛狐這種寫法與 本回內容介紹 上一回聊到JS數據類型,簡單的過了一遍,包括9個數組新特性等,這一回來聊聊Object對象,結合數組來實戰一些例子,在做題中成長,記...

    tangr206 評論0 收藏0
  • 飛狐JavaScript設計模式系列11

    摘要:橋接模式之特權函數特權函數,用一些具有特權的方法作為橋梁以便訪問私有空間,可以回憶一下之前的系列。連續自然數分組,計算最多組的個數將至這個連續自然數分成組使每組相加的值相等。個數組中數字最多的一組有個此時的和為。 本回內容介紹 上一回,聊了適配器模式,圖片預加載,介一回,聊橋接模式(Bridge),跟之前一樣,難度比較小,橋接模式將抽象部分與它的實現部分分離,通過橋接模式聯系彼此,同時...

    wanglu1209 評論0 收藏0
  • 飛狐JavaScript設計模式系列10

    摘要:本回內容介紹上一回,聊了代理模式,虛擬代理,圖片懶加載,介一回,也比較容易,適配器模式,用一個新的接口對現有類的接口進行包裝,處理類與的不匹配。這一回,主要聊了適配器模式,圖片預加載,主要還是理解下一回,聊一聊橋接模式,順便做一做計算題。 本回內容介紹 上一回,聊了代理模式,虛擬代理,圖片懶加載,介一回,也比較容易,適配器模式(Adapter),用一個新的接口對現有類的接口進行包裝,處...

    yexiaobai 評論0 收藏0

發表評論

0條評論

guyan0319

|高級講師

TA的文章

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