做网站多少费用,三门县正规营销型网站建设地址,环球军事网最新军事新闻最新消息,招聘网站制作概念
大量的 if 判断操作#xff0c;逻辑比较复杂#xff0c;并且处理起来相对麻烦。可以采用策略模式来优化分支代码。 策略模式 #x1f4a4;#xff1a;是一种行为设计模式#xff0c;它允许你在运行时根据不同情况选择不同的算法或行为。 设计模式 #x1f90c;逻辑比较复杂并且处理起来相对麻烦。可以采用策略模式来优化分支代码。 策略模式 是一种行为设计模式它允许你在运行时根据不同情况选择不同的算法或行为。 设计模式 就是提前第一次了解全过程第二次直接规划不必要的坑。 我们在写代码亦是如此一定也遇到过许多类似的场景。随着程序员经验的增加我们对于这些常见场景的处理越来越得心应手甚至总结出了针对性的“套路”下次遇到此类问题直接运用“套路”解决省心又省力。这些在软件开发过程中逐渐积累下来的“套路”就是设计模式。
设计模式的目标之一就是提高代码的可复用性、可扩展性和可维护性。正因如此虽然有时候我们不知道某个设计模式但是看了相关书籍或文章后会有一种“啊原来这就是设计模式”的恍然大明白。
例
const game (name) {if (name 原s) {console.log(启动);} else if (name xx精英) {console.log(我先成盒了你们加油);} else if (name 云顶yy) {console.log(这就是我们之间的羁绊);} else if (name 王者zz) {console.log(我再也不买皮肤了);} else {console.log(我啥也没玩);}
};
game(原s); // 启动简单优化一下写法
const game (name) {let obj {原s: 启动,xx精英: 我先成盒了你们加油,云顶yy: 这就是我们之间的羁绊,王者zz: 我再也不买皮肤了,};if (obj[name]) {console.log(obj[name]);} else {console.log(我啥也没玩);}
};
game(原s); // 启动这种写法只是参考了策略模式的思路将逻辑封装到一个对象中。这种方式使得这个对象能够独立出来只需专注于维护这个对象本身即可。如果要是每个方法都不同那该如何去写呢?接着往下看
const game (name) {let obj {原s: () {console.log(启动);},xx精英: () {console.log(我先成盒了你们加油);},云顶yy: () {console.log(这就是我们之间的羁绊);},王者zz: () {console.log(我再也不买皮肤了);},};if (obj[name]) {obj[name]();} else {console.log(我啥也没玩);}
};game(原s); // 启动这种写法就是将对象中的处理逻辑单独封装成一个函数让他内部自己处理自己所用到的逻辑。
下面这种写法代码更加灵活和可扩展也是我比较推荐的写法。
const strategies {原s: () console.log(启动),xx精英: () console.log(我先成盒了你们加油),云顶yy: () console.log(这就是我们之间的羁绊),王者zz: () console.log(我再也不买皮肤了),
};function executeStrategy(name) {if (strategies[name]) {strategies[name]();} else {console.log(我啥也没玩);}
}executeStrategy(原s);在这个例子里面我们可以将游戏名作为参数传递给函数而不是在函数内部定义多个条件。这样我们就可以将函数封装成一个可复用的策略以便在将来添加更多的游戏名称。
1. 案例
下面看一下使用场景比如我们需要做一个 from 表单验证需要验证手机号和密码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title表单/titlescript src./src/index.js/script/headbodyform idlogin-form action methodpostlabel foraccount手机号/labelinput typenumber idaccount nameaccount /label forpassword密码/labelinput typepassword idpassword namepassword /button idlogin登录/button/formscriptlet loginForm document.getElementById(login-form);loginForm.onsubmit function (e) {e.preventDefault();let account document.getElementById(account).value;let pwd document.getElementById(password).value;if (account null || account ) {console.log(手机号不能为空);return false;}if (pwd null || pwd ) {console.log(密码不能为空);return false;}if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(account)) {console.log(手机号格式错误);return false;}if (pwd.length 6) {console.log(密码不能小于六位);return false;}// 模拟ajax请求setTimeout(() {console.log(登录成功);}, 1000);};/script/body
/html在这里可以发现问题也是很明显的如果你想说他能跑起来吗他也能跑起来但是里面的 if 语句到处都是每次新增一种校验需要整体去调整这个 loginForm.onsubmit 代码复用性也很差只能手动矫正
2. 优化
先将此方法抽离出来
let obj {isNonEmpty: function (value, errorMsg) {if (value || value null) {return errorMsg;}},isMobile: function (value, errorMsg) {// 手机号码正则if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(value)) {return errorMsg;}},minLength: function (value, errorMsg) {if (value.length length) {return errorMsg;}},
};修改 Context 内容部分
let loginForm document.getElementById(loginForm);loginForm.onsubmit function (e) {e.preventDefault();let phone strategies.isMobile(account, 手机号格式错误);let pwdMinLength strategies.minLength(pwd, 密码不能小于六位);let error accountIsMobile || pwdMinLength;if (error) {console.log(error);return false;}
};完整代码如下
divform idloginform action methodpostlabel foraccount手机号/labelinput typenumber idaccount nameaccount /label forpassword密码/labelinput typepassword idpassword namepassword /button idlogin登录/button/form
/divlet account ; // 这里的变量需要初始化一下不然无法获取到value
let pwd ;let loginForm document.getElementById(loginform);
let strategies {isNonEmpty: function (value, errorMsg) {if (value || value null) {return errorMsg;}},isMobile: function (value, errorMsg) {// 手机号码格式if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(value)) {return errorMsg;}},minLength: function (value, length, errorMsg) {console.log(value);if (value.length length) {return errorMsg;}},
};loginForm.addEventListener(submit, (e) {account document.getElementById(account).value;pwd document.getElementById(password).value;e.preventDefault();let phonenull strategies.isNonEmpty(account, 手机号不能为空);let phone strategies.isMobile(account, 手机号格式错误);let pwdMinLength strategies.minLength(pwd, 6, 密码不能小于六位);let error phonenull || phone || pwdMinLength;if (error) {console.log(error);return false;} else {console.log(提交成功);}
});
