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 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
JavaScipt基本教程之前言
Jan 16 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 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/07/04 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
Firefox window.close()的使用注意事项
2009/04/11 Javascript
JavaScript效率调优经验
2009/06/04 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
基于jQuery ligerUI实现分页样式
2016/09/18 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
Vue渲染函数详解
2017/09/15 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
js实现三角形粒子运动
2020/09/22 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
用Python的urllib库提交WEB表单
2009/02/24 Python
Python subprocess模块详细解读
2018/01/29 Python
python实现的生成word文档功能示例
2019/08/23 Python
关于numpy数组轴的使用详解
2019/12/05 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
python 负数取模运算实例
2020/06/03 Python
python性能测试工具locust的使用
2020/12/28 Python
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
自荐信如何制作?
2014/02/21 职场文书
明星员工获奖感言
2014/08/14 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
优秀大学生申请书
2019/06/24 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书