编写可维护的JavaScript
第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格式的文件中。