2. 程式人生 > >JavaScript設計模式 Item10 -- 策略模式Strategy

JavaScript設計模式 Item10 -- 策略模式Strategy

阿新 • • 發佈：2019-02-14

理解javascript中的策略模式

策略模式的定義是：定義一系列的演算法，把它們一個個封裝起來，並且使它們可以相互替換。

使用策略模式的優點如下：

優點：

    1. 策略模式利用組合，委託等技術和思想，有效的避免很多if條件語句。

    2. 策略模式提供了開放-封閉原則，使程式碼更容易理解和擴充套件。

    3. 策略模式中的程式碼可以複用。

一：使用策略模式計算獎金；

下面的demo是我在書上看到的，但是沒有關係，我們只是來理解下策略模式的使用而已，我們可以使用策略模式來計算獎金問題；

比如公司的年終獎是根據員工的工資和績效來考核的，績效為A的人，年終獎為工資的4倍，績效為B的人，年終獎為工資的3倍，績效為C的人，年終獎為工資的2倍；現在我們使用一般的編碼方式會如下這樣編寫程式碼：

var calculateBouns = function(salary,level) {
    if(level === 'A') {
        return salary * 4;
    }
    if(level === 'B') {
        return salary * 3;
    }
    if(level === 'C') {
        return salary * 2;
    }
};
// 呼叫如下：
console.log(calculateBouns(4000,'A')); // 16000
console.log(calculateBouns(2500
 
,'B')); // 7500

第一個引數為薪資，第二個引數為等級；

程式碼缺點如下：

calculateBouns // 函式包含了很多if-else語句。
calculateBouns // 函式缺乏彈性，假如還有D等級的話，那麼我們需要在calculateBouns 函式內新增判斷等級D的if語句；

演算法複用性差，如果在其他的地方也有類似這樣的演算法的話，但是規則不一樣，我們這些程式碼不能通用。

2. 使用組合函式重構程式碼

組合函式是把各種演算法封裝到一個個的小函式裡面，比如等級A的話，封裝一個小函式，等級為B的話，也封裝一個小函式，以此類推；如下程式碼：

var performanceA = function
 
(salary) {
    return salary * 4;
};
var performanceB = function(salary) {
    return salary * 3;
};

var performanceC = function(salary) {
    return salary * 2
};
var calculateBouns = function(level,salary) {
    if(level === 'A') {
        return performanceA(salary);
    }
    if(level === 'B') {
        return performanceB(salary);
    }
    if(level === 'C') {
        return performanceC(salary);
    }
};
// 呼叫如下
console.log(calculateBouns('A',4500)); // 18000

程式碼看起來有點改善，但是還是有如下缺點：

calculateBouns 函式有可能會越來越大，比如增加D等級的時候，而且缺乏彈性。

3. 使用策略模式重構程式碼

策略模式指的是 定義一系列的演算法，把它們一個個封裝起來，將不變的部分和變化的部分隔開，實際就是將演算法的使用和實現分離出來；演算法的使用方式是不變的，都是根據某個演算法取得計算後的獎金數，而演算法的實現是根據績效對應不同的績效規則；

一個基於策略模式的程式至少由2部分組成，第一個部分是一組策略類，策略類封裝了具體的演算法，並負責具體的計算過程。第二個部分是環境類Context，該Context接收客戶端的請求，隨後把請求委託給某一個策略類。我們先使用傳統面向物件來實現；

如下程式碼：

var performanceA = function(){};
performanceA.prototype.calculate = function(salary) {
    return salary * 4;
};

var performanceB = function(){};
performanceB.prototype.calculate = function(salary) {
    return salary * 3;
};

var performanceC = function(){};
performanceC.prototype.calculate = function(salary) {
    return salary * 2;
};
// 獎金類
var Bouns = function(){
    this.salary = null;    // 原始工資
    this.levelObj = null;  // 績效等級對應的策略物件
};
Bouns.prototype.setSalary = function(salary) {
    this.salary = salary;  // 儲存員工的原始工資
};
Bouns.prototype.setlevelObj = function(levelObj){
    this.levelObj = levelObj;  // 設定員工績效等級對應的策略物件
};
// 取得獎金數
Bouns.prototype.getBouns = function(){
    // 把計算獎金的操作委託給對應的策略物件
    return this.levelObj.calculate(this.salary);
};
var bouns = new Bouns();
bouns.setSalary(10000);
bouns.setlevelObj(new performanceA()); // 設定策略物件
console.log(bouns.getBouns());  // 40000

