jQueryを使用したJavaScriptの一部の機能表記

Question

JavaScriptで表示されている構文に関する質問があります。

以下のようなコンテキスト内で関数や変数を定義するとどういう意味ですか？ （ソース：http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/）

(function($) { 
    $.confirm = function() { 
    ... 
    } 

    $.confirm.hide = function() { 
    ... 
    } 
})(jQuery); 

また、$.は機能$.confirmに何を意味するの？また、$.confirm.hideで、私はいくつかのjQueryオブジェクトが関わっていると感じます。

Answer 1

括弧で関数をラップし、より多くの親に使用して実行します。(function() {])();はすぐに呼び出される関数です。第2セットのparensの中でjQueryを渡すことによって、あなたは$として渡されているパラメーターを渡します。

$.confirmは、JavaScriptで使用される典型的な変数から際立っているので、ショートカット変数として$を使用し、jQueryのようなjQueryオブジェクト

(function($) { // $ = jQuery 
    $.confirm = function() { // <-- set method of jQuery 
    ... 
    } 


    $.confirm.hide = function() { // <-- set method of confirm 
    ... 
    } 

    // usage 
    $.confirm(); 
    // or 
    jQuery.confirm(); 
})(jQuery); // pass in the jQuery object to the function via immediate invocation 

多くの図書館のちょうど方法です。

Answer 2

コードは、匿名関数を作成し、それを引数としてjQueryで呼び出します。これはJavaScriptで有効な変数名、関数はそれにプロパティを追加して

function addProperties($) { 
    $.confirm = function() { 
    ... 
    } 

    $.confirm.hide = function() { 
    ... 
    } 
} 
addProperties(jQuery); 

$と同じです。

function addProperties(j) { 
    j.confirm = function() { 
    ... 
    } 

    j.confirm.hide = function() { 
    ... 
    } 
} 
addProperties(jQuery); 

jQueryのオブジェクトであり、ドット演算子を使用してそのプロパティにアクセスする：それは同じです。あなたは、あなたの質問に基づいてjQueryのに関するいくつかの誤解があるかもしれません

var apple = { 
    color: 'red', 
    height: 55, 
    foodType: 'fruit' 
}; 

alert(apple.foodType); // alerts 'fruit' 

：例えば、リンゴのオブジェクトは、次のようになります。 jQueryはjavascriptの機能ではありません。jQueryという大きなオブジェクトを作成するコードライブラリですが、$という名前でアクセスすることもできます。

Answer 3

$スコープを作成するために使用される関数へのパラメータの名前であり、そしてそれはjQueryオブジェクトと呼ばれているため、$スコープ内部jQueryに等しくなります。 （デフォルトではグローバル名$もjQueryが割り当てられていますが、スコープを使用して、この方法は、jQueryのグローバル$識別子が設定されていない互換モードで使用されている場合でも、あなたはその中$を使用できるようになります。）だから、

実際にjQuery.confirmにそれを割り当てようとすると、$.confirmに機能を割り当てます。

関数はJavascriptのオブジェクトであるため、それらにプロパティを追加できます。そのため、の$.confirm.hideに機能を割り当てることができます。

コードが実行された後、jQuery.confirm関数とjQuery.confirm.hide関数を呼び出すことができます。

Answer 4

関数や変数を次のようなコンテキストの中に定義するとどういう意味ですか？

これは、関数を定義し、理想的には地球の汚染を防ぐことを意味します（残念なことに、実際には地球温暖化に役立たない）。そこがたくさん起こっているので、私はいくつかの部分にそれを分割しようとするでしょう：

(function($) { 
    $.confirm = function() { 
    ... 
    } 

    $.confirm.hide = function() { 
    ... 
    } 
})(jQuery); 

パート1 - 閉鎖

JavaScriptが他のほとんどのCスタイルの言語のようではありません、ブロック新しい変数スコープを取得しないでください。

