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 相关文章推荐
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
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 session常见问题集锦及解决办法总结
2007/03/18 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
js判断是否是手机页面
2017/03/17 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
python在不同层级目录import模块的方法
2016/01/31 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
在双python下设置python3为默认的方法
2018/10/31 Python
python3.6数独问题的解决
2019/01/21 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
求职自荐信
2013/12/14 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
招标授权委托书样本
2014/09/23 职场文书
教师党员个人整改措施
2014/10/27 职场文书
锅炉工岗位职责
2015/02/13 职场文书
贫困证明书范文
2015/06/16 职场文书
运动会宣传语
2015/07/13 职场文书
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