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

因為有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/

?

總結

以上是生活随笔為你收集整理的大前端晋级系列之-策略模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。