De nos jours, les applications natives et les applications Web sont le courant dominant, ce qui signifie que divers cadres d'applications Web basés sur un navigateur deviennent de plus en plus populaires, et ceux qui font JS deviennent de plus en plus prometteurs. J'ai également décidé de passer progressivement du développement arrière au développement frontal et au développement mobile. Ne parlons pas de bêtises, passons au sujet de la "fonction de rappel JS".
En parlant de fonctions de rappel, bien que beaucoup de gens connaissent le sens, ils n'ont encore que quelques compréhensions. Quant à comment l'utiliser, c'est toujours un peu confus. Certaines choses connexes sur Internet n'ont pas expliqué en détail ce qui s'est passé, et ils sont plus unilatéraux. Ensuite, je vais simplement parler de ma compréhension personnelle, ne me critiquez pas. Jetons un coup d'œil à une définition approximative "La fonction a a un paramètre, et ce paramètre est une fonction b. Lorsque la fonction a est exécutée, la fonction B est exécutée. Ensuite, ce processus est appelé un rappel." Cette phrase signifie que la fonction B est transmise dans la fonction A sous la forme d'un paramètre et exécutée dans l'ordre de l'exécution d'un premier, puis d'exécution des paramètres B, B est la soi-disant fonction de rappel. Examinons d'abord l'exemple suivant.
La copie de code est la suivante:
fonction a (rappel) {
alert ('a');
callback.call (this); // ou callback (), callback.apply (this), selon les préférences personnelles
}
fonction b () {
alert ('b');
}
//Appel
a (b);
Le résultat est que «A» apparaît en premier et «B» apparaît. De cette façon, quelqu'un pourrait demander: "Quel est l'intérêt d'écrire un tel code? Cela ne semble pas être très utile!"
Oui, je pense en fait qu'il n'a pas de sens d'écrire comme ça, "Si vous appelez une fonction, appelez-le directement dans la fonction." J'écris simplement un petit exemple pour vous donner une compréhension préliminaire. Ce type de paramètre sans paramètre est rarement utilisé dans le processus d'écriture de code, car dans la plupart des scénarios, nous devons passer des paramètres. Voici un paramètre:
La copie de code est la suivante:
fonction c (rappel) {
alerte ('c');
callback.call (this, 'd');
}
//Appel
c (fonction (e) {
alerte (e);
});
Cet appel semble-t-il familier? Ici, le paramètre E est affecté à «D». Nous attribuons simplement la valeur à des gicleurs de caractère, mais en fait, nous pouvons également attribuer la valeur aux objets. Y a-t-il un paramètre E dans jQuery? Parlons-en ci-dessous
Comment le paramètre E est-il attribué par un rappel?
Je pense que tout le monde connaît le framework jQuery. Il est libéré depuis longtemps et est utilisé pendant le développement. C'est relativement simple. Il est très pratique de rechercher l'API en ligne et il est facile de commencer. Dans le cadre du framework jQuery, nous devons parfois obtenir des paramètres dans l'événement, tels que les coordonnées du clic actuel et de l'objet élément du clic. Cette exigence est facile à gérer dans jQuery:
La copie de code est la suivante:
$ ("# id"). bind ('click', fonction (e) {
//e.pagex, e.pagey, e.target ...... diverses données
});
Il est tout à fait pratique à utiliser. En fait, l'affectation de ce paramètre E est également réalisée via la fonction de rappel. Ce paramètre lui est attribué une valeur d'objet à l'aide du paramètre de rappel. Les amis qui ont soigneusement étudié le code source JjQuery auraient dû le découvrir.
Il existe également le même principe dans le paramètre de données $ .get ('', {}, fonction (données) {}).
Jetons un coup d'œil à la façon dont la fonction de rappel est appliquée dans l'objet JQuery Event.
Pour plus de commodité, j'ai simplement écrit sur certaines implémentations liées à $. J'ai déjà écrit que "Xiaotan jQuery" a une méthode relativement proche de l'implémentation du cadre. J'écris juste un simple sélecteur ci-dessous.
La copie de code est la suivante:
<div id = "conteneur">
</div>
<cript>
var _ $ = fonction (id)
{
this.element = document.getElementById (id);
}
_ $. Prototype = {
lier: fonction (evt, rappel)
{
var that = this;
if (document.addeventListener)
{
this.element.addeventListener (evt, fonction (e) {
callback.call (this, that.standadize (e));
} ,FAUX);
}
else if (document.attachevent)
{
this.element.attachevent ('on' + evt, fonction (e) {
callback.call (this, that.standadize (e));
});
}
autre
this.element ['on' + evt] = fonction (e) {
callback.call (this, that.standadize (e));
};
},
standadize: fonction (e) {
var evt = e || window.event;
var Pagex, Pagey, Layerx, Layery;
// coordonnée horizontale Pagey coordonnée verticale CLACHEX CLICT est situé à la coordonnée horizontale Layery Click est situé à la coordonnée verticale de l'élément
if (evt.pagex)
{
pagex = evt.pagex;
Pagey = evt.Pagey;
}
autre
{
pagex = document.body.scrollleft + evt.clientx-document.body.clientLeft;
Pagey = document.body.scrolltop + evt.clienty-document.body.clientltop;
}
if (evt.layerx)
{
couchex = evt.layerx;
Layery = evt.Layery;
}
autre
{
couchex = evt.offsetx;
couchexy = evt.offsety;
}
retour {
Pagex: Pagex,
Pagey: Pagey,
couchex: couchex,
Layery: Layery
}
}
}
fenêtre. $ = fonction (id)
{
retourner nouveau _ $ (id);
}
$ ('conteneur'). bind ('click', fonction (e) {
alerte (e.pagex);
});
$ ('contener1'). bind ('click', fonction (e) {
alerte (e.pagex);
});
</cript>
Nous examinons principalement la mise en œuvre de la fonction standadize. Je ne dirai pas grand-chose sur ce code, l'objet de retour est
La copie de code est la suivante:
retour {
Pagex: Pagex,
Pagey: Pagey,
couchex: couchex,
Layery: Layery
}
Regardez ensuite le code callback.Call (ceci, that.standadize (e)) dans la fonction de liaison. Ce code est en fait attribué une valeur au paramètre E, qui est implémenté à l'aide d'un rappel de rappel.
La fonction anonyme est transmise lorsque la fonction de rappel est appelée
La copie de code est la suivante:
fonction (e) {
}
callback.Call (ceci, that.standadize (e)) équivaut à l'exécution d'un tel morceau de code
La copie de code est la suivante:
(fonction (e) {
}) (standadize (e))
C'est aussi la chose classique à propos de jQuery à l'aide de fonctions de rappel. C'est ainsi que le paramètre E est attribué. Après avoir dit cela, vous avez probablement une bonne compréhension de cela et de la façon de l'utiliser.
Les rappels sont utilisés plus fréquemment dans divers cadres. Parfois, lorsque vous écrivez quelque chose par vous-même, vous pouvez également l'utiliser en fonction de la situation réelle.