JavaScript设计模式之策略模式实现原理详解
俗话说，条条大路通罗马。在现实生活中，我们可以采用很多方法实现同一个目标。比如我们先定个小目标，先挣它一个亿。我们可以根据具体的实际情况来完成这个目标。
策略模式的定义
定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。
举个例子：表单校验
在一个Web项目中，注册、登录等功能的实现都离不开表单提交。表单校验也是前端常常需要做的事。假设我们正在编写一个注册的页面，在点击提交按钮之前，有如下几条校验逻辑:
- 用户名不可为空，不允许以空白字符命名，用户名长度不能小于2位。
- 密码长度不能小于6位。
- 正确的手机号码格式。
也许，一开始我们会这么写：
<html>
<head>
<title>策略模式-校验表单</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<form id = "registerForm" method="post" action="http://xxxx.com/api/register">
用户名：<input type="text" name="userName">
密码：<input type="text" name="password">
手机号码：<input type="text" name="phoneNumber">
<button type="submit">提交</button>
</form>
<script type="text/javascript">
var registerForm = document.getElementById('registerForm');
registerForm.onsubmit = function() {
if (registerForm.userName.value === '') {
alert('用户名不可为空');
return false;
}
if (registerForm.userName.value === '') {
alert('用户名不可为空');
return false;
}
if (registerForm.userName.value.trim() === '') {
alert('用户名不允许以空白字符命名');
return false;
}
if (registerForm.userName.value.trim().length < 2) {
alert('用户名用户名长度不能小于2位');
return false;
}
if (registerForm.password.value.trim().length < 6) {
alert('密码长度不能小于6位');
return false;
}
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(registerForm.phoneNumber.value)) {
alert('请输入正确的手机号码格式');
return errorMsg;
}
}
</script>
</body>
</html>
这是一种很常见的编码方式，但它有很明显的缺点：
- registerForm.onsubmit 函数比较庞大，包含了很多if语句，这些语句要覆盖所有的校验规则。
- 若校验规则有变，不得不深入到registerForm.onsubmit 函数的内部实现，违反开放-封闭原则。
- 算法的复用性差。
下面，让我们来用策略模式重构表单校验
策略模式：表单校验
<html>
<head>
<title>策略模式-校验表单</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<form id = "registerForm" method="post" action="http://xxxx.com/api/register">
用户名：<input type="text" name="userName">
密码：<input type="text" name="password">
手机号码：<input type="text" name="phoneNumber">
<button type="submit">提交</button>
</form>
<script type="text/javascript">
// 策略对象
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;
}
}
</script>
</body>
</html>
策略模式优缺点
策略模式是一种常用且有效的设计模式。
- 策略模式可以有效避免多重条件选择语句。
- 策略模式提供了对开放-封装原则的完美支持，将方法封装在独立的strategy中，使得它们易于切换，易于理解，易于扩展。
- 复用性高。
当然，策略模式也有一些缺点
- 增加了许多策略类或者策略对象。
- 要使用策略模式，必须了解所有的strategy，违反了最少知识原则。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript设计模式之策略模式学习笔记
1. 理解javascript中的策略模式 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 使用策略模式的优点如下: 优点: 1. 策略模式利用组合,委托等技术和思想,有效的避免很多if条件语句. 2. 策略模式提供了开放-封闭原则,使代码更容易理解和扩展. 3. 策略模式中的代码可以复用. 一:使用策略模式计算奖金: 下面的demo是我在书上看到的,但是没有关系,我们只是来理解下策略模式的使用而已,我们可以使用策略模式来计算奖金问题: 比如公司的年终奖是根据
-
深入理解JavaScript系列（33）：设计模式之策略模式详解
介绍 策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化不会影响到使用算法的客户. 正文 在理解策略模式之前,我们先来一个例子,一般情况下,如果我们要做数据合法性验证,很多时候都是按照swith语句来判断,但是这就带来几个问题,首先如果增加需求的话,我们还要再次修改这段代码以增加逻辑,而且在进行单元测试的时候也会越来越复杂,代码如下: 复制代码 代码如下: validator = { validate: function (value, ty
-
JavaScript设计模式之策略模式详解
在程序设计中,我们也常常遇到这种情况,要实现某一个功能我们有很多种算法可以实现. 这些算法灵活多样,而且可以随意互相替换.这种解决方案就是所谓的策略模式. 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. /* * pre:策略模式 * 示例:公司计算奖金,分A.B.C 三种绩效,计算方式如下 * 绩效为A,奖金乘以系数5 * 绩效为B,奖金乘以系数4 * 绩效为C,奖金乘以系数3 */ //-------- 示例1 ---------- var calcula
-
javascript设计模式--策略模式之输入验证
策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化独立于使用算饭的客户. 先定义一个简单的输入表单: <!DOCTYPE html> <html> <head> <meta charset="utf-"> <style> .form{ width: px; height: px; #margin: px auto; } .form-item-label{ width:px; text-align:
-
JavaScript设计模式之策略模式实例
策略模式的意义是定义一系列的算法,把它们一个个封装起来,并且使它们可相互替换. 一个小例子就能让我们一目了然. 回忆下jquery里的animate方法. 复制代码 代码如下: $( div ).animate( {"left: 200px"}, 1000, 'linear' ); //匀速运动 $( div ).animate( {"left: 200px"}, 1000, 'cubic' ); //三次方的缓动 这2句代码都是让div在1000ms内往右移动
-
javascript设计模式 – 策略模式原理与用法实例分析
本文实例讲述了javascript设计模式 – 策略模式原理与用法.分享给大家供大家参考,具体如下: 介绍:策略模式中可以定义一些独立的类来封装不同的算法,每一个类封装一种具体的算法.在这里,每一种算法的封装都可以称之为一种策略.策略模式的主要目的是将算法的定义与使用分开. 定义:定义一系列算法类,将每一个算法封装起来,并让它们可以相互替换.策略模式让算法独立与使用它的客户而变化,也称为政策模式.策略模式是一种对象行为型模式. 场景:使用策略模式实现一个加减乘除的工具类,将四个算法进行封装. 示
-
学习JavaScript设计模式之策略模式
把不变的部分和变化的部分隔开是每个设计模式的主题. 条条大路通罗马.我们经常会遇到解决一件事情有多种方案,比如压缩文件,我们可以使用zip算法.也可以使用gzip算法.其灵活多样,我们可以采用策略模式解决. 一.定义 定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 基于策略类模式的程序至少由两部分组成.第一个部分是一组策略类,策略类封装了具体的算法,并负责具体的计算过程.第二个部分是环境类Context,Context接收客户的请求,随后把请求委托给某一个策略类. 二.示例 计
-
JS设计模式之策略模式概念与用法分析
本文实例讲述了JS设计模式之策略模式概念与用法.分享给大家供大家参考,具体如下: 策略模式的概念引用: 在软件开发中也常常遇到类似的情况,实现某一个功能有多种算法或者策略,我们可以根据环境或者条件的不同选择不同的算法或者策略来完成该功能. 如查找.排序等,一种常用的方法是硬编码(Hard Coding)在一个类中,如需要提供多种查找算法,可以将这些算法写到一个类中,在该类中提供多个方法,每一个方法对应一个具体的查找算法:当然也可以将这些查找算法封装在一个统一的方法中,通过if-else-或者ca
-
JavaScript设计模式之策略模式实现原理详解
俗话说,条条大路通罗马.在现实生活中,我们可以采用很多方法实现同一个目标.比如我们先定个小目标,先挣它一个亿.我们可以根据具体的实际情况来完成这个目标. 策略模式的定义 定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 举个例子:表单校验 在一个Web项目中,注册.登录等功能的实现都离不开表单提交.表单校验也是前端常常需要做的事.假设我们正在编写一个注册的页面,在点击提交按钮之前,有如下几条校验逻辑: 用户名不可为空,不允许以空白字符命名,用户名长度不能小于2位. 密码长度不能小
-
php设计模式之策略模式应用案例详解
本文实例讲述了php设计模式之策略模式应用.分享给大家供大家参考,具体如下: 策略模式 定义: 策略模式定义一系列的算法,将每个算法封装起来,并让它们可以相互装换.策略模式让算法独立于使用它的客户而独立变化. 角色分析: 抽象策略角色:策略类,通常由一个接口或者抽象类实现: 具体策略角色:包装了相关的算法和行为: 环境角色:持有一个策略类的引用,最终给客户端用. 应用场景: 多个类只区别在表现行为不同,可以使用策略模式,在运行的时动态选择具体要执行的行为. 需要在不同情况下使用不同的策略(算法)
-
从表单校验看JavaScript策略模式的使用详解
众所周知的是,表单确实在前端,唔,或者说在网页中占有不小的比重.事实上,几乎每一个中大型网站都会有"登录注册"以验证用户信息.防止一些不可名状的隐患... 那么表单的优劣就成了前端开发者急需解决的问题.其实我更愿意称为"代码的可读性"或"可复用性"以及"是否冗杂". 表单也有"优劣"?你在开玩笑嘛? 我想你可以认真看下下面的代码,它用到了一些"新知识": <form action=
-
java设计模式策略模式图文示例详解
目录 策略模式 意图 问题 解决方案 真实世界类比 策略模式结构 伪代码 策略模式适合应用场景 实现方式 策略模式优缺点 策略模式优缺点 与其他模式的关系 策略模式 亦称:Strategy 意图 策略模式是一种行为设计模式,它能让你定义一系列算法,并将每种算法分别放入独立的类中,以使算法的对象能够相互替换. 问题 一天,你打算为游客们创建一款导游程序.该程序的核心功能是提供美观的地图,以帮助用户在任何城市中快速定位. 用户期待的程序新功能是自动路线规划:他们希望输入地址后就能在地图上看到前往目的
-
JavaScript原型继承和原型链原理详解
这篇文章主要介绍了JavaScript原型继承和原型链原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在讨论原型继承之前,先回顾一下关于创建自定义类型的方式,这里推荐将构造函数和原型模式组合使用,通过构造函数来定义实例自己的属性,再通过原型来定义公共的方法和属性. 这样一来,每个实例都有自己的实例属性副本,又能共享同一个方法,这样的好处就是可以极大的节省内存空间.同时还可以向构造函数传递参数,十分的方便. 这里还要再讲一下两种特色的构造
-
Java设计模式之组合模式的示例详解
目录 定义 原理类图 案例 需求 方案 分析 总结 定义 组合模式,又叫部分整体模式,它创建了对象组的数据结构(将对象组合成树状结构,用来表示部分整体的层级关系)组合模式使得用户对单个对象和组合对象的访问具有一致性 原理类图 Component :这是组合模式中的抽象构件,他里面定义了所有类共有的默认行为,用来访问和管理Component的子部件,Component可以是抽象类,也可以是接口 leaf :在组合模式中表示叶子节点,叶子节点没有子节点了,他是最末端存放数据的结构 Composite
-
Java设计模式之状态模式State Pattern详解
目录 概述 UML类图 状态模式与策略模式 谁决定状态转换的流向 State是接口还是抽象类 应用案例分析 状态抽象类 可以抽奖的状态 奖品发放完毕状态 发放奖品的状态 不能抽奖状态 抽奖活动(Context) 测试状态模式 概述 状态模式允许对象在内部状态改变时改变它的行为,对象看起来好像修改了它的类.这个模式将状态封装成独立的类,并将动作委托到 代表当前状态的对象,我们知道行为会随着内部状态而改变. 一个对象“看起来好像修改了它的类”是什么意思呢?从客户的视角来看:如果说你使用的对象能够完全
-
Docker工作模式及原理详解
如下图所示: 我们在使用虚拟机和docker的时候,就会出现这样一个疑问:Docker为什么比VM虚拟机快呢? 上面这张图就很客观的说明了这个问题 1.Docker有着比虚拟机更少的抽象层. 2.Docker利用的是宿主机的内核,VM需要的是Guest os. 所以说,新建一个容器的时候,docker不需要像虚拟机一样重新加载一个操作系统.虚拟机是加载Guest os(花费时间分钟级别),而docker利用的是宿主机的操作系统,省略了这个复杂的过程(花费时间秒级别). 搞清楚这些,我们再来看看对
-
Java设计模式之建造者模式的示例详解
目录 定义 案例 需求 方案一 方案二 对比分析 总结 建造者模式的优势: 注意点 定义 建造者模式(Builder Pattern),又叫生成器模式,是一种对象构建模式 它可以将复杂对象的建造过程抽象出来,使这个抽象过程的不同实现方法可以构造出不同表现的对象.建造者模式是一步一步创建一个复杂的对象,它允许用户只通过指定复杂对象的类型和内容就可 以构建它们,用户不需要知道内部的具体构建细节. 案例 需求 女生每天化妆,假如只需要做发型,香水,衣服,并要求按照发型——>香水——>衣服的顺序进行,
-
Java设计模式之原型模式的示例详解
目录 定义 案例 需求 方案一 方案二 对比分析 总结 定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 即实现了一个原型接口,该接口用于创建当前对象的克隆,当直接创建对象的代价比较大时,则采用这种模式 案例 需求 张三要打印100000份照片 方案一 定义照片类 /** * 照片类 * @author:liyajie * @createTime:2022/2/15 11:47 * @version:1.0 */ @Data @AllArgsConstructor publi