2010年8月29日日曜日

プログラムを短く書く〜其ノ参〜 class属性を活用する

class属性によるグループ化

今回はHTMLとJavaScriptとCSSの話になりますが、前回のコードはID属性を使用して要素を特定していましたが、要素を個別に指定する必要がなくグループ化できる場合はclass属性を使用します。
function switchDateSelectForm(){
  var disabled = this.checked && this.value == 0;
  $('#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();
これが、こう。
function switchDateSelectForm(){
  var disabled = this.checked && this.value == 0;
  $('.select_date').attr('disabled', disabled);
}
$('input[name="enable_selecting_date"]')
  .change(switchDateSelectForm)
  .filter(':checked')
  .change();

select_dateというクラスに操作対象の要素を入れ、select_dateに所属する要素に対してdisabled属性の変更を行っています。

セレクタに委譲と単一責任の原則

短いコードを書く話ではなくなりますが、classを使うことで、switchDateSelectFormがどの要素に対して操作するかをある意味委譲させることができます。classはCSSのセレクタでも使用することがありますが、今回のselect_dateはスタイルを設定するためのセレクタとしては使わず、オブジェクト指向の単一責任の原則のように、どうしてもその必要がなければこのclassは日付けの選択の有効無効の操作の対象にするだけに留めておいた方が良いです。select_dateクラスにイベントがバインドされることで、後から時刻のフォームが追加になった場合も、classにselect_dateを持たせることで、HTMLの変更だけで済むようになるメリットもあります。

クラスを使わず、構造に依存するセレクタの罠

$('.select_date').attr('disabled', disabled);
// ↓ 文脈セレクタ化 個人的には非推奨
$('div.select_date > select').attr('disabled', disabled);

セレクタはグローバルに働くため、文脈セレクタで対象を狭めることがよくあります。上記くらいの文脈セレクタならそれほど問題ないかもいれませんが、「#contents #contact-form div.select_date select」くらいまで長くなると、HTMLの構造に大きく依存し、HTMLが変更されるとJavaScriptもCSSも変更する必要が出てくる可能性があります。これは変更が発生することが考えられる案件では間違った設計と言えます。コードのメンテナンス性を上げるためには、classを有効活用した方が良いでしょう。しかしその場合はclass名の重複を避ける必要が出てきます。ネーミングについてはまた別の機会に書けたらと思います。個人的にもまとめたいのでw

知らない人も意外といるので書いておきますが、classはホワイトスペースで区切ることで複数設定可能です。数に制限はありませんが、煩雑になりやすいので注意が必要です。

0 件のコメント: