web-dev-qa-db-ja.com

自己実行関数jqueryとjavascriptの違い

の違いは何ですか-

最初の：-

(function () {

    var Book = 'hello';

}());

2番目：-

(function () {

    var Book = 'hello';

})();

1つ目と2つ目は、いくつかの作業方法に似ています。

番目：-

(function ($) {

    var Book = 'hello';

})(jQuery);

どのパターンを使用する必要があり、コーディングのどこにあるか。

番目の「「jQuery」引数を使用した自己実行関数」から理解したこと....

すぐに呼び出される関数式（IIFE）についてのアイデアを教えてください。

ありがとう!!

javascriptjqueryiife
42
Javascript Coder

すべての場合において、匿名関数を実行しています。 1は2と同じだと思います。3番目のケースでは、jQueryを引数として渡します。これは、関数のスコープ内でjQueryをカプセル化するときに行われます。

たとえば、アプリケーションでは、jQuery varはjQueryになります。ただし、匿名関数内では、$として使用できます。

(function ($) {
    //Here jQuery is $
    var Book = $(document.body).text();    

})(jQuery);

//Out of your function, you user jQuery as jQuery (in this example)
var Book = jQuery(document.body).text();
29
Jorgeblom

これは、クロージャと呼ばれ、$を使用しているmootoolsなどの他のライブラリとの競合を回避します。このようにして、jQueryをパラメーターとして渡すことで、その関数で$を使用することができます。

(function ($) {
   $(function () { // Here in this block you can use '$' in place of jQuery
    .......
   });
})(jQuery); //<----passing jquery to avoid any conflict with other libraries.
9
Jai

即時呼び出し関数式（IIFE）は、JavaScriptのコア機能の1つです。その主な目的は、使い捨ての関数と変数で名前空間を乱雑にすることではありません。

変数または関数を1回だけ使用する場合、残りのコードで使用可能にする必要はありません（したがって、たとえばプライベートアクセスを行います）。関数の場合、次のように関数を匿名にすることができます。

(function(){
  console.log("Hello symfony world!");
}());

このリンクで確認してください

7
Neil

他の回答が指摘したように、それらはすべて自己実行匿名関数または即時匿名関数です。

3番目の例は、関数外の変数のエイリアスを作成するために使用します。これは、名前の競合を防ぎ、関数で使用されるモジュールを簡単に変更できるコードを作成するための良い方法です。これは基本的に依存性注入の形式です。

(function (doc, win, $, myModule) {
    // Code
}(document, window, jQuery, window.MYAPP.myModule));

doc、win、$およびmyModuleは注入された変数です。このパターンでは、注入されたコンポーネントを変更するのは簡単です。このような

(function (doc, win, $, myModule) {
    // Code
}(document, window, jQuery, window.MYAPP.myModule2)); //Use myModule2 instead myModule
4
Hugo Tunius

他のすべての答えが言ったように、3番目の関数では、JQueryを関数に渡します。

少し時間を取って、最初の2つが同じである理由を説明したいと思います。

関数を作成するとき、その関数の名前は実際には 関数ポインター です。たとえば、function foo(){}の場合、fooはユーザーが呼び出す関数へのポインターです。できたばかりです（これは this のようなものを説明します）。関数名の末尾に括弧を追加することにより、そのポインターを間接参照します（したがって、関数を実行します）。foo()。

したがって、コードをもう一度見ると、最初に、関数を作成します。

function () {

    var Book = 'hello';

}

そして、それを逆参照し、関数を効果的に実行します：()

2番目の例では、関数作成の全体を括弧で囲みます。

(function () {

    var Book = 'hello';

})

これにより、次のコマンドの前に作成操作を実行することが保証されます。次のコマンドは、関数()を再度間接参照します。とにかく実行される前に関数が作成されるため、この場合の括弧は実際には必要ありません。

4
MirroredFate

3つの例はすべて即時呼び出し関数式（- [〜＃〜] iife [〜＃〜] ）です。

唯一の違いは、3番目の例ではjQueryが変数として渡され、ドルの命名規則を使用してIIFE内で使用できることです。例えば.

(function ($) {
  var Book = 'hello';
  $('#bookelement').html(Book);
})(jQuery);
3
Andy

これらはすべて自己実行機能です。現在、即時呼び出し関数式（IIFE）とも呼ばれています。

最初の2つはわずかに異なる構文でまったく同じで、3つ目はparameterをjQueryオブジェクトとして渡します。

1
Gurpreet Singh

これらはすべて、自己呼び出し機能の例です。

これにより、明確なビューが得られます。

var my_func = function(){
    var internal_var = "Hello";
    return internal_var;
};

var my_func2 = function(name){
    var internal_var = "Hello";
    return internal_var;
};

var long_var_name = "I can be some object or number or object or array";

var result1 = (my_func());
var result2 = (my_func)();
var result3 = (my_func2)(long_var_name);

console.log(result1, result2, result3);

この例を使用して、First、SecondおよびThirdメソッドと比較できます。

0
Deepak Dixit

実際、3つすべては自己実行機能であり、tiは実際に何をする必要があるかに依存します。

唯一の違いは3の間です。1と2は同じです。

3との違いは、jqueryへの参照を引数として渡すことです。このannoyomus関数内のすべての関数はjqueにアクセスできます

0
Jamie Hutber