实际代码

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

// 代码 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. 有类库可用时,优先使用类库提供的方法,这往往最简洁高效。