策略模式代替if-else

鳕鱼&羚羊

已于 2022-07-14 23:59:11 修改

阅读量2.9k

点赞数 2

分类专栏： web前端学习之路文章标签： javascript 前端 react

于 2022-07-14 23:33:23 首次发布

本文链接：https://blog.csdn.net/Y1_1Y1_1y1_1y/article/details/125795059

版权

web前端学习之路专栏收录该内容

57 篇文章 1 订阅

订阅专栏

本文探讨了如何用策略模式代替传统的if-else或switch语句来提高代码可读性和可维护性，特别是在React应用中。通过创建一个键值对对象，可以更直观地映射不同键值到对应的组件，从而简化了代码结构。

摘要由CSDN通过智能技术生成

采用key-value的形式替换繁琐的if-else (高端大气上档次)

if-else或switch写法：

// if-else
const onTabChange = (key: string) => {
    if(key=="home") setTabContent(<Home />)
    else if(key=="search") setTabContent(<Search />)
    else if(key=="article") setTabContent(<Article />)
    else if(key=="video") setTabContent(<Video />)
  }

// switch
const onTabChange = (key: string) => {
	switch (key) {
	    case "home":
	        setTabContent(<Home />);
	        break;
	    case "search":
	        setTabContent(<Search />);
	        break;
   	    case "article":
	        setTabContent(<Article />);
	        break;
   	    case "video":
	        setTabContent(<Video />);
	        break;
	    default:
	    	return false;
	        break;
}

策略模式改造：

const onTabChange = (key: string) => {
    const tab = {
      "home": <Home />,
      "search": <Search />,
      "article": <Article />,
      "video": <Video />,
    }
    setTabContent(tab[key]);
  }