2010年8月27日金曜日

プログラムを短く書く〜其ノ弐〜 if elseを見直す

if elseで無駄なコードをたくさん書ける罠

例えばラジオボタンでHTMLフォームの有効・無効を操作するJavaScriptが次のようなものだとします。

function switchDateSelectForm(){
  if(this.checked && this.value == 0){
    $('#start-year').attr('disabled', true);
    $('#start-month').attr('disabled', true);
    $('#start-day').attr('disabled', true);
    $('#end-year').attr('disabled', true);
    $('#end-month').attr('disabled', true);
    $('#end-day').attr('disabled', true);
  }else{
    $('#start-year').attr('disabled', false);
    $('#start-month').attr('disabled', false);
    $('#start-day').attr('disabled', false);
    $('#end-year').attr('disabled', false);
    $('#end-month').attr('disabled', false);
    $('#end-day').attr('disabled', false);
  }
}
$('input[name="enable_selecting_date"]')
  .change(switchDateSelectForm)
  .filter(':checked')
  .change();

無駄です。こう書けます。

function switchDateSelectForm(){
  var disabled = this.checked && this.value == 0;
  /* もしくは
  var disabled;
  if(this.checked && this.value == 0) {
     disabled = true;
   }else{
     disabled = false;
   }  
  */
  $('#start-year').attr('disabled', disabled);
  $('#start-month').attr('disabled', disabled);
  $('#start-day').attr('disabled', disabled);
  $('#end-year').attr('disabled', disabled);
  $('#end-month').attr('disabled', disabled);
  $('#end-day').attr('disabled', disabled);
}
$('input[name="enable_selecting_date"]')
  .change(switchDateSelectForm)
  .filter(':checked')
  .change();

条件分岐の外に出せるものは外に出そう

if elseでは以外とやりがちな事です。コツは条件分岐の外に出せるものは外に出す!これだけです。今回の例も簡単ですが、あまりこういったことを教えている初心者向けの入門本に書いてない気がしたので、取り上げてみました。

1 件のコメント:

TASUKE さんのコメント...

すてきです!
最近更新がご無沙汰だったので死んでしまったのかと思いました(skypeしたけど。

自分も最近短いコーディングについて研究しているので
複雑になってしまうとダメですが、短いコーディングについて特集してほしいです。
自分もなにか書こうかなと思ってた矢先かかれてしまった><