他のいくつかのCスタイルの擬似コード

function foo() { 
    var a = 1; 
    if (somecondition) { 
    var b = 2; 
    output(a, b); //1, 2 
    } 
    output(a, b); //throws some sort of exception because 'b' isn't defined. 
} 

はJavaScript：

function foo() { 
    var a = 1; 
    if (somecondition) { 
    var b = 2; 
    output(a, b); //1, 2 
    } 
    output(a, b); //1, 2 due to variable hoisting 
} 

JavaScriptで多くのCスタイルの言語では、ブロック内で定義された変数は、そのブロック内に存在します変数はブロックスコープを持たず、機能スコープを持ちます。定義された変数は、その最初の関数の祖先が所有します。変数のインスタンス化は、スクリプトが解析されたときに関数の先頭に移動されます（これは「変数の巻上げ」と呼ばれます）。foo（上記参照）を書いたかもしれませんが、実際には次のように解釈されます。変数の親機能がない場合は

function foo() { 
    var a, b; 
    a = 1; 
    if (somecondition) { 
    b = 2; 
    output(a, b); 
    } 
    output(a, b); 
} 

、Webブラウザでwindowあるグローバルオブジェクトに追加されます：

<script> 
var a = 1; 
output(window.a); //1 - set because there's no parent function 
</script> 

機能がfunction [some name]() {...}が同様に処理されている使用して宣言しました。あなたが大規模なプロジェクトで作業し、すべての変数は親関数なしで定義されている場合

<script> 
    function foo() {return 1;} 
    output(window.foo()); //1 
</script> 

、複数のプログラマはvar fooを使用するかもしれない、とバギーと不安定なコードにつながるwindow.fooを、上書きされます。

JavaScriptが自己実行匿名関数を作成することができます：それは変数と関数はグローバル名前空間を汚染せずに定義することが可能な新機能のコンテキストを作成するため

(function(){})(); 
-or- 
(function() {}()); 

これは便利です。このような関数は、を閉じる変数/関数のセットを介してをクロージャと呼びます。

パラメータは他の関数と同様に定義することができ、パラメータは最後の括弧内の関数に渡されます。

(function ($) { 
    ... 
}(jQuery)); 

新しい関数コンテキストが作成され、jQueryの変数$にコンテキストに渡されている：これは、コードのあなたの最初と最後の行について説明します。これは、ショートカットのエイリアシングに使用されます。ショートカットは、変数名と関数名の有効な文字である$です。

パート2 - すべてがJavaScriptでのオブジェクト

すべてがnullとundefinedを除いて、オブジェクトであるのです。変更可能なオブジェクトにはプロパティとメソッドが設定できます。オブジェクトリテラル（{}）、配列リテラル（[]）、関数（function(){}）、およびコンストラクタを使用して作成されたオブジェクト（new String('foo')）はすべて可変オブジェクトです。

var a = {}; 
a.foo = 'bar'; 

function b() {} 
b.fizz = 'buzz'; 

これはfunctionあり、そして$にエイリアスされたjQueryオブジェクトは、新しいプロパティが追加していることを意味します

$.confirm = function() {...}; 

また、新しい$.confirm機能が作成された後、

$.confirm.hide = function() {...}; 

あなたはを呼び出すしたい場合：$.confirmは性質を持つことができるオブジェクトが追加されますクロージャの外機能、次のように記述します。

jQuery.confirm(); 

を使用すると、クロージャの外hide関数を呼び出すしたい場合は、あなたが書いたと思います：

jQuery.confirm.hide(); 

_{1：ブロックでありますコードの一部がif (...) {/* block region */},switch() {}、function() {}、while() {}など{}文字に含まれています。新しいオブジェクトをインスタンス化するオブジェクトリテラルとブロックを混同しないでください。
2：グローバル名前空間の汚染は、単に私がこれと同じ質問が最後の週に12回を頼まれた賭け通常window}