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

本文链接：https://blog.csdn.net/oHappyKing12/article/details/109673142

编写可维护的JavaScript

- 第09章将配置数据从代码中分离出来

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

任何时候修改源代码都会有引入 bug 的风险，即使是只修改一些数据的值也会带来一些不必要的风险。数据不应该影响代码的正常运行。精心设计的应用应当将关键数据从主要的源码中抽离出来，这样我们修改数据时才更加放心。

9.1 什么是配置数据

// 不好的写法 将配置数据埋藏在代码里
function validata(value) {
    if (!value) {
        alert("Invalid value");
        location.href = "/error/invalid.php";
    }
}

function toggleSelected(element) {
    if (hasClass(element, "selected")) {
        removeClass(element, "selected");
    } else {
        addClass(element, "selected");
    }
}

这段代码中有三个配置数据片段。第一个是字符串“Invalid value”（非法的值），这个是用来给用户提示的。因为这个字符串可以被用户接触到，所有它可能会被很频繁地修改。第二个是 URL “/error/invalid.php”。在开发过程中，当架构变更时则很可能频繁修改URL。第三个是CSS的className “selected”。有三处都用到这个className，这也就意味着想要修改这个className则必须修改三处，很可能不小心丢掉了某处修改。

下面给出了一些配置数据的例子：

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

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

9.2 抽离配置数据

将配置数据从代码中抽离的第一步就是将配置数据拿到外部，即将数据从JavaScript代码中拿掉：

// 好的写法 将配置数据抽离出来
var config = {
    MSG_INVALID_VALUE: "invalid value",
    URL_INVALID: "/error/invalid.php",
    CSS_SELECTED: "selected"
};

function validata(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);
    }
}