设计模式之策略模式优化switch/if

1-策略模式的意义以及优缺点？
主要解决：在有多种算法相似的情况下，使用 if…else 所带来的复杂和难以维护。
如何解决：将这些算法封装成一个一个的类，任意地替换。
关键代码：实现同一个接口。
优点： 1、算法可以自由切换。 2、避免使用多重条件判断。 3、扩展性良好。
缺点： 1、策略类会增多。 2、所有策略类都需要对外暴露。

2-什么场景需要优化if或者switch？
1)当碰到你需要传不同的type类型来调用同一个接口，返回不同的数据时，你可能会优先想到if，
如下

let type = 1, obj = {startTime: '2021-6-5', endTime: '2021-6-5'};

    if (type === 1) {
        asyncRequest(1, id, ...obj);
    } else if (type === 2) {
        asyncRequest(2, id, ...obj);
    } else if (type === 3) {
        asyncRequest(3, id, ...obj);
    }

2）然后别人说全是if/else太low，又可能想到switch，结构更清晰，如下

switch (type) {
        case 1:
            asyncRequest(1, id, ...obj);
            break;
        case 2:
            asyncRequest(2, id, ...obj);
            break;
        default:
            break;
    }

3）如果type很多，那么就会出现很多判断，看起来还是有很多重复代码，只是type不同，其他全一样，这时就可以用策略模式来进行优化，如下

 /*
    * 一般用于传不同的type来调用一个方法的场景需求
    * */
    function sonData(id, str) {
        return {
            id,
            name: 'dqw',
            val: 232,
            str
        }
    }
 let typeObj = {
        1: sonData(1, '第一'),
        2: sonData(2, '第二'),
        3: sonData(3, '第三'),
        4: sonData(4, '第四')
    };
    const asyncRequest = ({type, id = 1}) => {
        if (typeObj[type]) {
            let res = typeObj[type];
            console.log(res);
        }
    };
    btn.addEventListener('click', () => {
        asyncRequest({type: 1, id: 1})
    }, false);

当我们传1时，

当我们传4时，

这样，就完全解决了大量if或者switch的重复代码

3-如果是根据type调用不同的方法，如下

首先定义方法
/*
    * 定义对象调用不同的方法
    * */
    function adds() {
        return 'adddqwqw'
    }

    function deletes() {
        return 'deletedqwqw'
    }

    function puts() {
        return 'put111'
    }

    function review() {
        return {total: 1, data: [1, 2, 3]}
    }

然后挂载到一个对象上
 let typeObj = { // 第一种，后面加()，调用的地方不加()
        1: adds(),
        2: deletes(),
        3: puts(),
        4: review()
    };

然后调用
const asyncRequest = ({type, id = 1}) => {
        if (typeObj[type]) {
            let res = typeObj[type]; // 第一种方式
            // let res = typeObj[type](); // 第二种方式
            console.log(res);
        }
    };
    btn.addEventListener('click', () => {
        asyncRequest({type: 4, id: 1})
    }, false);

然后返回如下

具体效果可以自己复制代码体验，自此优化完毕