设计模式-策略模式

Youngs 发布于2019-08-20 15:07 / 1964人阅读

摘要：关注了一个微信公众号从零开始学里面以诙谐幽默的方式说了一些设计模式总结一下新手和老手的区别一定不是他懂多少种语言看过多少本书而是思路的清晰度和良好的编程习惯写代码切忌的一点就是简单重复的劳动代码要反复修改提高其执行效率的设计模式相比强类型语

关注了一个微信公众号: 从零开始学React,里面以诙谐幽默的方式说了一些设计模式,总结一下

新手和老手的区别,一定不是他懂多少种语言,看过多少本书,而是思路的清晰度和良好的编程习惯.写代码切忌的一点就是简单重复的劳动.代码要反复修改,提高其执行效率.JS的设计模式,相比强类型语言来说是有不少简化的,这是语言自身的性质造成,不能生搬硬套强类型语言的设计模式,实际上也用不来.策略模式,实际上你已经在使用了,jquery的表单验证插件,react的表单验证插件,用的都是这种思路.这种思路有啥好处?为啥比写if else语句要先进?

假设我们要实现一个注册的页面,在提交注册按钮之前,我们要做如下几条校验逻辑.
1.用户名不能为空
2.密码长度不能少于6位
3.手机号码符合常规格式

页面




  
  字段验证


  
    请输入用户名: 
    请输入密码: 
    请输入手机号:

大白童鞋一看,这不简单,几分钟后,敲了以下代码

var registerForm = document.getElementById("registerForm");
registerForm.onsubmit = function() {
  if(registerForm.userName.value === "") {
    alert("用户名不能为空");
    return false;
  }
  if(registerForm.password.value.length < 6) {
    alert("密码长度不能少于6位");
    return false;
  }
  if(!/^1[3|5|8][0-9]{9}$/.test(registerForm.phoneNum.value)) {
    alert("手机号码格式不正确");
    return false;  
  }
}

首先这份作业是没问题的,代码可以使用.几天后,同事小白也要做一个表单验证的工作,就借来大白的代码,但是他却不开心,因为大白的代码不仅要重新拷贝一份而且复用性很差,要把input定义成同样的名字才能用,还有,如果要改一个验证规则,比如把密码的长度从6位改成8位,还要深入他的代码内部逻辑去修改,有这时间都够重写一个差不多的了.

大白听到小白的抱怨后,把它该成了一个函数

function check(userName, password, phoneNum) {
  if(userName == "") {
    alert("用户名不能为空");
    return false;
  }
  if(password.length < 6) {
    alert("密码长度不能少于6位");
    return false;
  }
  if(!/^1[3|5|8][0-9]{9}$/.test(phoneNum)) {
    alert("手机号码格式不对");
    return false;
  }
  return true;
}

var registerForm = document.getElementById("registerForm");
var userName, password, phoneNum;
registerForm.onsubmit = function() {
  userName = registerForm.userName.value;
  password = registerForm.password.value;
  phoneNum = registerForm.phoneNum.value;
  if(!check(userName, password, phoneNum)) {
    return false;
  }
}

如果后面的需求有变动,小白的表单需要验证的不止这几项,又或者在验证手机号上,大白和小白的验证条件不同,此时,又需要改动这个函数,渐渐地,这个函数越来越膨胀,一大堆的if else判断.

新思路:
我们分析大白的代码可以得知,验证这块逻辑,需要多带带抽离出来维护.比如长度判断,正则判断等等.每条验证规则可以称为一种验证策略,对于每一个特定的表单,我们可以选取它需要的验证策略,灵活配置.

var strategies = {
  isNonEmpty: function(error, errorMsg) {
    if(value === "") {
      return errorMsg;
    }
  },
  minLength: function(value, length, errorMsg) {
    if(value.length < length) {
      return errorMsg;
    }
  },
  isMobile: function(value, errorMsg) {
    if(!/1[3|5|8][0-9]{9}$/.test(value)) {
      return errorMsg;
    }
  }
}

大家回想jquery和bootstrap的验证插件,应该是先初始化一个Validator对象,然后调用某个函数,把每个字段绑定上相应的验证策略即可.然后再去触发验证过程.因此,该对象应该有两个函数,add()和start(),分别用于为字段绑定策略和触发验证.

