// html <form id = "registerForm" method="post" action="http://xxxx.com/api/register"> 用户名：<input type="text"> 密码：<input type="text"> 手机号码：<input type="text"> <button type="submit">提交</button> </form> // js // 策略对象 var strategies = { isNoEmpty: function (value, errorMsg) { if (value === '') { return errorMsg; } }, isNoSpace: function (value, errorMsg) { if (value.trim() === '') { return errorMsg; } }, minLength: function (value, length, errorMsg) { if (value.trim().length < length) { return errorMsg; } }, maxLength: function (value, length, errorMsg) { if (value.length > length) { return errorMsg; } }, isMobile: function (value, errorMsg) { if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[7]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(value)) { return errorMsg; } } } // 验证类 var Validator = function() { this.cache = []; } Validator.prototype.add = function(dom, rules) { var self = this; for(var i = 0, rule; rule = rules[i++];) { (function(rule) { var strategyAry = rule.strategy.split(':'); var errorMsg = rule.errorMsg; self.cache.push(function() { var strategy = strategyAry.shift(); strategyAry.unshift(dom.value); strategyAry.push(errorMsg); return strategies[strategy].apply(dom, strategyAry); }) })(rule) } }; Validator.prototype.start = function() { for(var i = 0, validatorFunc; validatorFunc = this.cache[i++];) { var errorMsg = validatorFunc(); if (errorMsg) { return errorMsg; } } }; // 调用代码 var registerForm = document.getElementById('registerForm'); var validataFunc = function() { var validator = new Validator(); validator.add(registerForm.userName, [{ strategy: 'isNoEmpty', errorMsg: '用户名不可为空' }, { strategy: 'isNoSpace', errorMsg: '不允许以空白字符命名' }, { strategy: 'minLength:2', errorMsg: '用户名长度不能小于2位' }]); validator.add(registerForm.password, [ { strategy: 'minLength:6', errorMsg: '密码长度不能小于6位' }]); validator.add(registerForm.phoneNumber, [{ strategy: 'isMobile', errorMsg: '请输入正确的手机号码格式' }]); var errorMsg = validator.start(); return errorMsg; } registerForm.onsubmit = function() { var errorMsg = validataFunc(); if (errorMsg) { alert(errorMsg); return false; } }
•第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程;
•第二个部分是环境类Context，该Context接收客户端的请求，随后把请求委托给某一个策略类;
优点：
1.有效避免多重条件选择语句
2.提供了对外开放 - 封装原则的完美支持，将方法封装在独立的strategy中，使得它们易于切换、易于理解、易于扩展。
3.复用性
缺点：
1.增加了策略类/对象的使用
2.使用策略模式，必须先了解所有的strategy，违反了最少知识原则
总结
以上所述是小编给大家介绍的JavaScript 中 if / if...else...替换方式 ，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章: