欢迎光临
我的个人博客网站

[JS设计模式]:策略模式及应用-计算奖金、表单验证的实现(5)


介绍

策略模式的意义是定义一系列的算法,把它们一个个封装起来,并且使它们可相互替换。此模式让算法的变化不会影响到使用算法的客户。

实现

举一个例子,比如我们做数据合法性校验,一般是通过swich来实现,或者通过if语句来实现,如果校验规则多了的话,那么代码的扩展性和维护性就很差了,而且进行单元测试就越来越复杂,代码如下:

var validator = {     validate: function(value,type) {         switch(type) {             case 'isNonEmpty':                 return true             case 'isNumber':                 return true;             case 'isAlphaNum':                 return true;             default:                 return true;         }     } }  alert(validator.validate('123','isNonEmpty'))

怎么避免上面代码的弊端呢,我们可以使用策略模式把相同的工作代码封装成不同的验证类,我们只需要通过传递不同的名称来调用不同的验证类方法(也即是不同的算法),实现代码如下:

var validator = {     types: { // 存放验证规则         isNonEmpty: {             validate: function(value) {                 return value !== ''             },             instructions: '传入的值不能为空'         },         isNumber: {             validate: function(value) {                 return !isNaN(value);             },             instructions: '传入的值不是数字'         },         isAlphaNum: {             validate: function(value) {                 return !/[^a-z0-9]/i.test(value)             },             instructions: '传入的值只能是数字或者字母,不能是特殊字符'         }     },      config: {}, // 需要验证的类型     messages: [], // 存放错误信息     validate: function(data) { // 传入的data 为key-value的键值对         var i, type, checker, resultOk;         this.messages = []; // 首先清空错误信息         for(i in data) {             if(data.hasOwnProperty(i)) { // 判断i不是原型上的属性                 type = this.config[i]; // 获取验证类型                 if(!type) { // 没有当前校验类型直接跳过(不需要验证的)                     continue;                 }                 checker = this.types[type]; // 获取验证规则的验证类方法                 if(!checker) { // 验证规则类不存在 直接抛出异常                     throw {                         name: "ValidationError",                         message: "No handler to validate type " + type                     }                 }                 resultOk = checker.validate(data[i]);                 if(!resultOk) { // 验证不通过                     this.messages.push(checker.instructions);                 }             }         }         return this.hasErrors();     },     hasErrors: function() {         return this.messages.length !== 0;     }      }

使用方式如下:

var data = {     firstName: '',     lasName: 'shu',     age: '',     userName: 'tom shu' } validator.config = {     firstName: 'isNonEmpty',     age: 'isNumber',     userName: 'isAlphaNum' }  validator.validate(data); if(validator.hasErrors()) {     console.log(validator.messages.join("n")); } // 结果: // 传入的值不能为空 // 传入的值只能是数字或者字母,不能是特殊字符

 其它策略模式示例

jquery中使用的animate方法

$( div ).animate( {"left: 200px"}, 1000, 'linear' );  //匀速运动 $( div ).animate( {"left: 200px"}, 1000, 'cubic' );  //三次方的缓动

这 2 句代码都是让 div 在 1000ms 内往右移动 200 个像素. linear(匀速) 和 cubic(三次方缓动) 就是一种策略模式的封装.

计算奖金

比如公司的年终奖是根据员工的工资和绩效来考核的,绩效为A的人,年终奖为工资的4倍,绩效为B的人,年终奖为工资的3倍,绩效为C的人,年终奖为工资的2倍;现在我们使用一般的编码方式会如下这样编写代码:

var calculateBouns = function(salary,level) {     if(level === 'A') {         return salary * 4;     }     if(level === 'B') {         return salary * 3;     }     if(level === 'C') {         return salary * 2;     } }; // 调用如下: console.log(calculateBouns(4000,'A')); // 16000 console.log(calculateBouns(2500,'B')); // 7500

缺点:函数含有很多if语句,缺乏弹性,算法复用性差,如果其它地方有类似的算法,但是规则不一样,这些代码不能通用。

使用策略模式代码如下:

//代码如下: var obj = {         "A": function(salary) {             return salary * 4;         },         "B" : function(salary) {             return salary * 3;         },         "C" : function(salary) {             return salary * 2;         }  }; var calculateBouns =function(level,salary) {     return obj[level](salary); }; console.log(calculateBouns('A',10000)); // 40000

策略模式不仅仅只封装算法,我们还可以对用来封装一系列的业务规则,只要这些业务规则目标一致,我们就可以使用策略模式来封装它们

表单校验

比如常见的就是注册页面,需要对用户名,密码,手机号等进行规则校验,验证规则如下:

  • 用户名不能为空;
  • 密码不能小于6位;
  • 手机号码符合手机正则规则

HTML代码如下:

<form action="" id="registerForm" method="post" onsubmit="return submitValidate()">     <p>         <label>请输入用户名:</label>         <input type="text" name="userName" />     </p>     <p>         <label>请输入密码:</label>         <input type="text" name="password" />     </p>     <p>         <label>请输入手机号码:</label>         <input type="text" name="phoneNumber" />     </p>     <div>         <button type="submit">提交</button>     </div> </form>

submitValidate验证方法如下:

function submitValidate() {     var registerForm = document.getElementById("registerForm");     if(registerForm.userName.value === '') {             alert('用户名不能为空');             return false;         }     else if(registerForm.password.value.length < 6) {         alert("密码的长度不能小于6位");         return false;     }     else if(!/(^1[0-9]{10}$)/.test(registerForm.phoneNumber.value)) {         alert("手机号码格式不正确");         return false;     }     return true; }

 缺点:

  • submitValidate函数中的if else-if代码会根据验证项而逐渐变大;
  • submitValidate函数缺乏弹性,如果添加新的校验规则是添加else-if语句,但是如果是修改原来的验证规则,那么就需要改函数内的代码,违反开放-封闭原则;
  • 算法的复用性差,如果其它页面也需要用类似的校验,那么这个方法就不能共用了,可以又是复制代码。

 下面我们使用策略模式来重构上面的代码。

第一步,封装策略对象,也即是验证的不同算法,代码如下:

var strategys = {     isNotEmpty: function(value,errorMsg) {         if(value === '') {             return errorMsg;         }     },     // 限制最小长度     minLength: function(value,length,errorMsg) {         if(value.length < length) {             return errorMsg;         }     },     // 手机号格式     mobileFormat: function(value,errorMsg) {         if(!/(^1[0-9]{10}$)/.test(value)) {             return errorMsg;         }     } }

第二步,实现Validator类,Validator类在这里作为Context,负责接收用户的请求并委托给strategy 对象。

通俗的话就是添加表单中需要验证的一些规则以及获取验证结果(是否验证通过),如下代码:

function Validator() {     this.cache = []; // 保存效验规则 }  Validator.prototype = {     constructor: Validator,     add: function(dom,rule,errorMsg) {         var str = rule.split(":"); // minLength:6的场景         var fn = function() {             var strategyType = str.shift(); // 删除str数组中的第一个元素并返回,即是获取校验规则的函数名             str.unshift(dom.value); // 往数组str的第一位插入value值             str.push(errorMsg);             return strategys[strategyType].apply(dom,str);         }         this.cache.push(fn);     },     start: function() {         for(var i = 0, fn; fn = this.cache[i++];) {             var msg = fn();             if(msg) {                 return msg;             }         }     } } 

调用方式:

function submitValidate() {     var registerForm = document.getElementById("registerForm");     var validator = new Validator();     validator.add(registerForm.userName,'isNotEmpty', '用户名不能为空');     validator.add(registerForm.password,'minLength:6', '密码的长度不能小于6位');     validator.add(registerForm.phoneNumber,'mobileFormat', '手机号码格式不正确');     var resultMsg = validator.start();     if(resultMsg) {         alert(resultMsg);         return false;     }     return true; }

 完整的JS代码:

var strategys = {     isNotEmpty: function(value,errorMsg) {         if(value === '') {             return errorMsg;         }     },     // 限制最小长度     minLength: function(value,length,errorMsg) {         if(value.length < length) {             return errorMsg;         }     },     // 手机号格式     mobileFormat: function(value,errorMsg) {         if(!/(^1[0-9]{10}$)/.test(value)) {             return errorMsg;         }     } }  function Validator() {     this.cache = []; // 保存效验规则 }  Validator.prototype = {     constructor: Validator,     add: function(dom,rule,errorMsg) {         var str = rule.split(":"); // minLength:6的场景         var fn = function() {             var strategyType = str.shift(); // 删除str数组中的第一个元素并返回,即是获取校验规则的函数名             str.unshift(dom.value); // 往数组str的第一位插入value值             str.push(errorMsg);             return strategys[strategyType].apply(dom,str);         }         this.cache.push(fn);     },     start: function() {         for(var i = 0, fn; fn = this.cache[i++];) {             var msg = fn();             if(msg) {                 return msg;             }         }     } }   function submitValidate() {     var registerForm = document.getElementById("registerForm");     var validator = new Validator();     validator.add(registerForm.userName,'isNotEmpty', '用户名不能为空');     validator.add(registerForm.password,'minLength:6', '密码的长度不能小于6位');     validator.add(registerForm.phoneNumber,'mobileFormat', '手机号码格式不正确');     var resultMsg = validator.start();     if(resultMsg) {         alert(resultMsg);         return false;     }     return true; }

 以上代码我们只实现了给一个dom元素绑定一条验证规则,那如果需要绑定多条验证规则呢?

比如上面的代码我们只能效验输入框是否为空,validator.add(registerForm.userName,’isNotEmpty’,’用户名不能为空’);但是如果我们既要效验输入框是否为空,还要效验输入框的长度不要小于10位的话,那么我们期望需要像如下传递参数:

validator.add(registerForm.userName,[{strategy:'isNotEmpty',errorMsg:'用户名不能为空'},{strategy: 'minLength:10',errorMsg:'用户名长度不能小于10位'}])

 我们只需要修改一下add方法即可,如下代码:

function Validator() {     this.cache = []; // 保存效验规则 }  Validator.prototype = {     constructor: Validator,     add: function(dom,rules) {         var self = this;         for(var i = 0, len = rules.length; i < len; i++) {             var rule = rules[i];             (function(rule){                 var str = rule.strategy.split(":"); // minLength:6的场景                 var fn = function() {                     var strategyType = str.shift(); // 删除str数组中的第一个元素并返回,即是获取校验规则的函数名                     str.unshift(dom.value); // 往数组str的第一位插入value值                     str.push(rule.errorMsg);                     return strategys[strategyType].apply(dom,str);                 }                 self.cache.push(fn);             })(rule)         }     },     start: function() {         for(var i = 0, fn; fn = this.cache[i++];) {             var msg = fn();             if(msg) {                 return msg;             }         }     } } 

调用方式改变一下:

function submitValidate() {     var registerForm = document.getElementById("registerForm");     var validator = new Validator();     validator.add(registerForm.userName, [{         strategy: 'isNotEmpty',         errorMsg: '用户名不能为空'     }, {         strategy: 'minLength:10',         errorMsg: '用户名长度不能小于10位'     }]);     validator.add(registerForm.password, [{         strategy: 'minLength:6',         errorMsg: '密码的长度不能小于6位'     }]);     validator.add(registerForm.phoneNumber, [{         strategy: 'mobileFormat',         errorMsg: '手机号码格式不正确'     }]);     var resultMsg = validator.start();     if (resultMsg) {         alert(resultMsg);         return false;     }     return true; }

完整的代码如下:

var strategys = {     isNotEmpty: function(value, errorMsg) {         if (value === '') {             return errorMsg;         }     },     // 限制最小长度     minLength: function(value, length, errorMsg) {         if (value.length < length) {             return errorMsg;         }     },     // 手机号格式     mobileFormat: function(value, errorMsg) {         if (!/(^1[0-9]{10}$)/.test(value)) {             return errorMsg;         }     } }  function Validator() {     this.cache = []; // 保存效验规则 }  Validator.prototype = {     constructor: Validator,     add: function(dom, rules) {         var self = this;         for (var i = 0, len = rules.length; i < len; i++) {             var rule = rules[i];             (function(rule) {                 var str = rule.strategy.split(":"); // minLength:6的场景                 var fn = function() {                     var strategyType = str.shift(); // 删除str数组中的第一个元素并返回,即是获取校验规则的函数名                     str.unshift(dom.value); // 往数组str的第一位插入value值                     str.push(rule.errorMsg);                     return strategys[strategyType].apply(dom, str);                 }                 self.cache.push(fn);             })(rule)         }     },     start: function() {         for (var i = 0, fn; fn = this.cache[i++];) {             var msg = fn();             if (msg) {                 return msg;             }         }     } }  function submitValidate() {     var registerForm = document.getElementById("registerForm");     var validator = new Validator();     validator.add(registerForm.userName, [{         strategy: 'isNotEmpty',         errorMsg: '用户名不能为空'     }, {         strategy: 'minLength:10',         errorMsg: '用户名长度不能小于10位'     }]);     validator.add(registerForm.password, [{         strategy: 'minLength:6',         errorMsg: '密码的长度不能小于6位'     }]);     validator.add(registerForm.phoneNumber, [{         strategy: 'mobileFormat',         errorMsg: '手机号码格式不正确'     }]);     var resultMsg = validator.start();     if (resultMsg) {         alert(resultMsg);         return false;     }     return true; }

当然我们也可以把验证各种类型的算法放到构造函数Validator原型上,这儿就不处理了。

总结

策略模式优点:

  • 策略模式利用组合,委托等技术和思想,有效的避免很多if条件语句。
  • 策略模式提供了开放-封闭原则,使代码更容易理解和扩展。
  • 策略模式中的代码可以复用。

参考

赞(0) 打赏
未经允许不得转载:张拓的天空 » [JS设计模式]:策略模式及应用-计算奖金、表单验证的实现(5)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