首页 > js教程 > 正文

Javascript的策略模式

原创 2018-03-13 17:44:11 0 31
赞助会员专享特权
这次给大家带来Javascript策略模式,Javascript策略模式的注意事项有哪些,下面就是实战案例,一起来看一下。

策略模式是指对一系列的算法定义,并将每一个算法封装起来,而且使它们还可以相互替换。策略模式让算法独立于使用它的客户而独立变化。

策略模式利用组合、委托等技术和思想,可以避免很多if条件语句

策略模式提供了开放-封闭原则,使代码更容易理解和拓展

简单取值

很多例子�以绩效等级和薪资计算奖金为�说明

let calculateBouns = (level,salary)=>{    if(level=='A'){        return salary * 1.4;
    }else if(level=='B'){        return salary * 1.3;
    }else if(level=='C'){        return salary * 1.2;
    }else{        return salary;
    }
}console.log(calculateBouns('A', 8000)); //11200console.log(calculateBouns('C', 8000)); //9600

策略模式重构

//策略对象class ruleA{    calculate(salary){        return salary * 1.4;    }} class ruleB{    calculate(salary){        return salary * 1.3;    }} class ruleC{    calculate(salary){        return salary * 1.2;    }} //奖金类class Bouns{    constructor(){        this.salary = null;        this.level = null;    }    setLevel(level){        this.level = level;    }    setSalary(salary){        this.salary = salary;    }    getBouns(){        return this.level.calculate(this.salary);    }}let tom = new Bouns(),jerry = new Bouns();//设置薪资tom.setSalary(8000);jerry.setSalary(10000);//设置策略对象tom.setLevel(new ruleA());jerry.setLevel(new ruleA());console.log(tom.getBouns()); //11200console.log(jerry.getBouns()); //14000jerry.setLevel(new ruleB());console.log(jerry.getBouns()); //13000

表单

还有一种�理解策略模式的例子就是表单验证,通常会涉及到多个字段有效性判断

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

这样实现的代码的缺点:

函数体积臃肿,包含了很多if判断

函数缺乏弹性,违反了开放-封闭原则

函数复用性差,如果增加表单需要类似验证,只能复制一遍

策略模式实现表单验证

// 策略对象let strategys = {    isEmpty: (value,errorMsg)=> {        if(value === '') {            return errorMsg;
        }
    },    // 限制最小长度
    minLength: (value,length,errorMsg)=> {        if(value.length < length) {            return errorMsg;
        }
    },    // 手机号码格式
    illegalPhone: (value,errorMsg)=> {        if(!/(^1[3|5|8][0-9]{9}$)/.test(value)) {            return errorMsg;
        }
    } 
};class Validator{    constructor(){        this.cache = []; //保存校验规则
    }
    addRule(dom,rules){        var self = this;        for(let i = 0, rule; rule = rules[i++]; ){            let strategyAry = rule.strategy.split(":");            let errorMsg = rule.errorMsg;
            self.cache.push(function(){                let strategy = strategyAry.shift();
                strategyAry.unshift(dom.value);
                strategyAry.push(errorMsg);                return strategys[strategy].apply(dom,strategyAry);
            });
        }
    }
    check(){        for(let i = 0, fn; fn = this.cache[i++]; ) {            let msg = fn(); // 开始效验 并取得效验后的返回信息
            if(msg) {                return msg;
            }
        }
    }
}// 代码调用let form = document.getElementById("Form");let validateFunc = function(){    let validator = new Validator(); // 实例化Validator
    //添加一些校验规则
    validator.addRule(form.username,[
        {strategy: 'isEmpty',errorMsg:'用户名不能为空'},
        {strategy: 'minLength:6',errorMsg:'用户名长度不能小于6位'}
    ]);
    validator.addRule(form.password,[
        {strategy: 'minLength:6',errorMsg:'密码长度不能小于6位'},
    ]);
    validator.addRule(form.phone,[
        {strategy: 'illegalPhone',errorMsg:'手机号格式不正确'},
    ]);    return  validator.check();
};
form.onsubmit = function(){    let errorMsg = validateFunc();    if(errorMsg){
        alert(errorMsg);        return false;
    }else{
        submit();
    }
}

策略模式属于对象行为模式,主要针对一组算法,将每一个算法封装到具有共同接口的独立的类中,使得它们可以相互替换。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

关于JS继承的详解

node的文件批量重命名

以上就是Javascript的策略模式的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:Javascript js 策略
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 原生javascript实现分享到朋友圈功能 支持ios和android_javascript技巧
  • jQuery链式调用与show知识浅析_jquery
  • JS实现登录页面记住密码和enter键登录方法推荐_javascript技巧
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】_javascript技巧
  • Javascript的策略模式
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节