bouns.setlevelObj(new performanceB()); // 設定策略物件
console.log(bouns.getBouns());  // 30000

如上程式碼使用策略模式重構程式碼，可以看到程式碼職責更新分明，程式碼變得更加清晰。

4. Javascript版本的策略模式

程式碼如下：

var obj = {
        "A": function(salary) {
            return salary * 4;
        },
        "B" : function(salary) {
            return salary * 3;
        },
        "C" : function(salary) {
            return salary * 2;
        } 
};
var calculateBouns =function(level,salary) {
    return obj[level](salary);
};
console.log(calculateBouns('A',10000)); // 40000

可以看到程式碼更加簡單明瞭；

策略模式指的是定義一系列的演算法，並且把它們封裝起來，但是策略模式不僅僅只封裝演算法，我們還可以對用來封裝一系列的業務規則，只要這些業務規則目標一致，我們就可以使用策略模式來封裝它們；

5. 表單效驗

比如我們經常來進行表單驗證，比如註冊登入對話方塊，我們登入之前要進行驗證操作：比如有以下幾條邏輯：

  • 使用者名稱不能為空
  • 密碼長度不能小於6位。
  • 手機號碼必須符合格式。
  • 比如HTML程式碼如下：
<form action = "http://www.baidu.com" id="registerForm" method = "post">
        <p>
            <label>請輸入使用者名稱：</label>
            <input type="text" name="userName"/>
        </p>
        <p>
            <label>請輸入密碼：</label>
            <input type="text" name="password"/>
        </p>
        <p>
            <label>請輸入手機號碼：</label>
            <input type="text" name="phoneNumber"/>
        </p>
</form>

我們正常的編寫表單驗證程式碼如下：

var registerForm = document.getElementById("registerForm");
registerForm.onsubmit = function(){
    if(registerForm.userName.value === '') {
        alert('使用者名稱不能為空');
        return;
    }
    if(registerForm.password.value.length < 6) {
        alert("密碼的長度不能小於6位");
        return;
    }
    if(!/(^1[3|5|8][0-9]{9}$)/.test(registerForm.phoneNumber.value)) {
        alert("手機號碼格式不正確");
        return;
    }
}

但是這樣編寫程式碼有如下缺點：

  • registerForm.onsubmit 函式比較大，程式碼中包含了很多if語句；
  • registerForm.onsubmit 函式缺乏彈性，如果增加了一種新的效驗規則，或者想把密碼的長度效驗從6改成8，我們必須改registerForm.onsubmit 函式內部的程式碼。違反了開放-封閉原則。
  • 演算法的複用性差，如果在程式中增加了另外一個表單，這個表單也需要進行一些類似的效驗，那麼我們可能又需要複製程式碼了；

下面我們可以使用策略模式來重構表單效驗；

第一步我們先來封裝策略物件；如下程式碼：

var strategy = {
    isNotEmpty: function(value,errorMsg) {
        if(value === '') {
            return errorMsg;
        }
    },
    // 限制最小長度
    minLength: function(value,length,errorMsg) {
        if(value.length < length) {
            return errorMsg;
        }
    },
    // 手機號碼格式
    mobileFormat: function(value,errorMsg) {
        if(!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
            return errorMsg;
        }
    } 
};

接下來我們準備實現Validator類，Validator類在這裡作為Context，負責接收使用者的請求並委託給strategy 物件，如下程式碼：

var Validator = function(){
        this.cache = [];  // 儲存效驗規則
};
Validator.prototype.add = function(dom,rule,errorMsg) {
    var str = rule.split(":");
    this.cache.push(function(){
        // str 返回的是 minLength:6 
        var strategy = str.shift();
        str.unshift(dom.value); // 把input的value新增進引數列表
        str.push(errorMsg);  // 把errorMsg新增進引數列表
        return strategys[strategy].apply(dom,str);
    });
};
Validator.prototype.start = function(){
    for(var i = 0, validatorFunc; validatorFunc = this.cache[i++]; ) {
        var msg = validatorFunc(); // 開始效驗 並取得效驗後的返回資訊
        if(msg) {
            return msg;
        }
    }
};

Validator類在這裡作為Context，負責接收使用者的請求並委託給strategys物件。上面的程式碼中，我們先建立一個Validator物件，然後通過validator.add方法往validator物件中新增一些效驗規則，validator.add方法接收3個引數，如下程式碼：

validator.add(registerForm.password,'minLength:6','密碼長度不能小於6位');
registerForm.password 為效驗的input輸入框dom節點；

