0

callBack 関数について読んでいて、それを使おうとしています。しかし、私はそれの利点を見ていません。以下のコードを例にとると、#1 と #2 の違いがわかりません。むしろ＃1は無意味に見える

1:

function serverConnect(callback){
//Connecting to server
var xmlhttp;
var getString;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

var url="server/topHouses.php";
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xmlhttp.onreadystatechange=function(){
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
        //Storing response from server, an array encoded by json    
        getString = $.parseJSON(xmlhttp.responseText);
        callback(getString);

    }
}

xmlhttp.send(); 
}

function doStuff(string){
//do stuff
}

serverConnect(doStuff);

2:

function serverConnect(){
//skip skip skip
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
    //Storing response from server, an array encoded by json    
    getString = $.parseJSON(xmlhttp.responseText);
    doStuff(getString);

}
}

function doStuff(string){
//do stuff
}

serverConnect();
4

2 に答える 2

2

あなたの例では、少なくとも私が見る限り、あまりメリットはありません。ここで、パラメータとしてのコールバック メソッドが役に立ちます。

myFunction(successCallback)
{
    var url="server/topHouses.php";
    xmlhttp.open("POST", url, true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState==4 && xmlhttp.status==200) {
            if(!successCallback)
                // Some default behavior
            else
                successCallback($.parseJSON(xmlhttp.responseText));
        }
    };
}

あなたまたは他の開発者が成功動作をオーバーライドできるようにすることで、メソッドが標準化された方法で物事を処理できるという利便性を犠牲にすることなく、アプリケーションの柔軟性が向上します。

$.parseJSONちなみに、jQuery を使用している場合 (呼び出しで示されているように)、xmlhttp代わりに? を使用するのはなぜ$.ajaxですか?

于 2013-09-30T00:04:43.840 に答える
1

利点は再利用性です。簡単な例を見てみましょう。#1 コールバックを使用すると、次のことが可能になります。

function handleStatusResponse () {}
function handleUpdateStatusResponse () {}
function handleEmailResponse () {}

function serverConnect (query,callback) {

    // ajax stuff here

    callback(data)
}

serverConnect('GET_STATUS',handleStatusResponse );
serverConnect('UPDATE_STATUS',handleUpdateStatusResponse );
serverConnect('SEND_EMAIL',handleEmailResponse );

これを行う必要があるコールバックなしのvs＃2：

function handleStatusResponse () {}
function handleUpdateStatusResponse () {}
function handleEmailResponse () {}

function serverConnectGetStatus (callback) {

    // ajax stuff here

    handleStatusResponse (data)
}

function serverConnectUpdateStatus (callback) {

    // ajax stuff here

    handleUpdateStatusResponse (data)
}

function serverConnectSendEmail (callback) {

    // ajax stuff here

    handleEmailResponse (data)
}

serverConnectGetStatus ();
serverConnectUpdateStatus();
serverConnectSendEmail();

どちらの方法もカプセル化されていますが、操作 #2 には多数の ajax コードが重複しています。コールバックは、変数に対する関数の引数と同じようにフローをプログラムすることです。これにより、アルゴリズムを一般化できます。

于 2013-09-30T02:10:07.017 に答える