《编写可维护的 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

本文出自 “神奇的未来” 博客，请务必保留此出处http://qczhang.blog.51cto.com/6094768/1344240