minLength:6： 是以一個冒號隔開的字串，冒號前面的minLength代表客戶挑選的strategys物件，冒號後面的數字6表示在效驗過程中所必須驗證的引數，minLength:6的意思是效驗 registerForm.password 這個文字輸入框的value最小長度為6位；如果字串中不包含冒號，說明效驗過程中不需要額外的效驗資訊；

第三個引數是當效驗未通過時返回的錯誤資訊；

當我們往validator物件裡新增完一系列的效驗規則之後，會呼叫validator.start()方法來啟動效驗。如果validator.start()返回了一個errorMsg字串作為返回值，說明該次效驗沒有通過，此時需要registerForm.onsubmit方法返回false來阻止表單提交。下面我們來看看初始化程式碼如下：

var validateFunc = function(){
    var validator = new Validator(); // 建立一個Validator物件
    /* 新增一些效驗規則 */
    validator.add(registerForm.userName,'isNotEmpty','使用者名稱不能為空');
    validator.add(registerForm.password,'minLength:6','密碼長度不能小於6位');
    validator.add(registerForm.userName,'mobileFormat','手機號碼格式不正確');

    var errorMsg = validator.start(); // 獲得效驗結果
    return errorMsg; // 返回效驗結果
};
var registerForm = document.getElementById("registerForm");
registerForm.onsubmit = function(){
    var errorMsg = validateFunc();
    if(errorMsg){
        alert(errorMsg);
        return false;
    }
}

下面是所有的程式碼如下：

var strategys = {
    isNotEmpty: function(value,errorMsg) {
        if(value === '') {
            return errorMsg;
        }
    },
    // 限制最小長度
    minLength: function(value,length,errorMsg) {
        if(value.length < length) {
            return errorMsg;
        }
    },
    // 手機號碼格式
    mobileFormat: function(value,errorMsg) {
        if(!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
            return errorMsg;
        }
    } 
};
var Validator = function(){
    this.cache = [];  // 儲存效驗規則
};
Validator.prototype.add = function(dom,rule,errorMsg) {
    var str = rule.split(":");
    this.cache.push(function(){
        // str 返回的是 minLength:6 
        var strategy = str.shift();
        str.unshift(dom.value); // 把input的value新增進引數列表
        str.push(errorMsg);  // 把errorMsg新增進引數列表
        return strategys[strategy].apply(dom,str);
    });
};
Validator.prototype.start = function(){
    for(var i = 0, validatorFunc; validatorFunc = this.cache[i++]; ) {
        var msg = validatorFunc(); // 開始效驗 並取得效驗後的返回資訊
        if(msg) {
            return msg;
        }
    }
};

var validateFunc = function(){
    var validator = new Validator(); // 建立一個Validator物件
    /* 新增一些效驗規則 */
    validator.add(registerForm.userName,'isNotEmpty','使用者名稱不能為空');
    validator.add(registerForm.password,'minLength:6','密碼長度不能小於6位');
    validator.add(registerForm.userName,'mobileFormat','手機號碼格式不正確');

    var errorMsg = validator.start(); // 獲得效驗結果
    return errorMsg; // 返回效驗結果
};
var registerForm = document.getElementById("registerForm");
registerForm.onsubmit = function(){
    var errorMsg = validateFunc();
    if(errorMsg){
        alert(errorMsg);
        return false;
    }
};

如上使用策略模式來編寫表單驗證程式碼可以看到好處了，我們通過add配置的方式就完成了一個表單的效驗；這樣的話，那麼程式碼可以當做一個元件來使用，並且可以隨時呼叫，在修改表單驗證規則的時候，也非常方便，通過傳遞引數即可呼叫；

給某個文字輸入框新增多種效驗規則

上面的程式碼我們可以看到，我們只是給輸入框只能對應一種效驗規則，比如上面的我們只能效驗輸入框是否為空，

validator.add(registerForm.userName,'isNotEmpty','使用者名稱不能為空');但是如果我們既要效驗輸入框是否為空，還要效驗輸入框的長度不要小於10位的話，那麼我們期望需要像如下傳遞引數：

validator.add(registerForm.userName,[{strategy:’isNotEmpty’,errorMsg:’使用者名稱不能為空’}，{strategy: 'minLength:6',errorMsg:'使用者名稱長度不能小於6位'}])

我們可以編寫程式碼如下：

