Que fait! Function ($) {$ (function () {})} (window.jQuery)?
J'utilise Twitter bootstrap pour créer un site et essayais d'initialiser les info-bulles. En plus d'ajouter quelque chose comme:
$ ("[rel = info-bulle]"). tooltip ()
! fonction ($) {
$ (fonction () {
})
} (window.jQuery)
Que fait le code ci-dessus?
Expliquons en brisant le code
function () {
}()
Ou souvent écrit comme
(function () {
})()
Est une fonction self-invoking anonymous, Également appelée Expressions de fonction immédiatement appelées (IIFE) . Qui exécute la fonction anonyme en ligne immédiatement.
Pour en savoir plus, consultez Expliquez la syntaxe de la fonction anonyme encapsulée .
Les fonctions anonymes sont une fonctionnalité puissante et présentent des avantages tels que la portée ("espacement des noms de variables"), voir Quel est le but d'une fonction auto-exécutable en javascript? .
Maintenant, ils utilisent
function ($) {
}(window.jQuery)
Ignorons le ! Pour l'instant.
Ils passent donc window.jQuery Dans cette fonction comme argument et acceptent comme $.
Cela fait de $ Un alias pour window.jQuery (Objet jQuery d'origine) et garantit ainsi que $ Fera toujours référence au jQuery object À l'intérieur de ce closure, peu importe si une autre bibliothèque a pris cela ($) à l'extérieur.
Le code que vous écrivez à l'intérieur de cette fermeture en utilisant $ Fonctionnera toujours.
Un autre avantage est que $ Vient comme un argument dans la fonction anonyme, ce qui le rapproche dans le scope chain Et donc cela prend moins de temps à l'interpréteur JS pour trouver le $ objet à l'intérieur de la fermeture qu'il ne le ferait autrement si nous utilisions le $ global.
$(function(){
})
C'est le bloc prêt pour le document de jQuery comme vous le savez peut-être déjà, ce qui garantit que le code à l'intérieur de cette fonction s'exécutera lorsque dom is ready, Et donc tous event binding's Fonctionneront correctement.
En savoir plus sur http://api.jquery.com/ready/
Et ce que fait ! A été bien expliqué ici ou à Que fait le point d'exclamation avant la fonction?
En bref:
Pour démontrer les avantages de !, Considérons un cas,
(function() {
alert('first');
}())
(function() {
alert('second');
}())
Si vous collez le code ci-dessus dans console, vous obtiendrez deux alertes, mais vous obtiendrez cette erreur
TypeError: undefined is not a function
Pourquoi ça arrive? Simulons comment les moteurs JS exécutent le bloc de code ci-dessus. Il exécute cette fonction anonyme function() {alert('first');}() affiche l'alerte et comme il ne renvoie rien undefined est retourné dans le (). Il en va de même pour la deuxième fonction. Donc, après l'exécution de ce bloc, il finit par avoir quelque chose comme
(undefined)(undefined)
et comme sa syntaxe ressemble à une fonction self-invoking anonymous, elle essaie d'appeler cette fonction, mais la première, (undefined) n'est pas une fonction. Vous obtenez donc une erreur undefined is not a function. ! Corrige ce type ou des erreurs. Que se passe-t-il avec !. Je cite les lignes du lien de réponse ci-dessus.
Lorsque vous utilisez!, La fonction devient l'opérande unique de l'opérateur NOT unaire (logique).
Cela force la fonction à être évaluée comme une expression, ce qui lui permet d'être invoquée immédiatement en ligne.
et cela résout le problème ci-dessus, nous pouvons réécrire le bloc ci-dessus en utilisant ! comme
!(function() {
alert('first');
}())
!(function() {
alert('second');
}())
Pour votre cas, vous pouvez simplement mettre votre code d'infobulle dans un bloc prêt pour le document comme celui-ci
$(function(){
$("[rel=tooltip]").tooltip();
});
et cela fonctionnera bien.
Et si vous utilisez simplement $("[rel=tooltip]").tooltip() sans doc ready block, Alors il y a une chance que ce code s'exécute, il n'y a pas encore d'élément avec rel=tooltip Dans DOM. Donc $("[rel=tooltip]") renverra un ensemble vide et tooltip ne fonctionnera pas.
Un exemple de balisage quand cela ne fonctionnera pas sans 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>
En tant que navigateur, interprète le balisage de manière séquentielle, il exécutera le code js dès qu'il y sera confronté. Et quand il exécute le bloc JS ici, il n'a pas encore analysé les balises a rel="tooltip", Comme il apparaît après le bloc JS, donc ils ne sont pas dans DOM à ce moment.
Donc, dans le cas ci-dessus, $("[rel=tooltip]") est vide et donc l'infobulle ne fonctionnera pas. Il est donc toujours sûr de mettre tout votre code JS dans le bloc document ready Comme
$(function){
// put all your JS code here
});
J'espère que tout cela a du sens pour vous maintenant.