JS设计模式之策略模式概念与用法分析

 更新时间:2018年02月05日 08:55:06   作者:itpinpai  
这篇文章主要介绍了JS设计模式之策略模式概念与用法,简单分析了策略模式的基本概念、原理并结合实例形式分析了javascript实现与使用策略模式的相关操作技巧,需要的朋友可以参考下

本文实例讲述了JS设计模式之策略模式概念与用法。分享给大家供大家参考,具体如下:

策略模式的概念引用:

在软件开发中也常常遇到类似的情况,实现某一个功能有多种算法或者策略,我们可以根据环境或者条件的不同选择不同的算法或者策略来完成该功能。

如查找、排序等,一种常用的方法是硬编码(Hard Coding)在一个类中,如需要提供多种查找算法,可以将这些算法写到一个类中,在该类中提供多个方法,每一个方法对应一个具体的查找算法;当然也可以将这些查找算法封装在一个统一的方法中,通过if…else…或者case等条件判断语句来进行选择。

这两种实现方法我们都可以称之为硬编码,如果需要增加一种新的查找算法,需要修改封装算法类的源代码;更换查找算法,也需要修改客户端调用代码。

在这个算法类中封装了大量查找算法,该类代码将较复杂,维护较为困难。如果我们将这些策略包含在客户端,这种做法更不可取,将导致客户端程序庞大而且难以维护,如果存在大量可供选择的算法时问题将变得更加严重.

举例说明:

一、出行旅游:我们可以有几个策略可以考虑:可以骑自行车,汽车,做火车,飞机。每个策略都可以得到相同的结果,但是它们使用了不同的资源。

选择策略的依据是费用,时间,使用工具还有每种方式的方便程度 。

二、在一个购物商城,在五一做了一个活动,所以图书类商品根据购买的金额做出以下折扣策略

1、购买满199元,打9折
2、购买满399元,打8折
3、购买满599元以上,打7折;

function BookStrategy() {
 this.calcPrice = function( price ) {
 console.log("未打折 = " + price);
 }
}
function BookCalc9Strategy() {
 this.calcPrice = function( price ) {
 console.log("原价是:"+ price +";打9折后:" + (price * 0.9));
 }
}
function BookCalc8Strategy() {
 this.calcPrice = function( price ) {
 console.log("原价是:"+ price +";打8折后:" + (price * 0.8));
 }
}
function BookCalc7Strategy() {
 this.calcPrice = function( price ) {
 console.log("原价是:"+ price +";打7折后:" + (price * 0.7));
 }
}
function PriceCalc( _strategy ) {
 this.strategy = _strategy;
 this.getPrice = function( price ) {
 return this.strategy.calcPrice( price );
 }
}
function Client() {
 var price = 100;
 var priceCalc = null;
 if ( 199 <= price && price < 399 ) {
 priceCalc = new PriceCalc(new BookCalc9Strategy());
 } else if ( 399 <= price && price < 599 ) {
 priceCalc = new PriceCalc(new BookCalc8Strategy());
 } else if ( 599 <= price ) {
 priceCalc = new PriceCalc(new BookCalc7Strategy());
 } else {
 priceCalc = new PriceCalc(new BookStrategy());
 }
 priceCalc.getPrice(price);
}
Client();

运行结果:

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

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

相关文章

  • JS实现关闭小广告特效

    JS实现关闭小广告特效

    这篇文章主要为大家详细介绍了JS实现关闭小广告特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • axios学习教程全攻略

    axios学习教程全攻略

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,下面这篇文章主要给大家介绍了axios学习教程的相关资料,文中介绍的非常详细,对大家具有一定的参考价值,需要的朋友下面来一起看看吧。
    2017-03-03
  • javascript编程开发中取色器及封装$函数用法示例

    javascript编程开发中取色器及封装$函数用法示例

    这篇文章主要介绍了javascript编程开发中取色器及封装$函数,结合实例形式分析了javascript封装$函数及数值运算、页面元素动态操作实现取色器功能相关技巧,需要的朋友可以参考下
    2017-08-08
  • 基于JS实现Android,iOS一个手势动画效果

    基于JS实现Android,iOS一个手势动画效果

    这篇文章主要介绍了基于JS实现Android,iOS一个手势动画效果 的相关资料,需要的朋友可以参考下
    2016-04-04
  • 设置点击文本框或图片弹出日历控件的实现代码

    设置点击文本框或图片弹出日历控件的实现代码

    下面小编就为大家带来一篇设置点击文本框或图片弹出日历控件的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
    2016-05-05
  • 微信小程序-滚动消息通知的实例代码

    微信小程序-滚动消息通知的实例代码

    本篇文章主要介绍了微信小程序-滚动消息通知的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • javascript分页代码(当前页码居中)

    javascript分页代码(当前页码居中)

    昨天看了妙味课堂的 分页视频教程,今天自己参照其思路,自己写了下,并且自己新增了一个显示页码个数的属性 showPageNum
    2012-09-09
  • layui 富文本编辑器和textarea值的相互传递方法

    layui 富文本编辑器和textarea值的相互传递方法

    今天小编就为大家分享一篇layui 富文本编辑器和textarea值的相互传递方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 文本框只能输入数字的js代码(含小数点)

    文本框只能输入数字的js代码(含小数点)

    下面小编就为大家带来一篇文本框只能输入数字的js代码(含小数点)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JS实现的进制转换,浮点数相加,数字判断操作示例

    JS实现的进制转换,浮点数相加,数字判断操作示例

    这篇文章主要介绍了JS实现的进制转换,浮点数相加,数字判断操作,结合实例形式分析了JavaScript数值运算、判断相关操作技巧,需要的朋友可以参考下
    2019-11-11

最新评论