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));
}