이번에는 Javascript의 Strategy Mode와 Javascript Strategy Mode의 Notes에 대해 소개해드리겠습니다.
전략 패턴은 일련의 알고리즘을 정의하고 각 알고리즘을 캡슐화하여 상호 교환 가능하게 만드는 것을 의미합니다. 전략 패턴을 사용하면 알고리즘을 사용하는 클라이언트와 독립적으로 알고리즘을 변경할 수 있습니다.
전략 패턴은 많은 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
Form
전략 패턴을 이해하는 또 다른 예는 Form 유효성 검사로, 이는 일반적으로 여러 필드 유효성 판단을 포함합니다.
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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 자바스크립트 전략 패턴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!