<<编写可维护的javascript>> 笔记9(将配置数据从代码中分离出来)

代码无非是定义一些指令的集合让计算机来执行. 我们常常将数据传入计算机, 由指令对数据进行操作, 并最终产生一个结果. 当不得不修改数据时问题就来了. 任何时候你修改源代码都会有引入bug的风险, 且值修改一些数据的值也会带来一些不必要的风险, 因为数据时不应当影响指令的正常运行的. 精心设计的应用应当将关键数据从主要的源码中抽离出来, 这样我们修改源码时才更加放心.

9.1 什么是配置数据
配置数据是应用中写死的值.

// 配置参数埋藏在代码中
function validate(value) {
    if(!value) {
        alert('非法的值');
        location.href = '/errors/invalid.php';
    }
}

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

这段代码中有三个配置数据片段. 第一个是字符串 "非法的值", 这个值是给用户提示的. 所以它可能会被频繁修改. 第二个是URL"/errors/incalid.php". 当架构变更时则可能频繁修改. 第三个是CSS的类名"selected". 有三处都用到了className, 这意味着要修改这个类名要修改三处代码. 很可能不小心丢掉了某处.

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

配置数据时可发生变更的, 而且你不希望有人要改展示信息而去修改源码.

9.2 抽离配置数据
将配置参数从代码中抽离出来.

// 将配置参数抽离出来
var config = {
    MSE_VALUE: '非法的值',
    URL_INVALID: '/errors/invalid.php',
    CSS_SELECTED: 'selected'
}
function validate(value) {
    if(!value) {
        alert(config.MSG_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);
    }
}

这样修改它们就不会导致代码出错
9.3 保存配置数据
配置数据最好单独在一个文件中. 这样代码清晰很多.
有很多方式, 不用js用别的语言要转化为js识别语言.

• JSON
• JSONP
• 纯JavaScript

有很多模块导入方法import等等