web-dev-qa-db-ja.com

IIFE内で$（document）.readyを使用するjQueryのベストプラクティス？

私はコードの一部を見ています：

(function($) {    
   // other code here    
 $(document).ready(function() {   
    // other code here    
  });    
})(jQuery);

IIFEは$（document）.readyの機能を実行しますが、このコードは正しいですか？または、$（document）.readyを削除して、コードをIIFE内に直接配置することもできます。

jquerydocument-readyiife
28
webmedia

いいえ、IIFEはドキュメントの準備ができているコードを実行しません。

1. IIFEのみ：

_(function($) {
  console.log('logs immediately');
})(jQuery);
_

このコードはすぐに実行され、ドキュメントの準備ができていなくても「すぐにログを記録」します。

2.準備完了内：

_(function($) {
   $(document).ready(function(){
     console.log('logs after ready');
   });
})(jQuery);
_

コードをすぐに実行し、ドキュメントの準備ができるまで待機し、「準備完了後のログ」を記録します。

これは理解することをよりよく説明します：

_(function($) {
  console.log('logs immediately');
  $(document).ready(function(){
    console.log('logs after ready');
  });
})(jQuery);
_

これにより、ウィンドウが読み込まれた直後に「すぐにログ」がコンソールに記録されますが、「準備完了後のログ」はドキュメントの準備ができて初めて記録されます。

IIFEは、準備ができている代替手段ではありません。

$(document).ready(function(){})の代替は次のとおりです。

_$(function(){
   //code in here
});
_

更新

JQueryバージョン3.0から、readyハンドラーが変更されました。

次の形式の準備ハンドラのみが推奨されます。

_jQuery(function($) {

});
_

Readyハンドラーは非同期になりました。

_$(function() {
  console.log("inside handler");
});
console.log("outside handler");
_

>外部ハンドラー

>内部ハンドラー

49
Bhojendra Rauniyar
  • DOMを準備する必要がある場合は、$(function() {/* DOM Manipulations goes here})を使用する必要があります
  • ある種の名前の衝突を避けたい場合は、コードをIIFEでラップすることができます(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));
6
Yury Tarabanko

IIFEはもう1つのスコープを作成する必要があります。 IIFEを削除すると、_$_は定義されません（つまり、jQuery.noConflict()）-エラーが発生します。 jQueryは、ライブラリを含むJavaScriptファイルがロードされたすべての場所で定義されます。

したがって、jQueryのベストプラクティスではなく、JavaScriptのベストプラクティスです。

1
Pinal

IIFEは Execution Context （評価されている現在のコードのスコープ）の準備ができたときに機能を実行します。 2つの最も一般的なパターン The Object Literal と The Module Pattern を説明するjQueryの Code Organization Concepts に関する記事、および使用方法を確認してくださいそれら。

0
Danijel