将配置数据从代码中分离出来
任何时候修改源代码都会有引入 bug 的风险,且只修改一些数据的值也会带来一些不必要的风险。精心设计的应用应当将关键数据从主要的源码中抽离出来,因为数据是不应当影响指令的正常运行。
什么是配置数据
配置数据是应用中写死(hardcoded)的值。
- 示例:
// 将配置数据埋藏在代码中
function validate(value) {
if(!value) {
alert("Invalid value");
location.href = "/errors/invalid.php";
}
}
function toggleSelected(element) {
if(hasClass(element, "selected")) {
removeClass(element, "selected");
} else {
addClass(element, "selected");
}
}
-
解释:
这段代码中有三个配置数据片段:1.字符串 "Invalid value",2.URL "/errors/invalid.php",3.CSS 的 className "selected"。这三个数据在开发过程中都会被频繁地修改。 -
配置数据:
- URL
- 需要展现给用户的字符串
- 重复的值
- 设置(比如每页的配置项)
- 任何可能发生变更的值
-
注意:
配置数据是可发生变更的,并且不希望因为需求变更,到 JavaScript 源码中修改配置数据。
抽离配置数据
将配置数据从代码中抽离出来的第一步是将配置数据拿到外面,即将数据从 JavaScript 代码之中拿掉。
- 示例:
// 将配置数据抽离出来
var config = {
MSG_INVALID_VALUE : "Invalid value",
URL_INVALID : "/errors/invalid.php",
CSS_SELECTED : "selected"
};
function validate(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 对象中的属性占位符(但这可能存在另外一个问题:造成代码分割问题)。 -
推荐:
为每个属性加前缀,用以表明数据的类型。例如,MSG 表示展现给用户的消息,URL 表示网络地址,CSS 表示这是一个 className。 -
意义:
- 任何人都可以修改它们,而不会导致应用逻辑出错。
- 将整个 config 对象放到单独的文件中,对配置数据的修改可以完全和使用这些数据的代码隔离开来。
保存配置数据
配置数据最好放在单独的文件中,以便清晰地分隔数据和应用逻辑。
作者推荐使用非 JavaScript 文件形式来存储配置数据。
【理由】:不需要遵照 JavaScript 语言的语法来阻止配置数据,这样可确保不会出语法错误。如果你将多个 JavaScript 文件合并成一个,一个语法错误就会导致整个应用程序崩溃。
【观点】:将文件中的配置数据正确格式化是很麻烦的一件事,当你拿到这样一个文件时,你会觉得将配置数据自动转换为 JavaScript 格式是无足轻重的一件事。
【我的理解】:起初看到作者说 JavaScript 配置数据很麻烦,且容易出语法错误时不是很理解。采用对象字面量的书写方式也不会出语法错误,而且书写也不麻烦,但继续往下阅读到“拿到这样一个文件时”这句话时,有些明白作者的意思了。比如说业务或设计直接丢给你一个 EXCEL 文件,一列 key,一列 value,如果要按照 JSON 的写法,我必须给每个 key 加一对引号,然后在其后面加一个冒号,再给 value 加一对引号,最后在 value 的右引号后加一个逗号。作者推荐使用 Java 属性文件(Java properties file)来存放配置数据,形式如下:
MSG_INVALID_VALUE = Invalid value
URL_INVALID = /errors/invalid.php
CSS_SELECTED = selected
此时,我只需要先将 key 列全部复制粘贴,让其各占一行,然后在每行后面加个等号,再复制 value 列,让其与相匹配的 key 对应。
-
优点:
- 书写简单,格式清晰。
- 不用写引号,因此不必担心字符串中的某些转义字符以及字符串的结束位置。
- 编辑时可完全忽略 JavaScript 语法。
接下去的步骤是将该 Java 属性文件转换为 JavaScript 可用的文件。
- JSON:
{
"MSG_INVALID_VALUE": "Invalid value",
...
}
- JSONP:
{
myfunc({
"MSG_INVALID_VALUE": "Invalid value",
...
});
}
- 纯 JavaScript:
var config = {
MSG_INVALID_VALUE: "Invalid value",
...
}
本书的作者创建了一个工具 Props2Js,用以读取 Java 属性文件并给出以上三种格式的输出。
Props2Js
- 简介:免费且开源。
- 地址:传送门
- 用法:
java -jar props2js-0.1.0.jar --to jsonp --name myfunc
--output result.js source.properties
- 用法介绍:
- to:指定要输出的格式,可以是“js”,“json”,“jsonp”。
- name:指定了变量名称(当格式为“js”时)或函数名称(当格式为“jsonp”时)。当格式为“json”时忽略这个选项。
- output:指定了输出的文件名。
- source.properties:要读取的文件名。
网友评论