设计模式之策略模式

开心就是最好

已于 2023-05-27 15:58:12 修改

阅读量150

点赞数

分类专栏： JS 文章标签： javascript 设计模式 Powered by 金山文档

于 2023-03-12 16:11:36 首次发布

本文链接：https://blog.csdn.net/u010678947/article/details/129477056

版权

JS 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

参考资料

曾探《JavaScript设计模式与开发实践》；

JavaScript 设计模式之策略模式

定义

定义一系列的算法，把他们一个个封装起来，并且使它们可以相互替换。封装算法、封装“业务规则”。

在函数作为一等对象的语言中，策略模式是隐形的。strategy就是作为函数的变量。在JavaScript中，除了使用类来封装算法和行为之外，使用函数当然也是一种选择。这些“算法”可以被封装在函数中并且四处传递，也就是我们常说的“高阶函数”。

使用场景：

计算奖金；

动画；

校验用户输入的数据，比如async-validator；

计算奖金

使用策略模式前：

    var calculateBonus = function( performanceLevel, salary ){
        if ( performanceLevel === 'S' ){
            return salary * 4;
        }
        if ( performanceLevel === 'A' ){
            return salary * 3;
        }
        if ( performanceLevel === 'B' ){
            return salary * 2;
        }
    };

    calculateBonus( 'B', 20000 ); // 输出：40000
    calculateBonus( 'S', 6000 ); // 输出：24000

使用策略模式重构代码：

面向对象版本的策略模式：

    var performanceS = function(){};
    performanceS.prototype.calculate = function( salary ){
        return salary * 4;
    };
    var performanceA = function(){};
    performanceA.prototype.calculate = function( salary ){
        return salary * 3;
    };
    var performanceB = function(){};
    performanceB.prototype.calculate = function( salary ){
        return salary * 2;
    };

    //接下来定义奖金类Bonus：

    var Bonus = function(){
        this.salary = null; // 原始工资
        this.strategy = null; // 绩效等级对应的策略对象
    };
    Bonus.prototype.setSalary = function( salary ){
        this.salary = salary; // 设置员工的原始工资
    };
    Bonus.prototype.setStrategy = function( strategy ){
        this.strategy = strategy; // 设置员工绩效等级对应的策略对象
    };
    Bonus.prototype.getBonus = function(){ // 取得奖金数额
        return this.strategy.calculate( this.salary ); // 把计算奖金的操作委托给对应的策略对象
    };

    var bonus = new Bonus();
    bonus.setSalary( 10000 );

    bonus.setStrategy( new performanceS() ); // 设置策略对象
    console.log( bonus.getBonus() ); // 输出：40000
    bonus.setStrategy( new performanceA() ); // 设置策略对象
    console.log( bonus.getBonus() ); // 输出：30000

JavaScript版本的策略模式：

    var strategies = {
        "S": function( salary ){
            return salary * 4;
        },
        "A": function( salary ){
            return salary * 3;
        },
        "B": function( salary ){
            return salary * 2;

        }
    };
    var calculateBonus = function( level, salary ){
        return strategies[ level ]( salary );
    };

    console.log( calculateBonus( 'S', 20000 ) ); // 输出：80000
    console.log( calculateBonus( 'A', 10000 ) ); // 输出：30000

表单验证

使用策略模式前：

var registerForm = document.getElementById( 'registerForm' );
    registerForm.onsubmit = function(){
        if ( registerForm.userName.value === '' ){
            alert ( '用户名不能为空' );
            return false;
        }
        if ( registerForm.password.value.length < 6 ){
            alert ( '密码长度不能少于6 位' );
            return false;
        }
        if ( !/(^1[3|5|8][0-9]{9}$)/.test( registerForm.phoneNumber.value ) ){
            alert ( '手机号码格式不正确' );
            return false;
        }
    }

使用策略模式重构：

        /***********************策略对象**************************/
        var strategies = {
            isNonEmpty: function( value, errorMsg ){
                if ( value === '' ){
                    return errorMsg;
                }
            },
            minLength: function( value, length, errorMsg ){
                if ( value.length < length ){
                    return errorMsg;
                }
            },
            isMobile: function( value, errorMsg ){
                if ( !/(^1[3|5|8][0-9]{9}$)/.test( value ) ){
                    return errorMsg;
                }
            }
        };
        /***********************Validator 类**************************/
        var Validator = function(){
            this.cache = [];
        };
        Validator.prototype.add = function( dom, rules ){
            var self = this;
            for ( var i = 0, rule; rule = rules[ i++ ]; ){
                (function( rule ){
                    var strategyAry = rule.strategy.split( ':' );
                    var errorMsg = rule.errorMsg;
                    self.cache.push(function(){
                        var strategy = strategyAry.shift();
                        strategyAry.unshift( dom.value );
                        strategyAry.push( errorMsg );
                        return strategies[ strategy ].apply( dom, strategyAry );
                    });
                })( rule )
            }
        };
        Validator.prototype.start = function(){
            for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){
                var errorMsg = validatorFunc();
                if ( errorMsg ){
                    return errorMsg;
                }
            }
        };
        /***********************客户调用代码**************************/
        var registerForm = document.getElementById( 'registerForm' );
        var validataFunc = function(){
            var validator = new Validator();
            validator.add( registerForm.userName, [{
                strategy: 'isNonEmpty',
                errorMsg: '用户名不能为空'
            }, {
                strategy: 'minLength:6',
                errorMsg: '用户名长度不能小于10 位'
            }]);
            validator.add( registerForm.password, [{
                strategy: 'minLength:6',
                errorMsg: '密码长度不能小于6 位'
            }]);
            var errorMsg = validator.start();
            return errorMsg;
        }
        registerForm.onsubmit = function(){
            var errorMsg = validataFunc();
            if ( errorMsg ){
                alert ( errorMsg );
                return false;
            }
        };