《编写可维护的 JavaScript》读书笔记第9章：将配置数据从代码中分离出来

1. 什么是配置数据

• URL

• 展示给用户的字符串

• 重复的值

• 设置（如每页配置项）

• 任何可能发生变更的值

// 将配置数据埋藏在代码中
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");
    }
}

2. 抽离配置数据

// 将配置数据抽离出来
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);
    }
}

3. 保存配置数据

可以使用 Java 属性文件来存放配置数据：

# 面向用户的消息
MSG_INVALID_VALUE = Invalid value

# URLs
URL_INVALID = /errors/invalid.php

# CSS Classes
CSS_SELECTED = selected

可以使用工具将这个文件转换为 JavaScript 可用的文件。

有三种常见的格式：

• JSON

{"MSG_INVALID_VALUE":"Invalid value","URL_INVALID":"/errors/invalid.php","CSS_SELECTED":"selected"}

• JSONP（JSON with padding）

myfunc({"MSG_INVALID_VALUE":"Invalid value","URL_INVALID":"/errors/invalid.php","CSS_SELECTED":"selected"});

• 纯 JavaScript

var config = {"MSG_INVALID_VALUE":"Invalid value","URL_INVALID":"/errors/invalid.php","CSS_SELECTED":"selected"};

作者自创一个转换工具：Props2Js（https://github.com/nzakas/props2js/），用法如下：

java -jar props2js-0.1.0.jar --to jsonp --name myfunc --output result.js source.properties