JavaScript实现策略模式

　　在开篇之前先分享今天看到的一句关于设计模式的话：将不变的部分和变化的部分隔开是每个设计模式的主题

　　请大家自行感受这句话的精髓所在，并且思考学习设计模式究竟能给我们编程带来什么样的东西，欢迎大家在文章下面评（chui）论（shui），分享自己的宝贵见解。好了，回到今天的正题，JavaScript实现策略模式。

 

什么是策略模式

　　定义一系列的算法，把它们一个个封装起来，并且使它们可以相互转换。讲人话就是：我想去旅游，那么我可以选择不同的方法（策略）去达到我的目的——旅游。比如说坐飞机，走路，甚至是小黄车ofo都行，这看你具体是怎么选择。如果你想快一点，那就选择坐飞机，如果你有梦想，那就选择走路，不管你选择什么，最后你都能达到相同的目的——旅游。

 

策略模式思想

　　　接合上面的例子和开篇第一句话，在策略模式中，不变的是我们的目的——旅游，而变化的部分是我们的去的方式（坐飞机，走路，ofo），所以我们就要把这两部分隔开以实现解耦。也就是策略模式的目的所在。为了比较策略模式带来的好处，我先用一般的方式完成我上面的例子。请看代码：

 var travel = function(transportation, destination) {
        if(transportation == 'plane') {
            console.log("乘坐飞机到" + destination + "啦");
        }

        if(transportation == 'foot') {
            console.log("走路到" + destination + "啦");
        }

        if(transportation == 'ofo') {
            console.log("骑小黄车到" + destination + "啦");
        }
    }
    
    travel("foot", "北京"); //控制台打印：走路到北京啦
    travel("ofo", "天堂");  //控制台打印：骑小黄车到天堂啦

 

　　我们现在已经完成了旅游的代码，貌似不错哦。但是恕我直言，这就是一段辣鸡代码。嘻嘻，具体有如下原因：

　　1、travel函数包含了很多if语句，这些语句需要覆盖所有的逻辑分支

　　2、travel函数缺乏弹性，如果现在又多了一种交通工具小蓝车，我们就必须修改travel函数源代码，这不科学！属实是违反了开放-封闭原则。

　　现在我们使用策略模式来优化这段代码，请看下面代码：

   var strategies = {
        plane: function (destination) {
            console.log("乘坐飞机到" + destination + "啦");
        },
        foot: function (destination) {
            console.log("走路到" + destination + "啦");
        },
        ofo: function (destination) {
            console.log("骑小黄车到" + destination + "啦")
        }
    }

    var travel = function (transportation, destination) {
          strategies[transportation](destination);
    }

    travel("foot", "北京");
    travel("ofo", "天堂");

 

执行结果如下：

 

　　可以看到我们通过策略模式完成了我们的需求，并且如果以后多了交通工具，管它是小黄车小白车还是小黑车，我们只用在策略对象strategies添加新的配置就可以了，而不用改动我们的travel函数。

　　再次回顾开篇第一句话：将不变的部分和变化的部分隔开是每个设计模式的主题

　　结合我们的策略模式思考，策略模式不变的部分就是目的（上例旅游）,变化的部分就是过程(交通工具和目的地)。通过策略模式我们把这两部分彻底解耦，我们的过程(strategies)变化了也不会影响到我们的目的(travel)。我认为这就是策略模式给我们带来的好处。