自分がやってるjQueryのソースを少しでも読みやすくする書き方

みんな！ jQuery書いてるかな！

• 2017年にもなってお前まだjQueryの話するのかよっていう話もあるかと思いますが、まぁ広いインターネットの世界、いろんな人がいます。
• へーきへーき！フレンズによってとくいなことちがうから！

level 0 出発点

$('#id').on('click', function(){
  //何か処理
});

• どこにでもある誰にでも書ける書き方。
• ちょうわかりやすい。
• このコードはもう保守したくない。

level 1 分離

/**
 * 何かの処理
 */
function someMethod(event){
  //何か処理
}

/**
 * 何かの処理2
 */
function someMethod2(event){
  //何か処理2
}


$('#id').on('click', someMethod);
$('#id2').on('click', someMethod2);

• 関数定義とイベントバインディングを分離
• 関数に名前がつくことで「何の処理をバインドしているのか」が明確になる（someMethodでは台無しだが
• また、イベントバインディングを一カ所にまとめることで、どこに何のイベントがセットされているかも明確になる。
• イベントバインディングを一時的にコメントアウトしたいときにも便利
• デバッグのトレースに関数名が表示されるのが便利

//level 0:
$('#button').on('click', function(){
  var a = 1;
  var b = a + c;//cが未定義なのでエラーを起こす
});

----------------------------------------------
//level 1:
function someMethod(){
  var a = 1;
  var b = a + c;//cが未定義なのでエラーを起こす
}

$(function(){
  $('#button').on('click', someMethod);
});

• 再利用できるのが便利
• 少しめんどくさいのが不便。だけどちゃんと考えて名前を付けて！　最悪clickButtonでも無いよりマシ。

level 2 処理単位でさらに分離

function SomeMethodGroup(){
    var self = this;
    self.someMethod = function(){
      //何か処理
    }
}
function AnotherMethodGroup(){
    var self = this;
    self.someMethod = function(){
      //何か処理
    }
}
var someMethodGroup = new SomeMethodGroup();
var anotherMethodGroup = new AnotherMethodGroup();

$('#id').on('click', someMethodGroup.someMethod);
$('#another_id').on('click', anotherMethodGroup.someMethod);

• 多分この例では分かりづらいと思う。
• そもそもモジュール化しろよとかマサカリ飛んできそう（jQuery利用者だぞ
• jQueryの場合はイベントハンドラ内のthisがトリガー要素となるので、それを使わないのであれば、ES2015でclass化した方がすっきりすると思う。
• この分離の単位の感覚を覚えると、コンポーネント化する時にも移行しやすい。と思う。
• まるっと処理を置き換えるときとかに楽。
• 例えばONボタンとOFFボタンがあってーみたいな2つのイベントでワンセット、みたいなときに、そのセットがコードに落とされているというか。

function ButtonGroup(){
    var self = this;
    self.on = function(){
      //何か処理
    }
    self.off = function(){
      //何か処理
    }
}
function AnotherMethodGroup(){
    var self = this;
    self.someMethod = function(){
      //何か処理
    }
}
var buttonGroup= new ButtonGroup();
var anotherMethodGroup = new AnotherMethodGroup();

$('.on').on('click', buttonGroup.on);
$('.off').on('click', buttonGroup.off);//この2つはひとまとまりなんだな、みたいな。

• みたいな。
• ButtonGroupとAnotherMethodGroupにまたがる処理はどうするかというと、またがる用の処理を作ります。

まとめ

これ以上のレベル上げは危険。というのも、jQueryでもできることはある、ただし、jQueryに出来ないことは無い！という思想になると多分悪い方向に向かう。物事にはそれに適したやり方、というものがある。
level2まで上げても破綻するようであればそろそろjQuery以外の選択肢を考慮する時。

ライブラリ等をインストールするわけではなく、ファイル単位での「書き方」を変えるだけなので、いますぐに、どこにでも導入できます。jQueryのソースがとっ散らかっててよく分からねぇ、という人は試してみてください。