$(function(){...}は複数定義する？

Question

jQueryを使う場合、DOMの読み込みを終えた後に実行させるために以下のコードを記述しますが、
規模が大きくなるにつれて、分割したいということもあると思いますが、みなさんどのようにしていますか？
複数定義しますか？それとも1つだけ定義しますか？

また、JSLintを使用している場合、変数の宣言は一箇所で行わないと警告を受けた覚えがありますが、そのあたりの兼ね合いはどうしてますか？

$(function(){
 // something...
}

$(document).ready(fuction(){
// something...
});

Answer 1

私は必要があれば複数定義する派です。

$(document).ready(fuction(){
// something...
});

はDOMのロードが完了したときのイベントハンドラなので、
一個のイベントに対して複数ハンドラを定義するという実装に違和感はありません。

tozip様のおっしゃっている

入り口が複数あるよりコードの見通しがいいです。

というご意見もごもっともで、不必要にたくさん定義するのは避けるべきかと思いますが、
論理的に明確にスコープが分けられるなら、個別に定義した方が良い場合もあると思っています。

例えば、bootstrapの"panel"がたくさんあるようなページで、
"panel"ごとに$(document).readyを定義するなどです。
その方が分業もしやすいですしね。

Answer 2

あくまで関数"実行"の足がかりが含まれていれば良くて、関数"定義"自体はどこにあってもエラーにはなりません。
このロードを待ってから実行するテクニックは、他のライブラリがきちんと揃っていないとか、HTML要素が画面上にまだ存在しないというエラーを防ぐために行います。

たとえば

function foo() {
  $("body").xxxx().xxxx()
}

これが実行された瞬間に jQuery がロードされる前だったとか、body がないとかであったとしても、特に問題はありません。
これは「foo関数の定義」という処理で、定義するだけなら中で使っている値はまだ必要ではないからです。

問題となるのは、このあとfoo();を実行するタイミングです。こっちは値がないタイミングだと落ちます。

僕は$(function(){});の中は数行しか書かないことが多いです。
極端な例だと$(init);だけですべての必要な処理が呼ばれるように作ることもあります。
極端というかむしろできるならそうしたほうが、入り口が複数あるよりコードの見通しがいいです。

Answer 3

状況によりけりですが、私は基本的には関数単位で分割します。

/**
 * jQuery() タイプ
 */
jQuery(function (jQuery) {
  'use strict';
  function a () {}
  function b () {}
  a();
  b();
});

/**
 * 即時関数タイプ
 */
(function (jQuery) { // スコープチェーンの仕組み上、グローバル変数をローカル変数に束縛するとパフォーマンスが上がる
  'use strict';
  function a () {}
  function b () {}
  function handleDOMContentLoaded (jQuery) {  // スコープチェーンの仕組み上、(同上)
    a();
    b();
  }
  jQuery(handleDOMContentLoaded);
}).call(this, jQuery);  // Strict Mode 用に this 値をグローバルオブジェクトに束縛する

簡易処理で済むなら前者、比較的複雑な処理なら後者というところでしょうか。
this 値や変数束縛できるのは汎用性が高いので後者は良く使います。

Re: makotosawada さん