《编写可维护的 JavaScript》编程实践 - 第 9 章 分离可配置的数据

编程实践 - 第 9 章 分离可配置的数据

《编写可维护的 JavaScript》—— Nicholas C. Zakas

代码无非是定义一些指令的集合，让计算机来执行。

我们将数据传入计算机，由指令对数据进行操作，并最终产生一个结果。

当要修改数据时，则可能产生问题，任何时候你修改源代码都会可能引入 bug。
有时就算修改数据的值也会带来风险，而数据是不应当影响指令的正常运行的。

精心设计的应用应当将关键数据从主要的源代码中抽离出来，这样就可以更加放心地修改源代码了。

1. 什么是配置数据

配置数据是应用中写死（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。当架构变更时，很可能会频繁修改 URL。
3. CSS 类名 selected。有 3 处用到，一旦要修改则需要改动 3 处，很可能遗漏某处修改。

可以认为这些都是配置数据，因为它们都是写死在代码里，且将来可能会被修改。

以下是一些配置数据的例子：

• URL
• 需要展现给用户的字符串
• 重复的值
• 设置
• 任何可能发生变更的值

要时刻记住，配置数据是可发生变更的，而且你不希望因为有人突然想修改页面中展示的信息，而导致你去修改 JavaScript 源码。

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);
  }
}

将配置数据保存在了 config 对象中，config 对象的每个属性都保存了一个数据片段，每个属性名都有特定的前缀，用以表示数据的类型

• MSG 表示展现给用户的消息
• URL 表示网络地址
• CSS 表示 className

这段代码中，所有的配置数据都从函数中移除，并替换为 config 对象中的属性占位符。

将配置数据抽离出来意味着任何人都可以修改它们，而不会导致应用逻辑出错。
如果将 config 对象放到单独的文件中，这样对配置数据的修改可以完全和使用这些数据的代码隔离开来。

3. 保存配置数据

配置数据最好放在单独的文件中，以便清晰地分隔数据和应用逻辑。

将配置数据存放于单独的 JavaScript 文件是可行的，
但是对于一个 JavaScript 应用来说，JavaScript 文件并非存储数据的最佳方式，
因为你必须遵照 JavaScript 语言的语法来组织它，且不会出语法错误。
一旦你将有语法错误的 JavaScript 文件合并到其他的文件，会导致整个应用程序的崩溃。

将文件中的配置数据正确格式化是很麻烦的一件事。
一种值得尝试的做法是将配置数据存放于非 JavaScript 文件中。

比如将配置数据存放于 Java 属性文件（.properties），它是非常简单的键值对集合，每个键值对独占一行。

形式为 name=value，等号两边可以存在空格，语法不容易出错。注释以 # 打头，如下

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

# URLs
URL_INVALID = /errors/invalid.php"

# CSS classes
CSS_SELECTED = selected

这种格式非常简单，而且不用写引号，不用担心字符串中的某些转义字符，不用担心分号和逗号，可以忽略 JavaScript 语法。

接下来的步骤就是将整个文件转换为 JavaScript 可用的文件，有 3 种格式：

• JSON
• JSONP
• JavaScript 文件

JSON：

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

JSONP：

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 工具转换为这三种格式的文件。