tab切换跳转到不同的页面,根据路由跳转,
之前写的代码,用到了很多if-else if,代码如下:
state = {
tabArr: [
{
name: '企业信息管理',
id: '1',
},
{
name: '配置通知模版',
id: '2',
},
{
name: '激励对象管理',
id: '3',
},
{
name: '激励计划管理',
id: '4',
},
],
activeKey: '1',
};
onChange = (activeKey) => {
if(activeKey === '1') {
createTab({
id:'enterprise',
router:'/iso-fe/enterprise',
title:'企业信息管理'
})
}else if(activeKey === '2') {
createTab({
id:'noticetemplate',
router:'/iso-fe/noticetemplate',
title:'配置通知模版'
})
}else if(activeKey === '3') {
createTab({
id:'inceobj',
router:'/iso-fe/inceobj',
title:'激励对象管理'
})
}else if(activeKey === '4') {
createTab({
id:'inceplan',
router:'/iso-fe/inceplan1',
title:'激励计划管理'
})
}
};
用到策略模式之后是这样子的,
const incePlanTabRoute = {
'1': {
route:'enterprise',
name:'企业信息管理'
},
'2': {
route:'noticetemplate1',
name:'配置通知模版'
},
'3': {
route:'inceobj',
name:'激励对象管理'
},
'4': {
route:'inceplan',
name:'激励计划管理'
}
}
state = {
tabArr: [
{
name: '企业信息管理',
id: '1',
},
{
name: '配置通知模版',
id: '2',
},
{
name: '激励对象管理',
id: '3',
},
{
name: '激励计划管理',
id: '4',
},
],
activeKey: '1',
};
onChange = (activeKey) => {
createTab({
id:incePlanTabRoute[activeKey]['route'],
router:`/iso-fe/${incePlanTabRoute[activeKey]['route']}`,
title:incePlanTabRoute[activeKey]['name']
})
};
我们分析一下这两种不同的写法,从代码量上来说,使用策略模式写出来的代码要简便很多,从算法的角度来说,使用策略模式写出来的代码效率更高,因为第一种if else-if写出来的代码,类似是遍历了,遍历会把里面的元素全都比较一遍,如果有成百上千个元素,效率就非常低,对于这种有规律的判断,还是建议使用策略模式进行书写,
另外关于策略模式,可以参考一下这篇文章:设计模式前端应用——策略模式