jsコールバック関数_javascriptスキルを詳しく解説

ネイティブ アプリや Web アプリを作成することが現在主流になっています。これは、さまざまなブラウザベースの Web アプリ フレームワークがますます人気があり、JS を使用するフレームワークがますます有望になっていることを意味します。また、バックエンド開発からフロントエンド開発、モバイル開発へと段階的に移行していくことにしました。早速、「js コールバック関数」に関連する内容について説明します。

コールバック関数と言えば、その意味を知っている人は多いものの、まだよく理解していません。使い方に関しては、まだちょっと迷っています。インターネット上の関連情報の中には、何が起こっているのか詳しく説明していないものや、説明が比較的一方的なものもあります。以下は私の個人的な理解を述べているだけであり、偉い人たちを批判しないでください。大まかな定義を見てみましょう。「関数 a には関数 b というパラメータがあります。関数 a が実行されると、関数 b が実行されます。そして、この処理をコールバックと呼びます。この文は、関数 b が Function から始まることを意味します。」 a はパラメータとして渡されて実行されます。この順序では、最初に a が実行され、次にパラメータ b が実行されます。これはいわゆるコールバック関数です。まず次の例を見てみましょう。

コードをコピーします コードは次のとおりです:

関数 a(コールバック){
アラート('a');
callback.call(this);//または callback()、callback.apply(this)、個人の好みに応じて
}
関数 b(){
アラート('b');
}
//
を呼び出します a(b);

この結果は、最初に「a」が表示され、次に「b」が表示されます。 「そんなコードを書いて何の意味があるの? あまり効果がないようだ!」と疑問に思う人もいると思います。

はい、実は私もこのように「関数を呼び出すなら関数内で直接呼び出してください」と書くのは無意味だと思っています。皆さんが予備的な理解を得るために、小さな例を書いただけです。実際のコード作成プロセスでは、ほとんどのシナリオではパラメーターを渡す必要があるため、このようなパラメーターが使用されることはほとんどありません。以下はパラメーターを含むものです:

コードをコピーします コードは次のとおりです:

関数 c(コールバック){
alert('c');
callback.call(this,'d');
}
//
を呼び出します c(関数(e){
アラート(e);
});

この呼び出しは見覚えがあるでしょうか? ここでは e パラメータに値「d」を割り当てているだけですが、実際にはオブジェクトとして割り当てることもできます。 Jquery には e パラメータがありますか? 以下で説明しましょう
Jquery の e パラメータがコールバックによって割り当てられる方法。

JQuery フレームワークは古くから存在しており、開発中に使用されているため、オンラインで検索するのが非常に便利で、すぐに始めることができます。 Jquery フレームワークでは、イベントでいくつかのパラメーターを取得する必要がある場合があります。たとえば、現在のクリックとクリックされた要素オブジェクトの座標を取得したいとします。この要件は Jquery で簡単に処理できます:

コードをコピーします コードは次のとおりです:

$("#id").bind('click',function(e){
//e.pageX, e.pageY, e.target... 各種データ
});

実際、e パラメータの割り当てもコールバック パラメータを使用して実装されているため、JJquery のソース コードをよく読んだ人は知っているはずです。これを発見した。

同じ原則が Ajax $.get('',{},function(data){}) の data パラメーターにも当てはまります。

コールバック関数が Jquery イベント オブジェクトでどのように適用されるかを見てみましょう。

便宜上、以前「Jquery についての雑談」で書いた、フレームワークの実装に近いメソッドを持った $ に関連するいくつかの実装を簡単に書きます。 。

コードをコピー コードは次のとおりです:

     var _$=関数 (id)
               {
                     this.element= document.getElementById(id);
                }
       _$.prototype={
            バインド:関数(evt,callback)
            {
                var that=this;
                if(document.addEventListener)
                {
                    this.element.addEventListener(evt, function(e){
                        callback.call(this,that.standadize(e));
                    } ,false);
                }
                else if(document.attachEvent)
                {
                    this.element.attachEvent('on' evt,function(e){
                        callback.call(this,that.standadize(e));
                    });
                }
                それ以外
                    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;
                 }
                 それ以外
                 {
                    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;
                 }
                 それ以外
                 {
                     layerX=evt.offsetX;
                     layerXY=evt.offsetY;
                 }
                 戻る {
                    ページX:ページX,
                    ページY:ページY、
                    レイヤーX:レイヤーX、
                    レイヤーY:レイヤーY
                 }
            }
       }
       window.$=function(id)
       {
          return new _$(id);
       }
        $('コンテナ').bind('クリック',function(e){
            アラート(e.pageX);
        });
        $('container1').bind('click',function(e){
             アラート(e.pageX);
        });

この段代コード我们主視standadize関数の機能、互換性の代コード、就不多说了、返されるものは一個のオブジェクトです

复制代 代码如下:

     戻る {
                    ページX:ページX,
                    ページY:ページY、
                    レイヤーX:レイヤーX、
                    レイヤーY:レイヤーY
                 }

その後、bind 関数の領域にある callback.call(this,that.standadize(e)) というコードが表示されます。このセクションのコードは実際にはパラメータによって設定されており、コールバックを使用して実行されます。

コールバック関数数被调用時候传入的是匿名関数数

复制代 代码如下:

         関数(e){
        }

したがってcallback.call(this,that.standadize(e)) はこれを実行したことに相当します

复制代码代码如下:

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

This is also a classic place for Jquery to use callback functions. This is how the e parameter is assigned. Having said this, you may have an understanding of it and how to use it.

Callbacks are widely used in various frameworks. Sometimes when you write something yourself, you can also use it according to the actual situation.