实际代码

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

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