// 策略物件
var strategys = {
    isNotEmpty: function(value,errorMsg) {
        if(value === '') {
            return errorMsg;
        }
    },
    // 限制最小長度
    minLength: function(value,length,errorMsg) {
        if(value.length < length) {
            return errorMsg;
        }
    },
    // 手機號碼格式
    mobileFormat: function(value,errorMsg) {
        if(!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
            return errorMsg;
        }
    } 
};
var Validator = function(){
    this.cache = [];  // 儲存效驗規則
};
Validator.prototype.add = function(dom,rules) {
    var self = this;
    for(var i = 0, rule; rule = rules[i++]; ){
        (function(rule){
            var strategyAry = rule.strategy.split(":");
            var errorMsg = rule.errorMsg;
            self.cache.push(function(){
                var strategy = strategyAry.shift();
                strategyAry.unshift(dom.value);
                strategyAry.push(errorMsg);
                return strategys[strategy].apply(dom,strategyAry);
            });
        })(rule);
    }
};
Validator.prototype.start = function(){
    for(var i = 0, validatorFunc; validatorFunc = this.cache[i++]; ) {
    var msg = validatorFunc(); // 開始效驗 並取得效驗後的返回資訊
    if(msg) {
        return msg;
    }
    }
};
// 程式碼呼叫
var registerForm = document.getElementById("registerForm");
var validateFunc = function(){
    var validator = new Validator(); // 建立一個Validator物件
    /* 新增一些效驗規則 */
    validator.add(registerForm.userName,[
        {strategy: 'isNotEmpty',errorMsg:'使用者名稱不能為空'},
        {strategy: 'minLength:6',errorMsg:'使用者名稱長度不能小於6位'}
    ]);
    validator.add(registerForm.password,[
        {strategy: 'minLength:6',errorMsg:'密碼長度不能小於6位'},
    ]);
    validator.add(registerForm.phoneNumber,[
        {strategy: 'mobileFormat',errorMsg:'手機號格式不正確'},
    ]);
    var errorMsg = validator.start(); // 獲得效驗結果
    return errorMsg; // 返回效驗結果
};
// 點選確定提交
registerForm.onsubmit = function(){
    var errorMsg = validateFunc();
    if(errorMsg){
        alert(errorMsg);
        return false;
    }
}

注意：如上程式碼都是按照書上來做的，都是看到書的程式碼，最主要我們理解策略模式實現，比如上面的表單驗證功能是這樣封裝的程式碼，我們平時使用jquery外掛表單驗證程式碼原來是這樣封裝的，為此我們以後也可以使用這種方式來封裝表單等學習；

相關推薦

JavaScript設計模式 Item10 -- 策略模式Strategy

理解javascript中的策略模式 策略模式的定義是：定義一系列的演算法，把它們一個個封裝起來，並且使它們可以相互替換。 使用策略模式的優點如下： 優點： 1. 策略模式利用組合，委託等技術和思想，有效的避免很多if條件語句。 2.

JavaScript設計模式之策略模式

一個 是否 strong 今天 自帶 所有 log 執行 修改 所謂“條條道路通羅馬”，在現實中，為達到某種目的往往不是只有一種方法。比如掙錢養家：可以做點小生意，可以打分工，甚至還可以是偷、搶、賭等等各種手段。在程序語言設計中，也會遇到這種類似的情況，要實現某種功能可以有

【javascript】javasrcipt設計模式之策略模式

影響 配置 可能 pan style 類庫 ava 自由 AC 策略模式支持在運行時由使用者選擇合適的算法，對於使用者而言不用關心背後的具體事項，而使用者自動根據當前程序執行的上下文和配置，從已有的算法列表中選擇出合適的算法來處理當前任務。 1.要解決的問題 2.如何實現

PHP設計模式之策略模式（Strategy）瞭解下

這個策略模式，意思就是定義一系列演算法,把它們一個個封裝起來,並且使它們可相互替換,使用得演算法的變化可獨立於使用它的客戶，簡單來講就是，策略模式設計幫助構建的物件不必自身包含邏輯，而是能夠根據需要利用其他物件中的演算法。 來看下應用場景：        1、 多個類只區

【設計模式】——策略模式（Strategy）

行為型模式——策略模式（Strategy）定義： 它定義了演算法家族，分別封裝起來，讓它們之間可以相互替換，此模式讓演算法的變化，不會影響到使用演算法的客戶。 白話理解：最近雙11的活動大家都深有感觸，

JavaScript設計模式總結-策略模式

構成：   策略類、環境類 作用：   替換掉 if-else語句 應用場景舉例：   根據不同的情況，要呼叫不同的策略方法，如表單各種規則校驗   基本形式 - Javascript寫法

設計模式：策略模式（Strategy Pattern）

