jquery 「条件を満たすときのみ処理実行」を複数設定

基本

色々と省略できるのは知っている・・・でも省略しすぎると見づらくなるので個人的にイヤで、回りくどくても見やすさ重視。

経緯

特定の要素があるときだけイベントを追加したかったので下記のようにしていた。

var procAustralia = function(){
  $(〇〇〇).on(〇〇〇, 〇〇〇, function(){〇〇〇});
}

var procBrazil = function(){
  $(〇〇〇).on(〇〇〇, 〇〇〇, function(){〇〇〇});
  $(〇〇〇).on(〇〇〇, 〇〇〇, function(){〇〇〇});
}

var procChile = function(){
  $(〇〇〇).on(〇〇〇, 〇〇〇, function(){〇〇〇});
  $(〇〇〇).on(〇〇〇, 〇〇〇, function(){〇〇〇});
  $(〇〇〇).on(〇〇〇, 〇〇〇, function(){〇〇〇});
}

// 〇A〇のチェック
if (条件A) {
  procAustralia();
}

// 〇B〇のチェック
if (条件B1 || 条件B2) {
  procBrazil();
}

// 〇C〇のチェック
if (!条件C) {
  procChile();
}

これが、数増えると非常に見づらい。

▼if文を1行にしてみる。1行だったら「{}」が省略可能だけど、見づらくなるので省略したくない。あと空白を合わせないと見づらい。

if(条件A) {            procAustralia(); } // 〇A〇のチェック
if(条件B1 || 条件B2) { procBrazil();    } // 〇B〇のチェック
if(!条件C) {           procChile();     } // 〇C〇のチェック

▼三項演算子で1行にしてみる。空白を合わせないと見づらい。

var procA = (条件A)?            procAustralia(): false;// 〇A〇のチェック
var procB = (条件B1 || 条件B2)? procBrazil():    false;// 〇B〇のチェック
var procC = (!条件C)?           procChile():     false;// 〇C〇のチェック

案

没：2018/03/23

コメント文、条件式、処理させる関数名の長さは関係ないし、数が増えても空白を調整する必要もない。
※追加時に「,」の付け忘れ等だけ注意が必要。

$.each([
  { // 〇A〇のチェック
    'isTrue': 条件A,
    'runFnc': procAustralia
  },
  { // 〇B〇のチェック
    'isTrue': 条件B1 || 条件B2,
    'runFnc': procBrazil
  },
  { // 〇C〇のチェック
    'isTrue': !条件C,
    'runFnc': procChile
  }
], function(){
  if ( this.isTrue ){ this.runFnc(); }
});

他にも良い案があると思う。