即時呼び出し関数式 (IIFE)
IIFE は、グローバル変数/プロパティをローカルにスコープし、JavaScript コードベースを外部の干渉 (サードパーティ ライブラリなど) から保護するための理想的なソリューションです。多くの異なる環境 (jQuery プラグインなど) で実行される jQuery コードを作成している場合は、IIFE を使用して jQuery をローカルにスコープすることが重要です。これを行う方法は次のとおりです。
// IIFE - Immediately Invoked Function Expression
(function($, window, document) {
// The $ is now locally scoped
// The rest of your code goes here!
}(window.jQuery, window, document));
// The global jQuery object is passed as a parameter
ソース ファイルの一番下までスクロールして、IIFE に渡すグローバル変数/プロパティを確認する必要がない場合は、次のようにします。
// IIFE - Immediately Invoked Function Expression
(function(yourcode) {
// The global jQuery object is passed as a parameter
yourcode(window.jQuery, window, document);
}(function($, window, document) {
// The rest of your code goes here!
}
));
IIFE の詳細については、私のブログ記事I Love My IIFE をご覧ください。
jQuery Ready イベント
多くの開発者は、次のようにすべてのコードを jQuery Ready イベント内にラップします。
$("document").ready(function() {
// The DOM is ready!
// The rest of your code goes here!
});
または、次のような短いバージョン:
$(function() {
// The DOM is ready!
// The rest of your code goes here!
});
上記のパターンのいずれかを実行している場合は、DOM に依存しないアプリケーションの一部 (メソッドなど) を Ready イベント ハンドラーの外に移動することを検討する必要があります。このような：
// IIFE - Immediately Invoked Function Expression
(function(yourcode) {
// The global jQuery object is passed as a parameter
yourcode(window.jQuery, window, document);
}(function($, window, document) {
// The $ is now locally scoped
$(function() {
// The DOM is ready!
});
// The rest of your code goes here!
}
));
このパターンを使用すると、1 つのイベント ハンドラー コールバック関数内にすべてをラップする必要がないため、(コード設計の観点から)ロジックを簡単に分離できます。すべてをすぐに初期化する必要がないため、アプリケーションのページ読み込みパフォーマンスも向上します。この好例は、DOM の準備が整ったときにバインドする必要のないDOM イベント ハンドラーの遅延バインドです。
私の jQuery ベスト プラクティス ブログ投稿から引用: http://gregfranko.com/blog/jquery-best-practices/