浅谈js中的策略模式

104 阅读1分钟

在开发过程中会经常遇到策略模式的场景,看如下代码

if (a === 0) {
    //doing...
} else if (a === 1) {
    //doing...
} else if (a === 2) {
    //doing...
} else if (a === 3) {
    //doing...
}...

那么如何优雅的利用策略模式实现,或许会有人想到

switch (a) {
    case 0:
        //doing...
        break;
    case 1:
        //doing...
        break;
    case 2:
        //doing...
        break;
    case 3:
        //doing...
        break;
    default:
        break;
}

但是觉得还是不够优雅,当条件过多or逻辑代码堆在一块,看起来也挺糟糕的,那么可以尝试这样

const A = () => {
    //doing...
};

const fun = {
    0: A,
    1: B,
    2: C,
    3: D,
}

//调用
fun[0]()

采用策略模式,把代码片段封装到函数里,又可能会有人提出多个条件判断例如:

if (a === 0 && b === 0) {
    //doing...
} else if (a === 1 && b === 1) {
    //doing...
} else if (a === 2) {
    //doing...
} else if (a === 3) {
    //doing...
}...

可以尝试去用map优雅的解决,然后拼接字段

const map = new Map([
    [
        "0_0", A,
    ],
    [
        "1_1", B,
    ]
]);

let a = 0,
    b = 0;
 
//调用
map.get(`${a}_${b}`)();

结尾处应该提到三目运算符,适用于并不复杂的场景

a > 0 ? b : c

优雅永不过时,到此浅谈结束,后续会更新进阶版