FED实验室 - 专注WEB端开发和用户体验

使用Dispatch tables代替Javascript条件语句

点滴Javascript 煦涵 3727℃ 0评论

在我们日常开发中,经常会遇到很多种的条件语句判断,大多会使用if/else语句或者switch/case语句,如果这个判断条件非常多的,将会产生以下问题:
1.维护起来比较困难;
2.检索的性能也会下降;
3.扩展性较差;
基于以上三点,本篇文件将介绍使用dispatch table来避免在Javascript中使用条件语句。如果你想了解dispatch table的概念,请戳这里(可能要翻墙)。

一、使用三元运算符代替if/else语句

var name;
if(value == 2) {
	name = "Benjamin";
}else {
	name = "zuojj";
}

//等价于
var name = value == 2 ? "Benjamin" : "zuojj";

/* ------ 分割线 -------------*/
if($checkbox.attr("checked")) {
	$btn.attr("disabled", true);
	$btn2.attr("disabled", false);
}else {
	$btn.attr("disabled", false);
	$btn2.attr("disabled", true);
}

//等价于
$checkbox.attr("checked") 
?
(function() {
	$btn.attr("disabled", true);
	$btn2.attr("disabled", false);
})()
:
(function() {
	$btn.attr("disabled", false);
	$btn2.attr("disabled", true);
})();

二、使用dispatch table代替switch/case语句

function processUserInput(command) {
    switch (command) {
        case "north":
            movePlayer("north");
            break;
        case "east":
            movePlayer("east");
            break;
        case "south":
            movePlayer("south");
            break;
        case "west":
            movePlayer("west");
            break;
        case "look":
            describeLocation();
            break;
        case "backpack":
            showBackpack();
            break;
    }
}

//等价于
var commandTable = {
    north:    function() { movePlayer("north"); },
    east:     function() { movePlayer("east");  },
    south:    function() { movePlayer("south"); },
    west:     function() { movePlayer("west");  },
    look:     describeLocation,
    backpack: showBackpack
}

function processUserInput(command) {
    commandTable[command]();
}

如果后来我们需要添加一个新的条件,我们需要做的就是把它添加到commandTable,同时,使用对象的键来索引,速度会更快。

希望本文对大家有所帮助,文中不妥之处,还望批评斧正。

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持or喜欢 (0)or分享 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