javascript 策略设计模式

简介: 什么是策略。策略就是根据形势的发展而制定的行动方针。比如说春节快要到了,我们要回家,回家我们就要选择交通工具。怎么回家我们就需要制定方案。比如说我吧,我们家在河南一个农村,不管是汽车,火车,飞机都没有直达的。

什么是策略。

策略就是根据形势的发展而制定的行动方针。

比如说春节快要到了,我们要回家,回家我们就要选择交通工具。怎么回家我们就需要制定方案。比如说我吧,我们家在河南一个农村,不管是汽车,火车,飞机都没有直达的。我可以选择从北京到郑州乘火车,然后从北京到长葛做长途汽车,然后从长葛到家做短途汽车。当然也可以选择其他方式,这就要根据自己的实际需要,时间不紧花费又低我一般就选择这个方案。

开发中的策略模式使用

策略模式定义:定义一系列的算法,然后把它们一个个的封装起来,这些封装起来的算法可以相互替换。

举一个年终奖金计算的例子,分为A,B,C,D四类,其中A类总经理,B类部门经理,C类项目负责人,D类开发人员。

一般情况,代码实现如下:

var calBonus = function (level, salary) {
    if( level === 'A') {
        return salary*2;
    }
    if( level === 'B') {
        return salary*1.5;
    }
    if( level === 'C') {
        return salary*1.0;
    }
    if( level === 'D') {
        return salary*0.75;
    }
}

这种代码的实现方式很常见,但是效果不是那么好,在这个函数体内一个条件就是一个算法策略,在实际开发中它们往往实现比较复杂,代码量比较大,一个两个没什么,如果再增加几个或者十几个呢,或者我们在增加100个呢?明显这种实现方式的弹性很差,复用性也比较差。

如果,代码体积较小,分支较少使用条件判断未尝不可,但是如果,条件分支较多且代码体积较大比建议。

组合函数实现重构

开发中我们往往会用的一种组合函数重构的方式来实现,代码修改如下:

function levelA (salary) {
    return salary*2;
}

function levelB (salary) {
    return salary*1.5;
}

function levelC (salary) {
    return salary*1.0;
}

function levelD (salary) {
    return salary*0.75;
}

var calBonus = function(leveType, salary) {
    if(levelType === 'A') {
        return leveA(salary);
    }
    
    if(levelType === 'B') {
        return leveB(salary);
    }

    if(levelType === 'C') {
        return leveC(salary);
    }

    if(levelType === 'D') {
        return leveD(salary);
    }
}

这样修改后的代码确实使用起来,比刚开始好了许多,但是这样的实现方式,还是弹性不足,如果扩展的话回事calBonus函数的体积越来越大。这时我们往往会考虑设计模式。

策略模式实现重构

首先,我们需要创建一个策略类组,然后在创建一个奖金类。具体代码实现如下:

// A类
function LevelA() {}

LevelA.prototype.cal = function(salary) {
    return salary*2;
}

// B类
function LevelB() {}

LevelB.prototype.cal = function(salary) {
    return salary*1.5;
}

// C类
function LevelC() {}

LevelC.prototype.cal = function(salary) {
    return salary*1;
}

// D类
function LevelD() {}

LevelD.prototype.cal = function(salary) {
    return salary*0.75;
}

// 定义一个奖金类
function Bonus () {
    this.strategy = null;
    this.salary = null;
}
// 奖金strategy
Bonus.prototype.setStrategy = function(strategy) {
    this.strategy = strategy;
}
// 设置salary
Bonus.prototype.setSalary = function(salary) {
    this.salary = salary;
}
// 获取奖金
Bonus.prototype.getBonus = function() {
    return this.strategy.cals(this.salary)
}

// A
var bonus = new Bonus();
bonus.setSalary(10000);
bonus(new LevelA());
bonus.getBonus()

// B
var bonus = new Bonus();
bonus.setSalary(8000);
bonus(new LevelB());
bonus.getBonus()

在javascript中,我们都知道,函数也是对象,所以更简单的方法就是将每一种策略定义成函数,而非上面的实现方式。

JavaScript策略模式

function levelA (salary) {
    return salary*2;
}

function levelB (salary) {
    return salary*1.5;
}

function levelC (salary) {
    return salary*1.0;
}

function levelD (salary) {
    return salary*0.75;
}

var Bonus = {
    levelA : levelA,
    levelB : levelB,
    levelC : levelC,
    levelD : levelD,
};

var calBonus = function(level, salary) {
    return Bonus[level](salary);
}

calBonus('levelA', 30000); // 60000

// 添加一个E类
var levelE = function (salary) {
    return salary*0.5;
}

Bonus.levelE = levelE;

calBonus('levelE', 5000); // 2500

这种实现方式,研究源码的同学经常遇到,在jQuery,validator等库和前端框架中比较常见。

设计模式相关文章

相关文章
|
1月前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
|
1月前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
30 2
|
2月前
|
设计模式 监控 算法
Java设计模式梳理:行为型模式(策略,观察者等)
本文详细介绍了Java设计模式中的行为型模式,包括策略模式、观察者模式、责任链模式、模板方法模式和状态模式。通过具体示例代码,深入浅出地讲解了每种模式的应用场景与实现方式。例如,策略模式通过定义一系列算法让客户端在运行时选择所需算法;观察者模式则让多个观察者对象同时监听某一个主题对象,实现松耦合的消息传递机制。此外,还探讨了这些模式与实际开发中的联系,帮助读者更好地理解和应用设计模式,提升代码质量。
Java设计模式梳理:行为型模式(策略,观察者等)
|
2月前
|
设计模式 JavaScript 前端开发
JavaScript设计模式--访问者模式
【10月更文挑战第1天】
39 3
|
3月前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
199 15
|
4月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
66 1
|
4月前
|
存储 缓存 JavaScript
深入Node.js身份验证:策略与实践
【8月更文挑战第20天】
57 4
|
4月前
|
JavaScript 安全 前端开发
Node.js身份验证全攻略:策略与实践,打造坚不可摧的Web应用安全防线!
【8月更文挑战第22天】Node.js作为强大的服务器端JavaScript平台,对于构建高效网络应用至关重要。本文探讨其身份验证策略,涵盖从基于token至复杂的OAuth 2.0及JWT。Passport.js作为认证中间件,支持本地账号验证及第三方服务如Google、Facebook登录。同时介绍JWT轻量级验证机制,确保数据安全传输。开发者可根据应用需求选择合适方案,注重安全性以保护用户数据。
94 1
|
4月前
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
|
5月前
|
缓存 JavaScript 前端开发
JavaScript框架中的性能优化策略
【7月更文挑战第27天】JavaScript框架中的性能优化是一个持续的过程,需要开发者在开发过程中不断关注和改进。通过代码优化、DOM操作优化、缓存机制、异步处理以及使用性能分析工具等策略,可以显著提升应用的性能,提升用户体验。在实际开发中,开发者应根据应用的具体需求和性能瓶颈选择合适的优化策略,以实现最佳的优化效果。

热门文章

最新文章