1. Aperçu des fonctions anonymes
La première fois que j'ai entendu parler des fonctions anonymes, c'était dans le code source de jquery. La première chose que j'ai vue en ouvrant jQuery était.
Copiez le code comme suit :
(fonction (fenêtre, non définie) {..................................})(fenêtre);
Il s'agit d'une fonction anonyme, avec des paramètres en rouge. La fonction de la fonction anonyme est de créer une zone fermée, et les variables et méthodes à l'intérieur ne sont pas accessibles de l'extérieur.
Puisqu'il n'est pas accessible, comment peut-on appeler jquery ? En effet, la fonction anonyme de jquery contient ces deux phrases (texte bleu) :
Copiez le code comme suit :
(fonction (fenêtre, non défini) {
// Définir une copie locale de jQuery
var jQuery = fonction (sélecteur, contexte) {
// L'objet jQuery n'est en réalité que le constructeur d'initialisation "amélioré"
return new jQuery.fn.init( sélecteur, contexte );
},
.........
fenêtre.jQuery = fenêtre.$ = jQuery ;
})(fenêtre);
Il s'avère que jQuery est passé à window dans la fonction anonyme, c'est pourquoi window est passé lors du passage des paramètres, donc chaque fois que jquery est appelé à l'avenir, l'objet jQuery de window est réellement appelé.
jquery appelle ses propres méthodes. On ne peut pas l'appeler de l'extérieur, ce qui garantit la sécurité et l'absence de conflit.
2. Poursuivons avec le sujet ci-dessus, à propos des plug-ins jQuery
Ce qui suit fait partie du code du contrôle de pagination que j'ai écrit :
Copiez le code comme suit :
;(fonction ($) {
$.fn.tabing = fonction (argument) {
instance = nouveau plugin (this, arg);
} ;
var instance = null ;
fonction Plugin (élément) {
this._tabs = $(élément);
this._tabli = $("a[href*='#']",this._tabs);
this._tabDiv = this._tabs.siblings().filter("div[id*='tab']");
this.init();
}
Plugin.prototype = {
init : fonction(){
this._tabli.addClass("unselected");
this._tabli.eq(0).addClass("selected");
this._tabDiv.css("display","aucun");
this._tabDiv.eq(0).css("display","block");
this._tabli.each(function(){
$(this).bind("clic",function(){
pour(var je = 0;i<instance._tabDiv.length;i++){
instance._tabDiv.eq(i).css("display","none");
}
instance._tabDiv.filter("#"+$(this).attr("href").split('#')[1]).css("display","block");
});
})
}
}
})(jQuery);
Faites attention aux mots rouges. En fait, les plug-ins jQuery écrivent également des fonctions anonymes, ce qui garantit l'indépendance de chaque plug-in. Sinon, cela ne s'appelle pas un plug-in. Les mots rouges $.fn.tabing l'indiquent. il y a une tabulation dans ce plug-in pour le fn de jquery,
De cette façon, l'objet jquery externe peut appeler directement tabing, qui est également le seul contact entre le plug-in et le monde extérieur.
3. Après avoir parlé de l'utilisation des fonctions anonymes par les plug-ins jquery, parlons des fonctions anonymes de window
En fait, jquery lui-même est la fonction anonyme de window, ce qui est le premier point. Alors, comment écrire la fonction anonyme de window ?
Autrement dit, après avoir écrit la fonction anonyme, il existe une interface pour interagir avec la fenêtre dans la fonction, telle que la suivante :
Copiez le code comme suit :
(fonction(){
fonction getObjByID(id){
return document.getElementById(id);
}
fonction __addClass(id,className,classValue){
$(id).style.className=classValue;
}
window.addClass=__addClass;
})();
Regardez également les mots rouges, vous pouvez donc appeler addClass() en dehors de la fonction anonyme, mais vous ne pouvez pas appeler getObjByID().
4. Des fonctions anonymes seront également exécutées lors de l'analyse
comme suit:
Copiez le code comme suit :
fonction Vidéo() { } ;
fonction Film() { } ;
var _video = nouvelle vidéo ();
_video.size = 3 ;
_video.toString = fonction () {
renvoyer « vidéo » ;
} ;
_video.getName = fonction () {
renvoyer "VidéoXXX" ;
} ;
var _movie = nouveau film ();
(fonction (parent, enfant) {
pour (var ele dans le parent) {
if (!child[ele]) //Une copie du parent ne sera copiée que lorsque l'enfant ne contient pas l'attribut ou la méthode.
enfant[ele] = parent[ele];
}
})(_video, _movie); //Comment appeler une fonction anonyme
alerte(_movie.size); //3
alert(_movie.toString()); //[objet Objet]
alerte(_movie.getName()); //VidéoXXX
Les trois alertes ont des résultats, indiquant que la fonction anonyme est exécutée en interne.