JavaScript 复杂判断的优雅写法

JavaScript 复杂判断的优雅写法

<div>
		<input type="button" name="btn" value="点我呀" id='btn'>
		<input type="button" name="upgBtn" value='升级版' id='upgBtn'>
		<input type="button" name="superBtn" value='超级版' id='superBtn'>
</div>

　　

<script type="text/javascript">
	/**
	 * 8种逻辑判断方法
	 * 1.if/else
	 * 2.switch
	 * 3.一元判断时：存到Object里
	 * 4.一元判断时：存到Map里
	 * 5.多元判断时：将condition拼接成字符串存到Object里
	 * 6.多元判断时：将condition拼接成字符串存到Map里
	 * 7.多元判断时：将condition存为Object存到Map里
	 * 8.多元判断时：将condition写作正则存到Map里
	 */
	var btn = document.getElementById("btn");
	btn.onclick = function(){
		btnClick(7)
	}

	var upgBtn = document.getElementById('upgBtn');
	upgBtn.onclick = function(){
		upgBtnClick(1,'guest');
	}

	var superBtn = document.getElementById('superBtn');
	superBtn.onclick = function(){
		superBthClick('guest',2);
	}

	/**
	 * 按扭点击事件
	 * @param{number} status 购买种类：1水果类 2食品类 3服妆类 4彩妆类
	 */

	const btnClick = (status)=>{
		if(status == 1){
			sendLog('您正在访问水果类....');
			jumpTo('fruitIndex');
		}else if(status == 2){
			sendLog('您正在访问食品类....');
			jumpTo('foodIndex');
		}else if(status == 3){
			sendLog('您正在访问服装类....');
			jumpTo('clothingIndex');
		}else if(status == 4){
			sendLog('您正在访问彩妆类....');
			jumpTo('makeupIndex');
		}else{
			sendLog('您访问的页面不存在....');
			jumpTo('Pages do not exist');
		}
	}

	const btnClick = (status)=>{
		switch(status){
			case 1:
				sendLog('您正在访问水果类....');
				jumpTo('fruitIndex');
				break;
			case 2:
				sendLog('您正在访问食品类....');
				jumpTo('foodIndex');
				break;
			case 3:
				sendLog('您正在访问服装类....');
				jumpTo('clothingIndex');
				break;
			case 4:
				sendLog('您正在访问彩妆类....');
				jumpTo('makeupIndex');
				break;
			default:
				sendLog('您访问的页面不存在....');
				jumpTo('Pages do not exist');
				break;
		}
	}

	//通过对象属性查找的方式来进行逻辑判断，这种写法特别适合一元条件判断的情况
	const actions = {
		'1':['您正在访问水果类....','fruitIndex'],
		'2':['您正在访问食品类....','foodIndex'],
		'3':['您正在访问服装类....','clothingIndex'],
		'4':['您正在访问彩妆类....','makeupIndex'],
		'default':['您访问的页面不存在....','Pages do not exist'],
	}
	const btnClick = function(status){
		let action = actions[status] || actions['default'],
			logName = action[0],
			page = action[1];
		sendLog(logName);
		jumpTo(page);
	}

	/**
	 * 通过es6里的Map对象
	 * @type {Map}
	 * 1、一个对象通常都有自己的原型，所以一个对象总有一个'prototype'键。
	 * 2、一个对象的键只能是字符串或者Symbols，但是一个Map的键可以是任意值。
	 * 3、你可以通过size属性很容易地得到Map的键值对个数，而对象的键值对个数只能手动确认。
	 */
	const actions = new Map([
		[1,['您正在访问水果类....','fruitIndex']],
		[2,['您正在访问食品类....','foodIndex']],
		[3,['您正在访问服装类....','clothingIndex']],
		[4,['您正在访问彩妆类....','makeupIndex']],
		['default',['您访问的页面不存在....','failPage']]
	])

	const btnClick = (status)=>{
		let action = actions.get(status) || actions.get('default');
		sendLog(action[0]);
		jumpTo(action[1]);
	}
	function sendLog(content){
		console.log(content);
	}
	function jumpTo(page){
		console.log(page);
	}

	/**
	 * 当当当当，升级版的判断来了
	 */
	const upgActions = new Map([
		['guest_1',()=>{console.log('guest_1')}],
		['guest_2',()=>{console.log('guest_2')}],
		['admin_1',()=>{console.log('admin_1')}],
		['default',()=>{console.log('default')}]
	])
	const upgBtnClick = (status,indentity)=>{
		let action = upgActions.get(`${indentity}_${status}`) || upgActions.get('default');
		action.call(this);
	}

	用Object实现
	const upgActions = {
		'guest_1':()=>{console.log('guest_1')},
		'guest_2':()=>{console.log('guest_2')},
		'admin_1':()=>{console.log('admin_1')},
		'default':()=>{console.log('default')}
	}

	const upgBtnClick = (status, indentity) => {
		let action = upgActions[`${indentity}_${status}`] || upgActions['default'];
		action.call(this);
	}

	const upgActions = new Map([
		[{indentity:'guest',status:1},()=>{console.log('guest_1')}],
		[{indentity:'guest',status:2},()=>{console.log('guest_2')}]
	])

	const upgBtnClick = (status, indentity)=>{
		let action = [...upgActions].filter(([key,value])=>(key.indentity == indentity && key.status == status))
		action.forEach(([key,value])=>value.call(this))
	}

	//凡是guest都要发送一个日志埋点，不同的status情况也需要单独逻辑处理
	const superActions=()=>{
		const functionA = ()=>console.log("functionA");
		const functionB = ()=>console.log("functionB");
		const functionC = ()=>console.log("functionC");
		return new Map([
			[/^guest_[1-4]$/,functionA],
			[/^guest_5$/,functionB],
			[/^guest_.*$/,functionC]
		])
	}

	const superBthClick = (indentity,status)=>{
		console.log(status)
		let action = [...superActions()].filter(([key,value])=>(key.test(`${indentity}_${status}`)));
		action.forEach(([key, value])=>value.call(this));
	}