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

任何时候修改源代码都会有引入 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"。这三个数据在开发过程中都会被频繁地修改。

• 配置数据：

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

• 注意：
  配置数据是可发生变更的，并且不希望因为需求变更，到 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。
• 意义：
  1. 任何人都可以修改它们，而不会导致应用逻辑出错。
  2. 将整个 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 对应。

• 优点：
  1. 书写简单，格式清晰。
  2. 不用写引号，因此不必担心字符串中的某些转义字符以及字符串的结束位置。
  3. 编辑时可完全忽略 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：要读取的文件名。