Explication détaillée des compétences de rappel js function_javascript

La création d'applications Web et d'applications natives est désormais courante, ce qui signifie que divers frameworks d'applications Web basés sur un navigateur deviennent de plus en plus populaires, et ceux qui font du js deviennent de plus en plus prometteurs. J’ai également décidé de passer progressivement du développement back-end au développement front-end et au développement mobile. Sans plus tarder, venons-en aux choses liées aux « fonctions de rappel js ».

En parlant de fonctions de rappel, même si beaucoup de gens savent ce qu'elles signifient, ils ne comprennent toujours pas grand-chose. Quant à savoir comment l'utiliser, je suis encore un peu confus. Certaines informations pertinentes sur Internet n'expliquent pas en détail ce qui se passe et l'explication est relativement unilatérale. Ci-dessous, je parle juste de ma compréhension personnelle, ne critiquez pas les grands. Jetons un coup d'œil à une définition approximative : "La fonction a a un paramètre, qui est une fonction b. Lorsque la fonction a est exécutée, la fonction b est exécutée. Ensuite, ce processus est appelé rappel. " Cette phrase signifie que la fonction b commence par Function. a est transmis en tant que paramètre et exécuté. L'ordre est d'exécuter a en premier, puis d'exécuter le paramètre b est ce qu'on appelle la fonction de rappel. Regardons d'abord l'exemple suivant.

Copier le code Le code est le suivant :

fonction a(rappel){
alerte('a');
​​ callback.call(this);//ou callback(), callback.apply(this), selon vos préférences personnelles
>
fonction b(){
alerte('b');
>
//Appeler
une(b);

Ce résultat est que « a » apparaît en premier, puis « b » apparaît. Je suppose que quelqu'un demandera : « À quoi ça sert d'écrire un tel code ? Cela ne semble pas avoir beaucoup d'effet ! »

Oui, en fait, je pense aussi que cela n'a aucun sens d'écrire ainsi : "Si vous appelez une fonction, appelez-la simplement directement dans la fonction." Je viens d'écrire un petit exemple pour que tout le monde puisse avoir une compréhension préliminaire. Dans le processus d'écriture du code, ces paramètres sont rarement utilisés, car dans la plupart des scénarios, nous devons transmettre des paramètres. En voici un avec des paramètres :

Copier le code Le code est le suivant :

fonction c(rappel){
        alert('c');
​​ callback.call(this,'d');
>
//Appeler
c(fonction(e){
alerte(e);
});

Cet appel vous semble-t-il familier ? Ici, le paramètre e reçoit la valeur 'd'. Nous l'attribuons simplement en tant que caractère. En fait, il peut également être attribué en tant qu'objet. Y a-t-il un paramètre e dans Jquery ? Parlons-en ci-dessous
Comment le paramètre e dans Jquery est attribué par rappel.

Je pense que tout le monde connaît le framework Jquery. Il existe depuis longtemps et est utilisé lors du développement. Il est relativement simple de rechercher l'API en ligne et sa prise en main est rapide. Dans le framework Jquery, nous avons parfois besoin d'obtenir certains paramètres dans l'événement. Par exemple, je souhaite obtenir les coordonnées du clic en cours et de l'objet élément cliqué. Cette exigence est facile à gérer dans Jquery :

Copier le code Le code est le suivant :

           $("#id").bind('click',function(e){
                  //e.pageX, e.pageY, e.target... Données diverses
        });

C'est assez pratique à utiliser. En fait, l'affectation du paramètre e est également implémentée via la fonction de rappel. Ce paramètre reçoit une valeur d'objet à l'aide du paramètre de rappel. Les amis qui ont soigneusement étudié le code source de JJquery. découvert cela.

Le même principe s'applique au paramètre data en Ajax $.get('',{},function(data){}).

Voyons comment la fonction de rappel est appliquée dans l'objet événement Jquery.

Par souci de commodité, j'ai simplement écrit quelques implémentations liées à $ que j'ai déjà écrites sur "Small Talk about Jquery", qui a une méthode plus proche de l'implémentation du framework. J'écrirai simplement un simple sélecteur ci-dessous. .

Copier le code Le code est le suivant :

<script><br>      var   _$=fonction (id)<br>                { <br>                      this.element=  document.getElementById(id); <br>                 ><br>        _$.prototype={<br>             liaison:fonction(evt,rappel)<br>             {<br>                 var   that=this;<br>                 if(document.addEventListener)<br>                 {<br>                     this.element.addEventListener(evt, function(e){<br>                         callback.call(this,that.standadize(e));<br>                     }  ,faux);<br>                 ><br>                 sinon si(document.attachEvent)<br>                 {<br>                     this.element.attachEvent('on' evt,function(e){<br>                         callback.call(this,that.standadize(e));<br>                     });<br>                 ><br>                 d'autre<br>                     this.element['on' evt]=function(e){<br>                         callback.call(this,that.standadize(e));<br>                     };<br>             },<br>             standadize:fonction(e){<br>                  var  evt=e||window.event;<br>                  var  pageX,pageY,layerX,layerY;<br>                  //pageX  横坐标  pageY纵坐标   layerX点击处位于元素的横坐标   layerY点击处位于元素的纵坐标<br>                  si(evt.pageX)<br>                  {<br>                      pageX=evt.pageX;<br>                      pageY=evt.pageY;<br>                  ><br>                  d'autre<br>                  {<br>                     pageX=document.body.scrollLeft evt.clientX-document.body.clientLeft;<br>                     pageY=document.body.scrollTop evt.clientY-document.body.clientLTop;<br>                 ><br>                  si(evt.layerX)<br>                  {<br>                      layerX=evt.layerX;<br>                      layerY=evt.layerY;<br>                  ><br>                  d'autre<br>                  {<br>                      layerX=evt.offsetX;<br>                      layerXY=evt.offsetY;<br>                  ><br>                  revenir  {<br>                     pageX:pageX,<br>                     pageY:pageY,<br>                     coucheX:coucheX,<br>                     coucheY:coucheY<br>                  ><br>             ><br>        ><br>        window.$=function(id)<br>        {<br>           return  new _$(id);<br>        ><br>         $('conteneur').bind('clic',function(e){<br>             alerte(e.pageX);<br>         });<br>         $('container1').bind('clic',function(e){<br>              alerte(e.pageX);<br>         });<br> </script>

复制代码 代码如下 :

     revenir  {

                    pageX:pageX,
                    pageY:pageY,
                    coucheX:coucheX,
                    coucheY:coucheY
                 >

 然后再看bind函数里面的代码    callback.call(this,that.standadize(e)),这段代码其实就是给e参数赋值了，是用callback回调实现的。

rappel 函数被调用的时候传入的是匿名函数

复制代码 代码如下 :

         fonction(e){

        >

而callback.call(this,that.standadize(e))相当于是执行了这么一段代码 

复制代码 代码如下 :

        (function(e){
        })(standadize(e))

   這也是Jquery用回呼函數比較經典的地方，e參數就是這麼被賦值的，說了這些你們也大概有個了解了，以及怎麼使用了。

    回呼在各種框架中應用的比較多，有時候自己寫一些東西的時候也可以根據實際情況用用看。