javascript 策略设计模式

什么是策略。

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

好比说春节快要到了,咱们要回家,回家咱们就要选择交通工具。怎么回家咱们就须要制定方案。好比说我吧,咱们家在河南一个农村,无论是汽车,火车,飞机都没有直达的。我能够选择从北京到郑州乘火车,而后从北京到长葛作长途汽车,而后从长葛到家作短途汽车。固然也能够选择其余方式,这就要根据本身的实际须要,时间不紧花费又低我通常就选择这个方案。前端

开发中的策略模式使用

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

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

通常状况,代码实现以下:github

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等库和前端框架中比较常见。

设计模式相关文章

相关文章
相关标签/搜索