/** * 策略模式。 * @author Bright Lee */ public class StrategyPattern { public static void main(String[] args) { int num1 = 1; int num2 = 2;

二十三種設計模式[21] - 策略模式（Strategy Pattern）

vat tle 新的 auto 避免 play 可能 https 相互 前言 策略模式，對象行為型模式的一種。在《設計模式 - 可復用的面向對象軟件》一書中將之描述為“ 定義一些列的算法，把它們一個個封裝起來，並且使它們可相互替換。使得算法可以獨立於使用它的客戶

Strategy Pattern ava設計模式之策略模式

以及 gis acc fat issue cal esp rri ... 　　簡介　　　　在策略模式（Strategy Pattern）中，一個類的行為或其算法可以在運行時更改。這種類型的設計模式屬於行為型模式。簡單理解就是一組算法，可以互換，再簡單點策略就是封裝算法。　　

設計模式之策略模式和狀態模式（strategy pattern & state pattern）

本文來講解一下兩個結構比較相似的行為設計模式：策略模式和狀態模式。兩者單獨的理解和學習都是比較直觀簡單的，但是實際使用的時候卻並不好實踐，算是易學難用的設計模式吧。這也是把兩者放在一起介紹的原因，經過對比和例項介紹，相信應該會一些比較深刻的感知。最後在結合個人的體會簡單聊一下對這兩個模式的一些看法。 1.

JavaScript設計模式之策略模式【組合委託】

>前言：語言只是工具，思想才是核心 >今天要總結的是 策略模式 策略在開發中的應用非常廣泛，所以也是非常常見且使用的設計模式。 在實際開發中，往往在實現一個功能時，有多種解決方案可行。 ### 常見場景： - 解壓：gzip演算法解壓，gzip演算法解壓 - 表單驗證：手機號驗證，郵箱驗證，密

設計模式之策略模式

條件 cti round ces 配置 urn 表單提交 spa 成了 在web項目中，表單的驗證和提交是我們經常開發的功能之一。下面我們來看一下一般情況下我們如何驗證一個用戶的註冊。 需求： 註冊需要用戶名，密碼，手機號碼，郵箱 所有選項不能為空 密碼要長度不能少於8位，

設計模式之策略模式&amp;簡單工廠模式

抽象 jsb args watermark amp pri eas 時間 並且 學習設計模式已經有非常長一段時間了。事實上先前已經敲過一遍了，可是老認為沒有學到什麽，認識也不夠深刻，如今趁著重構機房。再又一次來過，也不晚。 事實上在敲了機房之後，看看模式，事實

PHP設計模式之策略模式

lang 女裝 keyword 種類 tty protect 電子產品 number 添加 1.概念 策略模式：將一組特定的行為和算法封裝成類。以適應某些特定的上下文環境，這樣的模式就是策略模式 2.功能 使用策略模式實現Ioc,

【設計模式】策略模式

concrete 方法 行為 無法 策略模式 避免 mint his 多態 1、定義 1.1標準定義 策略模式（StrategyPattern）是一種比較簡單的模式，也叫做政策模式（PolicyPattern）。其定義如下：Defineafamilyofalgorithms

java設計模式之策略模式總結

客戶端 出場 cnblogs ava java設計 bsp image 需要 com 策略模式的定義：（定義截自http://www.cnblogs.com/whgk/p/6087064.html） 1、策略模式定義了算法族，分別封裝起來，讓他們之間可以互相替換，此模式讓算

java23中設計模式之策略模式

log author 批量 isp contex view strategy ext 不同 package com.bjsxt.strategy; /** * 負責和具體的策略類交互 * 這樣的話，具體的算法和直接的客戶端調用分離了，使得算法可以獨立於客戶端獨立

Java設計模式之策略模式

pattern 管理 父類 interface face 缺點 this err 相互 策略模式屬於對象的行為模式，策略模式定義了一系列的算法，並將每一個算法封裝起來，而且使它們還可以相互替換，策略模式讓算法獨立於使用它的客戶而獨立變化。策略模式使這些算法在客

設計模式之 策略模式

算法 nal class 我們 mint images iss factor () 策略模式屬於對象行為型的設計模式 定義 ：封裝了一些列算法，它們之前可以相互替換，此模式使得算法的改變，不會影響到使用它們的客戶端 策略模式有以下3個角色組成 抽象策略類 ： 所有

PHP設計模式：策略模式

php interface 設計模式 策略模式 步驟1.定義策略接口#UserStrategy.php 用戶策略 <?php namespace celvmoshi; /**用戶策略接口 * Interface UserStategy * @package celvmoshi