web-dev-qa-db-ja.com

！function（$）{$（function（）{}）}（window.jQuery）は何をしますか？

私はTwitter bootstrap=を使用してサイトを作成し、ツールチップを初期化しようとしていました。

 $（ "[rel = tooltip]"）。tooltip（） 
！function（$）{
 
 $（function（）{
 
}）
 
} （window.jQuery）

上記のコードは何をしますか？

jqueryjquery-tooltip
61
Grishma U

コードを分割して説明しましょう

function () {
}()

またはしばしば

(function () {
})()

self-invoking anonymous関数であり、Immediately-Invoked Func­tion Expres­sions（IIFE）とも呼ばれます。匿名関数をすぐにインラインで実行します。

詳細については、 カプセル化された匿名関数の構文の説明 を参照してください。

匿名関数は強力な機能であり、スコープ（「変数名の間隔」）などの利点があります。 javascriptの自己実行関数の目的は？ .

今、彼らは使用しています

function ($) {

}(window.jQuery)

とりあえず!をスキップしましょう。

したがって、それらは引数としてwindow.jQueryをその関数に渡し、$として受け入れています。

これにより、$がwindow.jQuery（元のjQueryオブジェクト）のエイリアスになり、したがって、$がそのclosure内のjQuery objectを常に参照するようになります。他のライブラリが外部（$）を取得しても.

したがって、$を使用してそのクロージャ内に記述したコードは常に機能します。

もう1つの利点は、$が匿名関数の引数として提供されることです。これにより、scope chainにより近いため、グローバルな$を使用した場合よりも、JSインタープリターがクロージャー内で$オブジェクトを見つける時間が短くなります。

$(function(){  

})

既にご存知かもしれませんが、jQueryのドキュメント準備ブロックです。これにより、dom is readyのときにこの関数内のコードが実行され、すべてのevent binding'sが適切に動作します。

詳細は http://api.jquery.com/ready/ をご覧ください

そして、その!が何をするのかはよく説明されています here または 関数の前に感嘆符は何をしますか？

略して：

!の利点を示すために、ケースを考えてみましょう。

(function() {
    alert('first');
}())


(function() {
    alert('second');
}())

上記のコードをconsoleに貼り付けると、2つのアラートが表示されますが、このエラーが表示されます

TypeError: undefined is not a function

なぜこれが起こるのですか？ JSエンジンが上記のコードブロックを実行する方法をシミュレートしましょう。この匿名関数を実行しますfunction() {alert('first');}()はアラートを表示し、何も返さないので、()内でundefinedが返されます。 2番目の関数でも同じことが起こります。したがって、このブロックの実行後、次のような結果になります

(undefined)(undefined)

また、構文はself-invoking anonymous関数に似ているため、その関数を呼び出そうとしますが、最初の(undefined)は関数ではありません。したがって、undefined is not a functionエラーが発生します。 !はこの種類またはエラーを修正します。 !で何が起こるか。上記の回答リンクの行を引用しています。

！を使用すると、関数は単項（論理）NOT演算子の単一オペランドになります。

これにより、関数が式として評価され、インラインですぐに呼び出されます。

これにより上記の問題が解決します。次のように!を使用して上記のブロックを書き換えることができます。

!(function() {
    alert('first');
}())


!(function() {
    alert('second');
}())

あなたの場合は、このようなドキュメントの準備ができているブロック内にツールチップコードを置くことができます

$(function(){  
    $("[rel=tooltip]").tooltip();  
});

そしてそれはうまく動作します。

doc ready blockなしで$("[rel=tooltip]").tooltip()を使用する場合、このコードが実行される可能性があります。DOMにはrel=tooltipを持つ要素はまだありません。したがって、$("[rel=tooltip]")は空のセットを返し、tooltipは機能しません。

doc ready blockなしでは機能しない場合のマークアップの例、

.
.
.
<script type="text/javascript">
    $("[rel=tooltip]").tooltip();
</script>
.
.
.
.
<a href="#" rel="tooltip">Something</a>
<a href="#" rel="tooltip">Something</a>
<a href="#" rel="tooltip">Something</a>

ブラウザがマークアップを順番に解釈すると、それに直面するとすぐにjsコードを実行します。ここでJSブロックを実行するとき、JSブロックの後に表示されるように、a rel="tooltip"タグはまだ解析されていません。したがって、それらはDOMにありません。

したがって、上記の場合、$("[rel=tooltip]")は空であるため、ツールチップは機能しません。したがって、すべてのJSコードを次のようにdocument readyブロック内に置くことは常に安全です

$(function){
    // put all your JS code here
});

これがすべてあなたに今理にかなっていることを望みなさい。

162
Prasenjit Kumar Nag