大前端晋级系列之-策略模式

谨代表自己的理解，有错误欢迎指出!

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