Question

假设您有三个SELECT元素，每个元素都有可变数量的选项。

<select id="a">
   <option value="0">Zero</option>
   <option value="1">One</option>
   <option value="2">Two</option>
</select>
<select id="b">
   <option value="0">Zero</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
</select>
<select id="c">
   <option value="0">Zero</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
   <option value="4">Four</option>
</select>

让我们假设您可以采取多种不同的行动，具体取决于所选择的选项模式。如果您有a1 + b2 + c5，它会执行与a2 + b1 + c1不同的操作。某些模式可能会显示或隐藏其他SELECT控件。

我看过很多代码都有多级if/else语句来涵盖所有的排列，但它总是看起来很乱，很难维护。

另一种方法可能涉及创建一个哈希表，其中的属性以组合的字符串表示形式命名：

function foo() {
   // statements
}
function bar() {
   // statements
}
var selectPatterns = {
    'a1b2c5' : foo,
    // ... other properties and function references
    'a2b1c1' : bar
    // ... possibly still more properties and function references
};

这涉及一个确定所做选择的函数，并找到要调用的selectPatterns的正确属性以及获取每个SELECT的值的函数：

function getSelectValue(id) {
   var sel = document.getElementById(id);
   return id + sel.options[sel.selectedIndex].value;
} 

function abcExecute () {
   var propName = getSelectedValue('a') + getSelectedValue('b') + getSelectedValue('c'); 

   selectPatterns[propName]();
}

后者函数在“a1b2c5”的情况下运行foo()，在“a2b1c1”的情况下运行bar()。

我想知道的是，这是一个好的设计模式，还是有其他更好的方法可以根据多种输入条件分配行为。

Answer 1

每个排列会有一个不同的函数，或者几个排列可能会调用foo函数吗？

如果是前者，我更喜欢您的方法使用if/else或switch。

如果是后者，我可能会在你的最后一行做同样的事情：

if('a1b2c5 a3b0c3 a2b2c5'.indexOf(propName) > -1) foo()。

这可能会减少程序的内存使用量，字符串查找可能比对象查找更快。

用于快速查找多个选择行为的Javascript模式？

1 个答案: