美文网首页
策略模式【javascript设计模式】

策略模式【javascript设计模式】

作者: 编码的哲哲 | 来源:发表于2017-05-11 23:16 被阅读45次

    胡居仁:苟有恒,何必三更眠、五更起;最无益,莫过一日曝、十日寒


    俗话说,条条大路通罗马,当我们想要成功完成一件事情时,预设出多种计划以应对环境改变是必须的,当真正去执行时,只需要根据当前的环境去选择一个提前制定好的计划即可。策略模式即是如此,用比较专业的术语定义则是:** 定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换 。**
    一起来看一个例子吧,出自《设计模式》

    很多公司的年终奖是根据员工的工资基数和年底绩效的情况来发放的。例如:绩效为S的人年终奖有4倍工资,绩效为A的人年终奖有3倍工资,而绩效为B的人年终奖有2倍工资,假设财务部要求我们提供一段代码,来方便它们计算员工的年终奖。

    我们可以不加思索的写下如下的代码:

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

    这段代码十分简单,但是存在着显而易见的缺点:

    • calculateBonus函数比较庞大,包含了许多 if 语句,这些语句需要覆盖所有的逻辑分支。
    • calculateBonus函数缺乏弹性,如果增加一种新的绩效等级C,或者想把绩效S的奖金系数改为5,那么我们必须深入calculateBonus函数的内部实现,这是违反开放-封闭原则的。
    • 算法的复用性差,如果在程序的其他地方需要重用这些计算奖金的算法呢?我们的选择只有复制和粘贴。

    所以我们需要重构这段代码,策略模式指的是定义一系列的算法,把它们一个个封装起来,将不变的部分和变化的部分隔开是每个设计模式的主题,策略模式也不例外,策略模式的目的就是将算法的使用和算法的实现分离开来,基于这个思想,我们将代码重构如下:

        var strategies = {
            "S": function (salary) {
                return salary * 4;
            },
            "A": function (salary) {
                return salary * 4;
            },
            "B": function (salary) {
                return salary * 4;
            }
        }
        var calculateBonus = function (level, salary) {
            return strategies[level](salary);
        }
        // 然后可以愉快的计算啦:
        console.log(calculateBonus('S', 20000));
        console.log(calculateBonus('A', 20000));
    

    这样子我们不仅可以复用算法,而且calculateBonus函数简洁易懂。


    再来看一个常见的例子:表单校验。假设我们正在编写一个注册的页面,在点击注册之前,有如下几条校验逻辑:

    • 用户名不能为空
    • 密码长度不能少于6位
    • 手机号码必须符合模式

    常见的代码是这样编写的:

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

    所以学校发生了些事情,观看了一下,耽误了总结,明天补上后续。。。

    相关文章

      网友评论

          本文标题:策略模式【javascript设计模式】

          本文链接:https://www.haomeiwen.com/subject/pgdatxtx.html