61

Twitterブートストラップを使用してサイトを作成し、ツールチップを初期化しようとしていました。次のようなものを追加することは別として：

$（ "[rel = tooltip]"）。tooltip（）
application.jsでは、ブートストラップドキュメントで使用されている次のコードを保持しない限り、ツールチップは初期化されません。

！関数（$）{

  $（function（）{  

  }）

}（window.jQuery）

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

4

1 に答える 1

164

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

function () {
}()

またはしばしば次のように書かれます

(function () {
})()

即時呼び出し関数式（IIFE）self-invoking anonymousとも呼ばれる関数です。匿名関数をすぐにインラインで実行します。

これについて詳しくは、カプセル化された無名関数の構文の説明をご覧ください。

匿名関数は強力な機能であり、スコープ（「変数名の間隔」）などの利点があります。JavaScriptの自己実行関数の目的は何ですか？を参照してください。。

今彼らは使用しています

function ($) {

}(window.jQuery)

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

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

これは、 （元のjQueryオブジェクト）$のエイリアスを作成することで、他のライブラリがthat（）を外部に持っているかどうかに関係なく、が常にその内部を参照するようにします。window.jQuery$jQuery objectclosure$

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

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

$(function(){  

})

すでにご存知かもしれませんが、これはjQueryのドキュメント対応ブロックであり、この関数内のコードが。のときdom is readyに実行されるため、すべてevent binding'sが正しく機能します。

詳細については、http：//api.jquery.com/ready/をご覧ください。

そして、それはここで、または機能の前に感嘆符は何をするのかで!よく説明されていますか？

要するに：

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

(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();  
});

そしてそれはうまくいくでしょう。

また、を使用$("[rel=tooltip]").tooltip()せずに使用doc ready blockした場合、このコードが実行される可能性がありrel=tooltipます。DOMにはまだ要素がありません。したがって$("[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]")は空であるため、ツールチップは機能しません。document readyしたがって、すべてのJSコードを次のようにブロック内に配置することは常に安全です。

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

これがすべてあなたにとって理にかなっていることを願っています。

于 2012-06-05T12:02:16.460 に答える