現在、ネイティブアプリとWebアプリは主流です。つまり、さまざまなブラウザベースのWebアプリフレームワークがますます人気が高まっており、JSを実行する人はますます有望になっています。また、バックエンド開発からフロントエンド開発とモバイル開発に徐々に移行することにしました。ナンセンスについて話さないでください、「JSコールバック関数」のトピックにアクセスしましょう。
コールバック関数といえば、多くの人は意味を知っていますが、まだわずかな理解しかありません。それをどのように使用するかについては、それはまだ少し混乱しています。インターネット上のいくつかの関連することは、何が起こったのかを詳細に説明しておらず、それらはより一方的です。次に、私は私の個人的な理解について話します、私を批判しないでください。 「関数Aにパラメーターがあり、このパラメーターは関数bです。関数Aが実行されると、関数Bが実行されます。このプロセスはコールバックと呼ばれます。」この文は、関数bがパラメーターの形で関数aに渡され、最初に実行する順序で実行されることを意味し、パラメーターbを実行することは、いわゆるコールバック関数です。まず次の例を見てみましょう。
コードコピーは次のとおりです。
関数a(コールバック){
アラート( 'A');
callback.call(this); //またはcallback()、callback.apply(this)、個人的な好みに応じて
}
関数b(){
アラート( 'b');
}
//電話
a(b);
その結果、「A」が最初にポップアップし、「B」がポップアップします。このようにして、誰かが「そのようなコードを書くことのポイントは何ですか?それはあまり役に立たないようです!」と誰かが尋ねるかもしれません。
はい、私は実際にこのように書くことは意味がないと思います。「関数を呼び出すなら、関数に直接呼び出すだけです」私はあなたがあなたに予備的な理解を与えるために小さな例を書いているだけです。この種のパラメーターレスは、実際にコードを作成するプロセスではめったに使用されません。これは、ほとんどのシナリオでパラメーターを渡す必要があるためです。これがパラメーターです:
コードコピーは次のとおりです。
関数C(コールバック){
アラート( 'c');
callback.call(this、 'd');
}
//電話
c(function(e){
アラート(e);
});
この呼び出しはおなじみに見えますか?ここで、eパラメーターは「d」に割り当てられます。単にキャラクターの噴出に値を割り当てるだけですが、実際にはオブジェクトに値を割り当てることもできます。 jQueryにはeパラメーターはありますか?以下でそれについて話しましょう
jqueryのeパラメーターは、コールバックによってどのように割り当てられていますか?
誰もがjqueryフレームワークに精通していると思います。長い間リリースされており、開発中に使用されています。比較的簡単です。 APIをオンラインで検索するのは非常に便利で、簡単に開始できます。 jQueryフレームワークでは、現在のクリックの座標やクリックの要素オブジェクトなど、イベントでいくつかのパラメーターを取得する必要がある場合があります。この要件は、jqueryで簡単に対処できます。
コードコピーは次のとおりです。
$( "#id")。bind( 'click'、function(e){
//e.pagex、e.pagey、e.target ......さまざまなデータ
});
使用するのは非常に便利です。実際、このeパラメーターの割り当ては、コールバック関数によっても達成されます。このパラメーターには、コールバックパラメーターを使用してオブジェクト値が割り当てられます。 JJQueryソースコードを慎重に研究した友人は、これを発見すべきでした。
Ajaxの$ .get( ''、{}、function(data){})データパラメーターにも同じ原則があります。
jqueryイベントオブジェクトにコールバック関数がどのように適用されるかを見てみましょう。
便利なため、$に関連するいくつかの実装について書いただけです。 「Xiaotan JQuery」には、フレームワークの実装に比較的緊密な方法があるという前に書いています。以下に簡単なセレクターを書いています。
コードコピーは次のとおりです。
<div id = "container">
</div>
<スクリプト>
var _ $ = function(id)
{
this.element = document.getElementById(ID);
}
_ $。プロトタイプ= {
バインド:function(evt、callback)
{
var that = this;
if(document.addeventlistener)
{
this.element.addeventlistener(evt、function(e){
callback.call(this、that.standadize(e));
} 、間違い);
}
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));
};
}、
スタンダード:function(e){
var evt = e || window.event;
var pagex、pagey、layerx、layery;
// pagex Horizontal Coordinate Pagey垂直座標層レイヤーックスクリックは水平座標レイリーにありますクリックは要素の垂直座標にあります
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;
}
戻る {
pagex:pagex、
Pagey:Pagey、
layerx:layerx、
レイリー:レイリー
}
}
}
ウィンドウ。$ = function(id)
{
new _ $(id)を返します。
}
$( 'container')。bind( 'click'、function(e){
アラート(e.pagex);
});
$( 'container1')。bind( 'click'、function(e){
アラート(e.pagex);
});
</script>
主に、スタンダード機能の実装を見ていきます。私はこのコードについてあまり言いません、戻りオブジェクトは
コードコピーは次のとおりです。
戻る {
pagex:pagex、
Pagey:Pagey、
layerx:layerx、
レイリー:レイリー
}
次に、Bind関数のコードCallback.call(this、that.standadize(e))を見てください。このコードには、実際にはeパラメーターに値が割り当てられ、コールバックコールバックを使用して実装されています。
匿名関数は、コールバック関数が呼び出されるときに渡されます
コードコピーは次のとおりです。
関数(e){
}
callback.call(this、that.standadize(e))は、そのようなコードを実行するのと同等です
コードコピーは次のとおりです。
(function(e){
})(standadize(e))
これは、コールバック関数を使用したjQueryの古典的なことでもあります。これがEパラメーターの割り当て方法です。これを言った後、あなたはおそらくこれとそれをどのように使用するかをよく理解しています。
コールバックは、さまざまなフレームワークでより頻繁に使用されます。時々、自分で何かを書くとき、実際の状況に応じてそれを使用することもできます。