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 相关文章推荐
jquery 表单下所有元素的隐藏
Jul 25 Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
用js实现in_array的方法
Nov 05 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
ES6入门教程之let、const的使用方法
Apr 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 模板高级篇总结
2006/12/21 PHP
php中计算时间差的几种方法
2009/12/31 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
JavaScript 变量基础知识
2009/11/07 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
浅谈Node 调试工具入门教程
2018/03/20 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
Python单元和文档测试实例详解
2019/04/11 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
openCV提取图像中的矩形区域
2020/07/21 Python
五种Python转义表示法
2020/11/27 Python
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
生日派对邀请函
2014/01/13 职场文书
会计专业求职信范文
2015/03/19 职场文书
应聘教师求职信范文
2015/03/20 职场文书
肖申克的救赎观后感
2015/06/02 职场文书