大前端晉級系列之-策略模式

謹代表自己的理解，有錯誤歡迎指出!

因為有jQuery的源碼分析系列，所以盡量走jQuery的設計風格，便於理解.

 

為什么要使用策略模式？

舉個例子，企業或者個人都要納稅，但是不同的國家稅點自然是不一樣的，那么這個稅點的計算的方式就會有很多了，如何有效的管理呢？

可以采用策略模式，使用算法的責任和算法本身分割開來，委派給不同的對象管理。策略模式通常把一個系列的算法包裝到一系列的策略類里面，作為一個抽象策略類的子類。

簡單的說：“准備一組算法，並將每一個算法封裝起來，使得它們可以互換”。

 

---

tom大叔的帖子有一套設計模式，關於策略模式討論的頗為激烈

http://www.cnblogs.com/TomXu/archive/2012/03/05/2358552.html

大話設計模式里面一套比較經典的，超市打折的場景來闡述策略模式，有興趣可以去看看

 

---

從定義上來看

策略模式的本質：少用繼承，多用組合

 

從上面原型圖就能大概的了解

策略類，抽象出所有的算法的接口，然后具體的算法都通過各自的類封裝起來

最后用一個content來維護策略對象的引用，說起來很抽象，來點實際的

 

---

GOF注重策略模式封裝的是算法，

就我個人前端使用而言，策略模式的重心個人感覺不是如何實現算法，而是如何組織、調用這些算法，從而讓程序結構更靈活，具有更好的維護性和擴展性

我們可能會說,這種模式提供了最大的好處是它允許算法獨立於客戶,利用他們的不同。

那么舉一個例子：

在jQuery的toggle()允許將兩個或多個處理程序綁定到匹配的元素,在交替點擊執行。

$('#elem').toggle(function(){}, function(){});

為什么說是類似策略模式

1 策略模式允許替代算法獨立使用客戶端內部函數

2 二組回調句柄中封裝了具體的算法

3 二組算法完成的都是相同的工作，都是對元素狀態的操作

4 通過toggle達到切換的目的，可以認為content的目的了。。

好吧，是不是有點牽強了，大家理解這個意思就好了。。。。

 

---

如果說硬是要套算法的話，或許jQuery animaten能算一個

參數'linear'，表示過渡使用哪種緩動函數，我們自己可以重寫這個算法的分支

$( elem).animate( {"left: 200px"}, 5000, 'linear' );

 

---

策略模式的場景也比較容易模擬

假設我要測試排序算法的性能，比如希爾排序，堆排序，冒泡排序，快速排序等

我們可以應用的策略模式，用測試代碼遍歷所有的算法

 

現在做一個模擬，就不采用經典的表單驗證了

 

模擬的場景：淘寶快遞

假如是免郵商品，那么賣家就需要對不同的地區，商品重量，運費情況，采用不同的快遞公司來節約成本

假設有：順豐，圓通，申通

那么我就會根據不同的地區，調出每一個快遞公司的成本的計算類

 

模擬代碼

//淘寶
var Taobao = function() {
    this.company = "";
};

Taobao.prototype = {
    //設置物流
    setStrategy: function(company) {
        this.company = company;
    },
    //計算費用
    calculate: function(package) {
        return this.company.calculate(package);
    }
};

//算法
var 順豐 = function() {
    this.calculate = function(package) {
        return "20";
    }
};

var 圓通 = function() {
    this.calculate = function(package) {
        return "15";
    }
};

var 申通 = function() {
    this.calculate = function(package) {
        return "15";
    }
};


function run() {

    //商品信息
    var info = { from: "浙江", to: "長沙", weigth: "lkg" };

    var sf = new 順豐();
    var yt = new 圓通();
    var st = new 申通();

    var taobao = new Taobao();

　　//順豐的算法
    taobao.setStrategy(sf);
    taobao.calculate(info)

　　//圓通的算法
    taobao.setStrategy(yt);
    taobao.calculate(info)

　　//申通的算法
    taobao.setStrategy(st);
    taobao.calculate(info)
}

好吧，夠接地氣吧。。。大家是否看懂了？

 

附加資料:

http://weblog.bocoup.com/the-strategy-pattern-in-javascript/