实际代码

今天的代码很简单，但每次评审时碰到类似场景，总会让我有些小不淡定：

// 代码 1
if ('s' == type.value) {
    cont.style.display = 'none';
    if (cont.shim) cont.shim.style.display = 'none';
    if (cats) cats.style.display = 'none';
} else {
    cont.style.display = '';
    if (cont.shim) cont.shim.style.display = '';
    if (cats) cats.style.display = '';
}

让条件语句用对地方

上面的 if else 代码块里，只有 'none' 和 '' 两个值不同。意识到这点，代码立减一半：

// 代码 2
var val = type.value === 's' ? 'none' : '';
cont.style.display = val;
if (cont.shim) cont.shim.style.display = val;
if (cats) cats.style.display = val;

用方法封装重复逻辑

上面的代码，已经很不错。但后面三行代码的逻辑是重复的，可以提取为通用方法：

// 代码 3
var val = type.value === 's' ? 'none' : '';
setDisplay(cont, val);
setDisplay(cont.shim, val);
setDisplay(cats, val);

function setDisplay(el, val) {
    if(el) el.style.display = val;
}

更进一步，让通用方法支持批量操作：

// 代码 4
setDisplay([cont, cont.shim, cats], type.value === 's' ? 'none' : '');

function setDisplay(els, val) {
    for (var i = 0, len = els.length, el; i < len && (el = els[i]); i++) {
        el.style.display = val;
    }
}

用类库简化开发

有类库不用，自己写原生代码，除非有特别强的理由，比如性能要求或无依赖要求，否则一般都得打屁屁。上面代码所在页面，已经加载 KISSY 类库，可以简化为一行：

// 代码 5
KISSY.DOM.css([cont, cont.shim, cats], 'display', type.value === 's' ? 'none' : '');

结语

保持代码干净优雅，有一条非常重要的原则：DRY(Don't Repeat Youself). 今天用到的 DRY 技巧有：

1. 当条件分支里的代码非常雷同时，可以尝试仅条件化差异点，以减少重复代码。
2. 可以通过封装通用方法来减少逻辑相同的代码。
3. 有类库可用时，优先使用类库提供的方法，这往往最简洁高效。