私はコードの一部を見ています:
(function($) {
// other code here
$(document).ready(function() {
// other code here
});
})(jQuery);
IIFEは$(document).readyの機能を実行しますが、このコードは正しいですか?または、$(document).readyを削除して、コードをIIFE内に直接配置することもできます。
いいえ、IIFEはドキュメントの準備ができているコードを実行しません。
_(function($) {
console.log('logs immediately');
})(jQuery);
_
このコードはすぐに実行され、ドキュメントの準備ができていなくても「すぐにログを記録」します。
_(function($) {
$(document).ready(function(){
console.log('logs after ready');
});
})(jQuery);
_
コードをすぐに実行し、ドキュメントの準備ができるまで待機し、「準備完了後のログ」を記録します。
これは理解することをよりよく説明します:
_(function($) {
console.log('logs immediately');
$(document).ready(function(){
console.log('logs after ready');
});
})(jQuery);
_
これにより、ウィンドウが読み込まれた直後に「すぐにログ」がコンソールに記録されますが、「準備完了後のログ」はドキュメントの準備ができて初めて記録されます。
$(document).ready(function(){})
の代替は次のとおりです。
_$(function(){
//code in here
});
_
JQueryバージョン3.0から、readyハンドラーが変更されました。
_jQuery(function($) {
});
_
_$(function() {
console.log("inside handler");
});
console.log("outside handler");
_
>外部ハンドラー
>内部ハンドラー
$(function() {/* DOM Manipulations goes here})
を使用する必要があります(function($) {/* safely use $ here*/}(jQuery))
そして、あなたは両方のアプローチを組み合わせることができます:
(function($) {
/*Do smth that doesn't require DOM to be ready*/
$(function() {
/*Do the rest stuff involving DOM manipulations*/
});
}(jQuery));
IIFE
はもう1つのスコープを作成する必要があります。 IIFE
を削除すると、_$
_は定義されません(つまり、jQuery.noConflict()
)-エラーが発生します。 jQuery
は、ライブラリを含むJavaScriptファイルがロードされたすべての場所で定義されます。
したがって、jQueryのベストプラクティスではなく、JavaScriptのベストプラクティスです。
IIFEは Execution Context (評価されている現在のコードのスコープ)の準備ができたときに機能を実行します。 2つの最も一般的なパターン The Object Literal と The Module Pattern を説明するjQueryの Code Organization Concepts に関する記事、および使用方法を確認してくださいそれら。