function Validator() {
  this.cache = [];
}

Validator.prototype.add = function(dom, rule, errorMsg) {
  var arr = rule.split(":");
  this.cache.push(function() {
    var strategy = arr.shift();
    arr.unshift(dom.value);
    arr.push(errorMsg);
    return strategies[strategy].apply(dom, arr);
  })
}

Validator.prototype.start = function() {
  for(var i=0; i < cache.length; i++) {
    var msg = this.cache[i]();
    if(msg) {
      return msg;
    }
  }
}


var todoFunc = function() {
var validator = new Validator();
  validator.add(registerForm.userName, "isNonEmpty", "用户名不能为空");
  validator.add(registerForm.password, "minLength:6", "密码长度不能少于6位");
  validator.add(registerForm.phoneNum, "isMobile", "手机号码格式不正确");
  var errorMsg = validator.start();
  return errorMsg;
}

var registerForm = document.getElementById("registerForm");
registerForm.onsubmit = function() {
  var errorMsg = todoFunc();
  if(errorMsg) {
    alert(errorMsg);
    return false;
  }
}

GPU云服务器云服务器策略模式策略者模式代码设计模式工厂模式设计模式观察者模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82016.html

Java设计模式-策略模式

摘要：可以使用其他模式来修正这个缺陷，如工厂方法模式代理模式或享元模式。我们的策略模式只是实现了策略的管理，但是没有严格地定义适当的场景使用适当的策略，在实际项目中，一般通过工厂方法模式来实现策略类的声明。源码地址参考文献设计模式之禅定义 Define a family of algorithms,encapsulate each one,and make them interchange...

dabai 2019-08-16 18:26 评论0 收藏0
设计模式之策略模式

摘要：一定义定义维基百科策略模式作爲一種軟件設計模式，指對象有某個行爲，但是在不同的場景中，該行爲有不同的實現算法。二策略模式图我们看看策略模式是有怎样设计结构的。如中创建线程池，线程池任务满时，对提交的任务做处理就使用了策略模式。以前完整的看过《大话设计模式》，虽然完整看过，也做过笔记，但现在依然很多已经很模糊。这段时间趁着离职，有时间，打算重新过一遍，该篇将介绍策略模式。一、定义定义（维基百科...

番茄西红柿 2019-05-23 16:08 评论0 收藏0
设计模式之策略模式

摘要：一定义定义维基百科策略模式作爲一種軟件設計模式，指對象有某個行爲，但是在不同的場景中，該行爲有不同的實現算法。二策略模式图我们看看策略模式是有怎样设计结构的。如中创建线程池，线程池任务满时，对提交的任务做处理就使用了策略模式。以前完整的看过《大话设计模式》，虽然完整看过，也做过笔记，但现在依然很多已经很模糊。这段时间趁着离职，有时间，打算重新过一遍，该篇将介绍策略模式。一、定义定义（维基百科...

番茄西红柿 2019-05-23 16:08 评论0 收藏0
设计模式之策略模式

摘要：一定义定义维基百科策略模式作爲一種軟件設計模式，指對象有某個行爲，但是在不同的場景中，該行爲有不同的實現算法。二策略模式图我们看看策略模式是有怎样设计结构的。如中创建线程池，线程池任务满时，对提交的任务做处理就使用了策略模式。以前完整的看过《大话设计模式》，虽然完整看过，也做过笔记，但现在依然很多已经很模糊。这段时间趁着离职，有时间，打算重新过一遍，该篇将介绍策略模式。一、定义定义（维基百科...

MangoGoing 2019-05-22 18:00 评论0 收藏0
我的Java设计模式-策略模式

摘要：孙膑心里一万个草泥马在奔腾，差点没噎死自己滚一边去，我们这盘跟他赛马开始，策略模式上场。在设计模式之禅中的提出通过策略枚举和反射机制对策略模式进行改良，膜拜了但是要添加或淘汰策略，还是得去对枚举进行修改，也不符合开闭原则。今天给大家说说田忌赛马的故事。如有雷同，纯属巧合！话说在战国时期，群雄割据，硝烟四起，茶余饭后还是少不了娱乐活动的，其中赛马是最火爆的。一天，孙膑看到田忌像个死鸡似...

zilu 2019-08-15 12:25 评论0 收藏0