【读书笔记】：《编写可维护的JavaScript》第09章 将配

第09章 将配置数据从代码中分离出来

任何时候修改源代码都会有引入 bug 的风险，即使是只修改一些数据的值也会带来一些不必要的风险。数据不应该影响代码的正常运行。精心设计的应用应当将关键数据从主要的源码中抽离出来，这样我们修改数据时才更加放心。

9.1 什么是配置数据

// 不好的写法 将配置数据埋藏在代码里
function validata(value) {
    if (!value) {
        alert("Invalid value");
        location.href = "/error/invalid.php";
    }
}

function toggleSelected(element) {
    if (hasClass(element, "selected")) {
        removeClass(element, "selected");
    } else {
        addClass(element, "selected");
    }
}

这段代码中有三个配置数据片段。第一个是字符串“Invalid value”（非法的值），这个是用来给用户提示的。因为这个字符串可以被用户接触到，所有它可能会被很频繁地修改。第二个是 URL “/error/invalid.php”。在开发过程中，当架构变更时则很可能频繁修改URL。第三个是CSS的className “selected”。有三处都用到这个className，这也就意味着想要修改这个className则必须修改三处，很可能不小心丢掉了某处修改。

下面给出了一些配置数据的例子：

• URL
• 需要展现给用户的字符串
• 重复的值
• 设置（比如每页的配置项）。
• 任何可能发生变更的值。

我们时刻要记住，配置数据时可发生变更的，而且你不希望因为有人突然想修改页面中的展示信息，而导致你去修改JavaScript源码。

9.2 抽离配置数据

将配置数据从代码中抽离的第一步就是将配置数据拿到外部，即将数据从JavaScript代码中拿掉：

// 好的写法 将配置数据抽离出来
var config = {
    MSG_INVALID_VALUE: "invalid value",
    URL_INVALID: "/error/invalid.php",
    CSS_SELECTED: "selected"
};

function validata(value) {
    if (!value) {
        alert(config.MSG_INVALID_VALUE);
        location.href = config.URL_INVALID;
    }
}

function toggleSelected(element) {
    if (hasClass(element, config.CSS_SELECTED)) {
        removeClass(element, config.CSS_SELECTED);
    } else {
        addClass(element, config.CSS_SELECTED);
    }
}

这段代码中，我们将配置数据保存在了 config 对象中。config 对象的每个属性都保存了一个数据片段，每个属性名都有前缀，用以表明数据的类型（MSG 表示展示给用户的信息，URL 表示网络地址，CSS 表示一个className）。当然，命名约定是个人偏好。

将配置数据抽离出来意味着任何人都可以修改它们，而不会导致应用逻辑出错。同样，我们可以将整个 config 对象放到单独的文件中， 整个对配置数据的修改可以完全和使用这些数据的代码隔离开来。

9.3 保存配置数据

现在流行的做法就是将配置文件存放到json格式的文件中。