【デザインモードシリーズ】の【ポリシーモード】

19548 ワード

デザインモード

前書き:コードのレベルを上げるには、デザインモードを避けられません.前にもいくつかの理解がありましたが、深く勉強していません.最近はシステムの勉強をして、デザインを高めて、結合する能力を高めて、いい本を見つけました.
ポリシーモード

定義と紹介

JavaScriptにおけるポリシーモード

ポリシーモードの例

定義と紹介
単一の例のパターンの定義:一連のアルゴリズムを定義し、それらを一つずつカプセル化し、それらを相互に置き換えることができる.
戦略モデルは最も身近なデザインモデルです.これまで学んだことがなくても、多くのコードの中で知らず知らずのうちに簡単な戦略モデルを使っています.
JavaScriptにおけるポリシーモードJavaScriptでは、関数も対象であり、最も直接的な方法は、ポリシーを直接関数として定義することである.

//                ：
//       ，      ，             
const strategies = {
	S: function(salary) {
		return salary * 4;
	},
	A: function(salary) {
		return salary * 3;
	},
	B: function(salary) {
		return salary * 2;
	}
}

const calculateBouns = function(level, salary) {
	return strategies[level](salary);
}

calculateBouns(S, 10000);

上のやり方は勉強する必要がないです.私たちは日常のコードの中で自発的にこのように使うかもしれません.この例だけにとって、もっと簡潔にもなります.もちろんこのようにすれば良いのか悪いのか、実際の状況によっては次のように決定できます.

const strategies = {
	S: 4,
	A: 3,
	B: 2,
}

const calculateBouns = function(level, salary) {
	return strategies[level] * salary;
}

calculateBouns(A, 20000);

ポリシーモードの例
私たちは一般的なフォーム検証の需要があります.これらの検査規則が便利に代替と組み合わせて使用され、後期の需要変更を防ぐことができることを期待しています.


//     
<html>
	<body>
		<form action='xxx' id='registerForm' method="POST">
			      ：<input type='text' name='userName' />
			     ：<input type='text' name='password' />
			      ：<input type='text' name='mobile' />
		</form>
	</body>
<html>

// js
/*******      ********/
const strategies = {
	isNotEmpty: function(val, errMsg) {
		if(val === '') {
			return errMsg
		}
	},
	minLength: function(val, minLen, errMsg) {
		if(val.length < minLen) {
			return errMsg
		}
	},
	isMobile: function(val, errMsg) {
		if(!/(^1[3|5|8][0-9]{9}$)/.test(val)) {
			return errMsg
		}
	}
}
/******* Validator   ********/
class Validator {
	constructor() {
		this.cache = [];
	}
	add(dom, rules) {
		rules.forEach(rule => {
			const strategyArr = rule.strategy.aplit(':');
			const errMsg = rule.errMsg;
			// catch         
			this.catch.push(function() {
				//            
				//   minLen: 6，      6 
				const strategy = strategyArr.shift();
				//                 
				strategyArr.unshift(dom.value);
				//               
				strategyArr.push(errMsg);
				//        ，  apply dom   ，      strategyArr
				return strategies[strategy].apply(dom, strategyArr);
			})
		})
	}
	start() {
		this.cacht.forEach(validatorFunc => {
			const errMsg = validatorFunc();
			if (errMsg) {
				return errMsg;
			}
		})
	}
}
/*******      ********/
const registerForm = document.getElementById('registerForm');

const validataFunc = function() {
	const validator = new Validator();
	//           
	validator.add(registerForm.userName, [{
		strategy: 'isNotEmpty'，
		errMsg: '       ',
	}, {
		strategy: 'minLen: 10'，
		errMsg: '         10 ',
	}]);
	validator.add(registerForm.password, [{
		strategy: 'minLen: 6'，
		errMsg: '         6 ',
	}]);
	validator.add(registerForm.mobile, [{
		strategy: 'isMobile'，
		errMsg: '         ',
	}]);
	//         
	const errMsg = validator.start();
	return errMsg;
}

registerForm.onsubmit = function() {
	const errMsg = validataFunc();
	if(errMsg) {
		alert(errMsg)；
		return
	}
	// do submit
}

leetcode--67--バイナリの合計