前端设计模式----策略模式

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写出来的代码，类似是遍历了，遍历会把里面的元素全都比较一遍，如果有成百上千个元素，效率就非常低，对于这种有规律的判断，还是建议使用策略模式进行书写，

另外关于策略模式，可以参考一下这篇文章：设计模式前端应用——策略模式