謹(jǐn)代表自己的理解，有錯(cuò)誤歡迎指出!

因?yàn)橛衘Query的源碼分析系列，所以盡量走jQuery的設(shè)計(jì)風(fēng)格，便于理解.

?

為什么要使用策略模式？

舉個(gè)例子，企業(yè)或者個(gè)人都要納稅，但是不同的國(guó)家稅點(diǎn)自然是不一樣的，那么這個(gè)稅點(diǎn)的計(jì)算的方式就會(huì)有很多了，如何有效的管理呢？

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

簡(jiǎn)單的說：“準(zhǔn)備一組算法，并將每一個(gè)算法封裝起來，使得它們可以互換”。

?

---

tom大叔的帖子有一套設(shè)計(jì)模式，關(guān)于策略模式討論的頗為激烈

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

大話設(shè)計(jì)模式里面一套比較經(jīng)典的，超市打折的場(chǎng)景來闡述策略模式，有興趣可以去看看

?

---

從定義上來看

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

?

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

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

最后用一個(gè)content來維護(hù)策略對(duì)象的引用，說起來很抽象，來點(diǎn)實(shí)際的

?

---

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

就我個(gè)人前端使用而言，策略模式的重心個(gè)人感覺不是如何實(shí)現(xiàn)算法，而是如何組織、調(diào)用這些算法，從而讓程序結(jié)構(gòu)更靈活，具有更好的維護(hù)性和擴(kuò)展性

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

那么舉一個(gè)例子：

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

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

為什么說是類似策略模式

1 策略模式允許替代算法獨(dú)立使用客戶端內(nèi)部函數(shù)

2 二組回調(diào)句柄中封裝了具體的算法

3 二組算法完成的都是相同的工作，都是對(duì)元素狀態(tài)的操作

4 通過toggle達(dá)到切換的目的，可以認(rèn)為content的目的了。。

好吧，是不是有點(diǎn)牽強(qiáng)了，大家理解這個(gè)意思就好了。。。。

?

---

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

參數(shù)'linear'，表示過渡使用哪種緩動(dòng)函數(shù)，我們自己可以重寫這個(gè)算法的分支

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

?

---

策略模式的場(chǎng)景也比較容易模擬

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

我們可以應(yīng)用的策略模式，用測(cè)試代碼遍歷所有的算法

?

現(xiàn)在做一個(gè)模擬，就不采用經(jīng)典的表單驗(yàn)證了

?

模擬的場(chǎng)景：淘寶快遞

假如是免郵商品，那么賣家就需要對(duì)不同的地區(qū)，商品重量，運(yùn)費(fèi)情況，采用不同的快遞公司來節(jié)約成本

假設(shè)有：順豐，圓通，申通

那么我就會(huì)根據(jù)不同的地區(qū)，調(diào)出每一個(gè)快遞公司的成本的計(jì)算類

?

模擬代碼

//淘寶 var Taobao = function() {this.company = ""; };Taobao.prototype = {//設(shè)置物流setStrategy: function(company) {this.company = company;},//計(jì)算費(fèi)用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: "長(zhǎng)沙", 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/

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。