Penjelasan terperinci tentang kemahiran function_javascript panggilan balik js

Menjadikan Apl asli dan Apl Web kini menjadi arus perdana, yang bermakna pelbagai rangka kerja aplikasi web berasaskan penyemak imbas menjadi semakin popular dan mereka yang melakukan js menjadi semakin menjanjikan. Saya juga memutuskan untuk beralih secara beransur-ansur daripada pembangunan bahagian belakang kepada pembangunan bahagian hadapan dan pembangunan mudah alih Tanpa berlengah lagi, mari kita sampai ke perkara yang berkaitan dengan "fungsi panggilan balik js".

Bercakap tentang fungsi panggil balik, walaupun ramai yang tahu maksudnya, mereka masih kurang faham. Mengenai cara menggunakannya, saya masih keliru. Sesetengah maklumat yang berkaitan di Internet tidak menerangkan secara terperinci apa yang sedang berlaku, dan penjelasannya agak berat sebelah. Di bawah ini saya hanya bercakap tentang pemahaman peribadi saya, jangan kritik orang besar. Mari kita lihat definisi kasar: "Fungsi a mempunyai parameter, iaitu fungsi b. Apabila fungsi a dilaksanakan, fungsi b dilaksanakan. Kemudian proses ini dipanggil panggil balik Ayat ini bermaksud fungsi b bermula dengan Fungsi a diluluskan sebagai parameter dan dilaksanakan Perintahnya adalah untuk melaksanakan yang pertama, dan kemudian melaksanakan parameter b ialah apa yang dipanggil fungsi panggil balik. Mari kita lihat contoh berikut dahulu.

Salin kod Kod adalah seperti berikut:

fungsi a(panggilan balik){
makluman('a');
​​callback.call(this);//or callback(), callback.apply(this), bergantung pada pilihan peribadi
}
fungsi b(){
makluman('b');
}
//Panggil
a(b);

Keputusan ini ialah 'a' muncul dahulu, dan kemudian 'b' muncul. Saya rasa seseorang akan bertanya, "Apa gunanya menulis kod sedemikian? Nampaknya tidak banyak kesan!"

Ya, sebenarnya saya juga fikir ia tidak bermakna untuk menulis seperti ini, "Jika anda memanggil fungsi, panggil saja terus dalam fungsi." Saya hanya menulis contoh kecil untuk semua orang mendapat pemahaman awal. Dalam proses menulis kod sebenarnya, parameter sedemikian jarang digunakan, kerana dalam kebanyakan senario, kita perlu lulus parameter. Ini yang mempunyai parameter:

Salin kod Kod adalah seperti berikut:

fungsi c(panggil balik){
        makluman('c');
​​callback.call(this,'d');
}
//Panggil
c(fungsi(e){
makluman(e);
});

Adakah panggilan ini kelihatan biasa? Di sini parameter e diberikan nilai 'd'. Malah, ia juga boleh ditetapkan sebagai objek. Adakah terdapat juga parameter e dalam Jquery? Mari kita bincangkan di bawah

Bagaimana parameter e dalam Jquery diberikan melalui panggilan balik.

Saya rasa semua orang sudah biasa dengan rangka kerja Jquery Ia telah lama dikeluarkan dan digunakan semasa pembangunan Ia adalah sangat mudah untuk mencari API dalam talian dan ia adalah pantas untuk bermula. Dalam rangka kerja Jquery, kadangkala kita perlu mendapatkan beberapa parameter dalam acara tersebut. Contohnya, saya ingin mendapatkan koordinat klik semasa dan objek elemen yang diklik. Keperluan ini mudah dikendalikan dalam Jquery:

Salin kod Kod adalah seperti berikut:

           $("#id").bind('klik',fungsi(e){
                  //e.pageX, e.pageY, e.target... Pelbagai data
});

Ia agak mudah digunakan Malah, penetapan parameter e juga dilaksanakan melalui fungsi panggil balik Parameter ini diberikan nilai objek menggunakan parameter panggilan balik yang sepatutnya ada menemui ini.

Prinsip yang sama digunakan pada parameter data dalam Ajax $.get('',{},function(data){}).

Mari kita lihat bagaimana fungsi panggil balik digunakan dalam objek acara Jquery.

Demi kemudahan, saya hanya menulis beberapa pelaksanaan yang berkaitan dengan $ yang telah saya tulis tentang "Small Talk about Jquery" sebelum ini, yang mempunyai kaedah yang lebih dekat dengan pelaksanaan rangka kerja di bawah.

Salin kod Kod adalah seperti berikut:

     var   _$=fungsi (id)
               {
                     this.element=  document.getElementById(id);
                }
       _$.prototaip={
            bind:function(evt,callback)
            {
                var   that=this;
                if(document.addEventListener)
                {
                    this.element.addEventListener(evt, function(e){
                        callback.call(this,that.standadize(e));
                    }  ,palsu);
                }
                else if(document.attachEvent)
                {
                    this.element.attachEvent('on' evt,function(e){
                        callback.call(this,that.standadize(e));
                    });
                }
                lain
                    this.element['on' evt]=function(e){
                        callback.call(this,that.standadize(e));
                    };
            },
            standardize:function(e){
                 var  evt=e||window.event;
                 var  pageX,pageY,layerX,layerY;
                 //pageX  横坐标  pageY纵坐标   layerX点击处位于元素的横坐标   layerY点击处位于元素的纵坐标                  if(evt.pageX)
                 {
                     pageX=evt.pageX;
                     pageY=evt.pageY;
                 }
                 lain
                 {
                    pageX=document.body.scrollLeft evt.clientX-document.body.clientLeft;
                    pageY=document.body.scrollTop evt.clientY-document.body.clientLTop;
                 }
                 if(evt.layerX)
                 {
                     layerX=evt.layerX;
                     layerY=evt.layerY;
                 }
                 lain
                 {
                     layerX=evt.offsetX;
                     layerXY=evt.offsetY;
                 }
                 kembali  {
                    pageX:pageX,
                    pageY:pageY,
                    layerX:layerX,
                    layerY:layerY
                 }
            }
       }
       tetingkap.$=function(id)
       {
          kembalikan  baru _$(id);
       }
        $('bekas').bind('klik',fungsi(e){
            makluman(e.pageX);
        });
        $('container1').bind('klik',fungsi(e){
             makluman(e.pageX);
        });

这段代码我们主要看standadize函数的实现，兼容性的代码，就不多说了，返回的是与回的是与了

复制代码 代码如下:

     kembali  {
                    pageX:pageX,
                    pageY:pageY,
                    layerX:layerX,
                    layerY:layerY
                 }

 然后再看bind函数里面的代码    callback.call(this,that.standadize(e))，这段代码其实就是给e庆实就是给e庆参记说现的。

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

复制代码 代码如下:

         fungsi(e){
        }

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

复制代码 代码如下:

(Funktion(e){
          })(standadize(e))

Dies ist auch ein klassischer Ort für die Verwendung von Callback-Funktionen. So wird der e-Parameter zugewiesen. Möglicherweise wissen Sie jedoch, wie er verwendet wird.

Rückrufe werden häufig in verschiedenen Frameworks verwendet. Wenn Sie etwas selbst schreiben, können Sie es manchmal auch entsprechend der tatsächlichen Situation verwenden.