动态添加案例到开关

Question

我需要动态地将案例添加到开关中。我希望用户能够添加项目，并且每个项目都需要它自己的开关盒。

Answer 1

您可以使用带有回调函数的对象来代替：

//You can have initial cases
var callbacks = {
   'something': [() => 42]
};

// and you can create a new entry with this function
function add(_case, fn) {
   callbacks[_case] = callbacks[_case] || [];
   callbacks[_case].push(fn);
}

// this function work like switch(value)
//To make the name shorter you can name it `cond` (like in Scheme)
function pseudoSwitch(value) {
   if (callbacks[value]) {
      callbacks[value].forEach(function(fn) {
          fn();
      });
   }
}

您可以使用以下方法添加新条目：

add('something', function() {
   // case for something
});

注意：

您还可以修改它，使其工作方式与原始开关略有不同，因为您可以有一个返回值的函数并使用类似开关的表达式（就像在Scheme中，其中所有内容都是返回值的表达式）：

const value = cond(42);

编写这种类型的pseudoSwitch/cond函数留给读者作为练习。

注2：

默认情况下，JavaScript 中的对象使用字符串作为键，如果您需要使用无法轻松转换为字符串的内容，例如对象（将转换为

[Object object]

），那么您可以使用接受的 Map 对象任何东西作为钥匙。请注意，符号的工作方式不同，当用作数组中的键时，它们不会转换为字符串。

Answer 2

这是满足我需求的最佳/更简单的解决方案：

const customSwitch = [
    {
        condition: 'case1',
        fn() { /* Code if case1 */ },
    }, {
        condition: 'canBeChangedAnytime',
        fn() { /* Code if case2 */ },
    },
    ...adSomeCasesDynamycallyHere,
]

// edit a condition dynamically when needed:
customSwitch[0].condition = 'changed';

// use the "switch"
for (const { condition, fn } of customSwitch) {
    if (myValue === condition) {
        fn()
        break // breaks on first condition met
    }
}

customSwitch

，可以具有对象的形式，这可以提高可读性。例如：

customSwitch = { myCond: { condition, fn }}

您可以单击上面的代码片段来查看它的工作原理；）

const customSwitch = [    {
    condition: 38,
    fn: val => $("body").append(val === 38 ? 'UP' : 'RIGHT') + ' ',
}, {
    condition: 40,
    fn: val => $("body").append((val === 40 ? 'DOWN' : 'LEFT')+ ' ') ,
}]

$('#option1').click(function () {
    customSwitch[0].condition = 38
    customSwitch[1].condition = 40
});

$('#option2').click(function () {
    customSwitch[0].condition = 39
    customSwitch[1].condition = 37
});


$(window).keydown(function (e) {
    for (const { condition, fn } of customSwitch) {
        if (e.keyCode === condition) {
            fn(e.keyCode);
            break;
        }
    }
});

.btn {
cursor:pointer;
padding:5px;
border-radius:5px;
background-color:#3C0;
margin-top:5px;
width:150px;
text-align:center;
display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Press the four arrow keys:<br>
-if you click <b>option1</b> the switch will recognize UP and DOWN<br>
-if you click <b>option2</b> the switch will recognize LEFT and RIGHT<br>

<div id='option1' class='btn'>OPTION 1</div>
<div id='option2' class='btn'>OPTION 2</div>
<hr>

Answer 3

您可以使用

Object

作为开关盒。在这种情况下使用

Object

而不是

Array

的优点之一是，它大大减少了

Array

中错误索引导致的错误。对案例使用

Object

，您还可以将案例值提取到另一个脚本中。这有助于实现单一职责原则，因为您只需在 switch case 内实现业务逻辑，而不用担心维护正确的 case 值。

const OP = {
    ADD: 'ADD',
    MULTIPLY: 'MULTIPLY',
};
const choice = 'ADD';
switch (choice) {
    case OP.ADD:
        console.log('You chose add');
        break;
    case OP.MULTIPLY:
        console.log('You chose multiply');
        break;
    default:
        console.log('Operation is not defined');
}