javascript设计模式 ? 策略模式原理与用法实例分析


Posted in Javascript onApril 21, 2020

本文实例讲述了javascript设计模式 ? 策略模式原理与用法。分享给大家供大家参考,具体如下:

介绍:策略模式中可以定义一些独立的类来封装不同的算法,每一个类封装一种具体的算法。在这里,每一种算法的封装都可以称之为一种策略。策略模式的主要目的是将算法的定义与使用分开。

定义:定义一系列算法类,将每一个算法封装起来,并让它们可以相互替换。策略模式让算法独立与使用它的客户而变化,也称为政策模式。策略模式是一种对象行为型模式。

场景:使用策略模式实现一个加减乘除的工具类,将四个算法进行封装。

示例:

var AddStrategy = function(){
  this.caculate = function(num1, num2){
    return num1 + num2;
  }
}
 
var SubStrategy = function(){
  this.caculate = function(num1, num2){
    return num1 - num2;
  }
}
 
var MulStrategy = function(){
  this.caculate = function(num1, num2){
    return num1 * num2;
  }
}
 
var DivStrategy = function(){
  this.caculate = function(num1, num2){
    return num1 / num2;
  }
}
 
var Context = function(strategy){
  var _strategy = strategy;
 
  this.executeStrategy = function(num1, num2){
    return _strategy.caculate(num1, num2)
  }
}
var add = new Context(new AddStrategy());
var sub = new Context(new SubStrategy());
var mul = new Context(new MulStrategy());
var div = new Context(new DivStrategy());
 
console.log('1 + 2 = ' + add.executeStrategy(1, 2));
console.log('5 - 1 = ' + sub.executeStrategy(5, 1));
console.log('3 * 2 = ' + mul.executeStrategy(3, 2));
console.log('8 / 2 = ' + div.executeStrategy(8, 2));
 
// 1 + 2 = 3
// 5 - 1 = 4
// 3 * 2 = 6
// 8 / 2 = 4

在这个例子里,Context称之为环境类,环境类是使用算法的角色,他在解决某个问题时可以采用多种策略。我们的例子里,根据传递的策略不同,导致Context作出不同的处理方式。
DivStrategy,MulStrategy,SubStrategy,AddStrategy称为策略类,用来实现具体策略。

策略模式总结:

优点:

* 提供了开关原则的完美支持,可以再不修改原有系统基础上进行扩展
* 策略模式提供了一种可以替换继承关系的办法
* 使用策略模式可以避免多重条件选择语句。

缺点:

* 客户端必须知道所有的策略类,并自行选择需要使用哪一个策略
* 策略模式将造成系统产生很多策略类,任何细小的变化都导致系统需要新增一个新的策略类
* 客户端每次只能选择使用一个策略类

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 定义初始化数组函数
Sep 07 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 #Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 #Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 #Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 #Javascript
vue实现购物车功能(商品分类)
Apr 20 #Javascript
vue实现淘宝购物车功能
Apr 20 #Javascript
javascript利用键盘控制小方块的移动
Apr 20 #Javascript
You might like
php无限遍历目录示例
2014/02/21 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
验证码按回车不变解决方法
2013/03/29 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
js 调用百度分享功能
2017/02/27 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
Python数据结构之图的应用示例
2018/05/11 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
python for 循环获取index索引的方法
2019/02/01 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
python实现横向拼接图片
2020/03/23 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
自荐信怎么写好
2013/11/11 职场文书
百度吧主申请感言
2014/01/12 职场文书
初三毕业评语
2014/12/26 职场文书
九不准学习心得体会
2016/01/23 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript