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 相关文章推荐
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
js获取事件源及触发该事件的对象
Oct 24 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
js实现时钟定时器
Mar 26 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
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
如何分别全角和半角以避免乱码
2006/10/09 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
七年级英语教学反思
2014/01/15 职场文书
采购经理岗位职责
2014/02/16 职场文书
学校食品安全实施方案
2014/06/14 职场文书
军事博物馆观后感
2015/06/05 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
《司马光》教学反思
2016/02/22 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python