大熊君说说JS与设计模式之------策略模式Strategy

浏览数：38 / 时间：2015年06月09日

一，总体概要

1，笔者浅谈

策略模式，又叫算法簇模式，就是定义了不同的算法，并且之间可以互相替换，此模式让算法的变化独立于使用算法的客户。

策略模式和工厂模式有一定的类似,策略模式相对简单容易理解,并且可以在运行时刻自由切换。工厂模式重点是用来创建对象。

技术分享

策略模式应用比较广泛，比如：我们现在要定义数据交换格式，现有三种方案可选1，XML 2，JSON 3，CSV就可以使用策略模式实现。

这里我要强调的是------我们是针对不同数据源选择不同方案，针对的都是同一事物做相同意图的操作只是方案不同。

代码实现如下：

 1 var dataSourceVendor = {
 2     xml : {
 3         get : function(){
 4             console.log("XML数据源") ;
 5         }
 6     } ,
 7     json : {
 8         get : function(){
 9             console.log("JSON数据源") ;
10         }
11     } ,
12     csv : {
13         get : function(){
14             console.log("CSV数据源") ;
15         }
16     }
17 } ;
18 console.log("选择的数据源：" + dataSourceVendor["json"]["get"]()) ;

注意到了吧，它们的接口是一致的，也就是意图操作一致的，只是实现不同。

我们再来看一个例子如下：

技术分享

上面的例子也不难理解，我们在发包裹的时候可以选择自己认为方便快捷的方式，作为客户而言自由选择方式，但是意图还是不变的我们做的事就是发送包裹，只是形式不同而已。

二，源码案例参考

比如姓名框里面，需要验证非空，敏感词，字符过长这几种情况。当然是可以写3个if else来解决，不过这样写代码的扩展性和维护性可想而知。

如果表单里面的元素多一点，需要校验的情况多一点，加起来写上百个if else也不是没有可能。所以更好的做法是把每种验证规则都用策略模式单独的封装起来。

需要哪种验证的时候只需要提供这个策略的名字。就像这样：

技术分享

可以看到，各种验证规则很容易被修改和相互替换。如果哪一天需求发生了变更，建议字符过长的限制改成60个字符。我想很快就可以完成这次工作。

再来看个例子：

技术分享

这段代码如果读过jQuery源码的人不会陌生，观察一下它们也有一个共性就是接口一致，完成的都是一种意图操作，区别就是取值的方式不同，但都是取值操作。

这个技巧在jQuery中称为钩子机制（HOOHS）参考文章：http://blog.rodneyrehm.de/archives/11-jQuery-Hooks.html

三，案例引入

 1 var validator = {
 2                 
 3     types:{},
 4 
 5     messages:[],
 6 
 7     config:{},
 8 
 9     validate:function (data) {
10     var i, msg, type, checker, result_ok;
11     this.messages = [];
12         for (i in data) {
13             if (data.hasOwnProperty(i)) {
14                 type = this.config[i];
15                 checker = this.types[type];
16                 if (!type) {
17                     continue;
18                 }
19                 if (!checker) { 
20                     throw {
21                         name:"ValidationError",
22                         message:"No handler to validate type " + type
23                     };
24                 }
25                 result_ok = checker.validate(data[i]);
26                 if (!result_ok) {
27                     msg = "Invalid value for *" + i + "*, " + checker.instructions;
28                     this.messages.push(msg);
29                 }
30             }
31         }
32             return this.hasErrors();
33         },
34         hasErrors:function () {
35             return this.messages.length !== 0;
36         }
37     };
38 
39     validator.types.isNonEmpty = {
40         validate:function (value) {
41             return value !== "";
42         },
43         instructions:"the value cannot be empty"
44     };
45 
46     validator.types.isNumber = {
47         validate:function (value) {
48             return !isNaN(value);
49         },
50         instructions:"the value can only be a valid number, e.g. 1, 3.14 or 2010"
51     };
52 
53     validator.types.isAlphaNum = {
54         validate:function (value) {
55             return !/[^a-z0-9]/i.test(value);
56         },
57         instructions:"the value can only contain characters and numbers, no special symbols"
58     };
59 
60     var data = {
61         first_name:"Super",
62         last_name:"Man",
63         age:"unknown",
64         username:"o_O"
65     };
66     validator.config = {
67         first_name:‘isNonEmpty‘,
68         age:‘isNumber‘,
69         username:‘isAlphaNum‘
70     };
71     validator.validate(data);
72         if (validator.hasErrors()) {
73         console.log(validator.messages.join("\n"));
74     }