Detaillierte Erläuterung der Fähigkeiten von js callback function

Detaillierte Erläuterung der Fähigkeiten von js callback function_javascript

WBOY

Freigeben： 2016-05-16 16:22:13

Original

972 Leute haben es durchsucht

Die Erstellung nativer Apps und Web-Apps ist mittlerweile der Mainstream, was bedeutet, dass verschiedene browserbasierte Web-App-Frameworks immer beliebter werden und diejenigen, die js erstellen, immer vielversprechender werden. Ich habe auch beschlossen, schrittweise von der Back-End-Entwicklung zur Front-End-Entwicklung und zur mobilen Entwicklung überzugehen. Kommen wir nun ohne weitere Umschweife zu den Dingen im Zusammenhang mit „JS-Callback-Funktionen“.

Apropos Rückruffunktionen: Obwohl viele Leute wissen, was sie bedeuten, haben sie immer noch wenig Verständnis dafür. Was die Verwendung angeht, bin ich immer noch etwas verwirrt. Einige relevante Informationen im Internet erklären nicht im Detail, was vor sich geht, und die Erklärung ist relativ einseitig. Im Folgenden spreche ich nur über mein persönliches Verständnis, kritisieren Sie nicht die Großen. Schauen wir uns eine grobe Definition an: „Funktion a hat einen Parameter, der eine Funktion b ist. Wenn Funktion a ausgeführt wird, wird Funktion b ausgeführt. Dann wird dieser Prozess als Rückruf bezeichnet. Dieser Satz bedeutet, dass Funktion b mit Funktion beginnt.“ a wird als Parameter übergeben und ausgeführt. Die Reihenfolge besteht darin, zuerst a und dann Parameter b auszuführen. Schauen wir uns zunächst das folgende Beispiel an.

Code kopieren Der Code lautet wie folgt:

Funktion a(Rückruf){

alarm('a');

​​callback.call(this);//oder callback(), callback.apply(this), je nach persönlicher Präferenz

}

Funktion b(){

alarm('b');

}

//Rufen Sie 
 an
a(b);

Dieses Ergebnis ist, dass zuerst „a“ und dann „b“ angezeigt wird. Ich denke, jemand wird fragen: „Was bringt es, solchen Code zu schreiben? Er scheint keine große Wirkung zu haben!“

Ja, eigentlich halte ich es auch für sinnlos, so zu schreiben: „Wenn Sie eine Funktion aufrufen, rufen Sie sie einfach direkt in der Funktion auf.“ Ich habe gerade ein kleines Beispiel geschrieben, damit jeder ein vorläufiges Verständnis erlangen kann. Beim eigentlichen Schreiben von Code werden solche Parameter selten verwendet, da wir in den meisten Szenarien Parameter übergeben müssen. Hier ist eine mit Parametern:

Code kopieren Der Code lautet wie folgt:

Funktion c(Rückruf){

        warning('c');

​​callback.call(this,'d');

}

//Anruf

c(function(e){

alarm(e);

});

Kommt Ihnen dieser Aufruf bekannt vor? Hier wird dem e-Parameter der Wert „d“ zugewiesen. Tatsächlich kann er auch als Objekt zugewiesen werden. Gibt es einen e-Parameter in Jquery? Lassen Sie uns weiter unten darüber sprechen

Wie der e-Parameter in Jquery per Rückruf zugewiesen wird.

Ich denke, dass jeder mit dem Jquery-Framework vertraut ist. Es ist relativ einfach, die API online zu durchsuchen, und der Einstieg ist schnell. Im JQuery-Framework müssen wir manchmal einige Parameter im Ereignis abrufen. Beispielsweise möchte ich die Koordinaten des aktuellen Klicks und des angeklickten Elementobjekts abrufen. Diese Anforderung ist in Jquery einfach zu handhaben:

Code kopieren Der Code lautet wie folgt:

           $("#id").bind('click',function(e){

                  //e.pageX, e.pageY, e.target... Verschiedene Daten 

        });

Es ist sehr praktisch, die Zuweisung des e-Parameters auch über die Callback-Funktion zu implementieren. Freunde, die den JJquery-Quellcode sorgfältig studiert haben, erhalten einen Objektwert habe das entdeckt.

Das gleiche Prinzip gilt für den Datenparameter in Ajax $.get('',{},function(data){}).

Schauen wir uns an, wie die Callback-Funktion im Jquery-Ereignisobjekt angewendet wird.

Der Einfachheit halber habe ich einfach einige Implementierungen geschrieben, die sich auf $ beziehen. Ich habe zuvor über „Small Talk about Jquery“ geschrieben, das eine Methode hat, die der Framework-Implementierung näher kommt .

Code kopieren Der Code lautet wie folgt:

<script><br>
     var   _$=function (id)<br>
               { <br>
                     this.element=  document.getElementById(id); <br>
                }<br>
       _$.prototype={<br>
            bind:function(evt,callback)<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>
                    }  ,false);<br>
                }<br>
                sonst if(document.attachEvent)<br>
                {<br>
                    this.element.attachEvent('on' evt,function(e){<br>
                        callback.call(this,that.standadize(e));<br>
                    });<br>
                }<br>
                sonst<br>
                    this.element['on' evt]=function(e){<br>
                        callback.call(this,that.standadize(e));<br>
                    };<br>
            },<br>
            standadize:function(e){<br>
                 var  evt=e||window.event;<br>
                 var  pageX,pageY,layerX,layerY;<br>
                 //pageX  横坐标  pageY纵坐标   Layer
                 if(evt.pageX)<br>
                 {<br>
                     pageX=evt.pageX;<br>
                     pageY=evt.pageY;<br>
                 }<br>
                 sonst<br>
                 {<br>
                    pageX=document.body.scrollLeft evt.clientX-document.body.clientLeft;<br>
                    pageY=document.body.scrollTop evt.clientY-document.body.clientLTop;<br>                 }<br>
                 if(evt.layerX)<br>
                 {<br>
                     layerX=evt.layerX;<br>
                     LayerY=evt.layerY;<br>
                 }<br>
                 sonst<br>
                 {<br>
                     LayerX=evt.offsetX;<br>
                     LayerXY=evt.offsetY;<br>
                 }<br>
                 zurück  {<br>
                    pageX:pageX,<br>
                    pageY:pageY,<br>
                    SchichtX:SchichtX,<br>
                    SchichtY:SchichtY<br>
                 }<br>
            }<br>
       }<br>
       window.$=function(id)<br>
       {<br>
          return  new _$(id);<br>
       }<br>
        $('container').bind('click',function(e){<br>
            warning(e.pageX);<br>
        });<br>
        $('container1').bind('click',function(e){<br>
             warning(e.pageX);<br>
        });<br>
</script>

这段代码我们主要看standadize函数的实现,兼容性的代码,就不多说了,返回的是一个对象

复制代码代码如下:

     zurück  {

                    pageX:pageX,

                    pageY:pageY,

                    SchichtX:SchichtX,

                    SchichtY:SchichtY

                 }

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

Rückruf 函数被调用的时候传入的是匿名函数

复制代码代码如下:

         Funktion(e){

        }

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

复制代码代码如下:

(fonction(e){

          })(standadize(e))

C'est également un endroit classique pour Jquery pour utiliser les fonctions de rappel. C'est ainsi que le paramètre e est attribué. Cela dit, vous l'avez peut-être compris et comment l'utiliser.

Les rappels sont largement utilisés dans divers frameworks. Parfois, lorsque vous écrivez quelque chose vous-même, vous pouvez également l'utiliser en fonction de la situation réelle.