1

ユーザーにデータの入力を求め、Ajaxを介してそのデータを送信する必要があるJavaScript関数。WinForms / WPFのバックグラウンドから来て、私の最初の考えは次のようなことをすることでした:

function promptForData() {
    $('#my-form').dialog({
        autoOpen: true,
        modal: true,
        buttons: {
            "OK": function () {
                alert("Added");
                // Unlike WinForms I cannot
                // set a dialog result here
                $(this).dialog("close");
            },
            "Cancel": function () {
                alert("Canceled");
                $(this).dialog("close");
            }
        }
    });
}

function update() {
    var data = promptForData();
    // Unlike WinForms execution continues immediately even
    // for a "modal" dialog (jQuery UI Dialog, modal: true)
    makeAjaxCall(data);
}

makeAjaxCall(data)明らかな解決策は、ダイアログの「OK」ハンドラーで発生するようにコードを再構築することのようです。

関係する実際のコードはかなり複雑なので、データの入力を求めるプロンプトとデータの使用を分離したいと思います。それを行うのに適したパターンはありますか?

注:示されている実際の実装はjQuery UIを使用していますが、問題はそれとは無関係だと思います。

4

1 に答える 1

2

このための基本的なパターンは、コールバックパラメータを使用して「次に何をするか」を表すことです。プロンプト関数から値を返す代わりに、それらの値を使用してコールバックを呼び出し、プロンプト関数の戻り値を変数に入れる代わりに、コールバックの引数に入れます。

function promptForData(callback) {
    $('#my-form').dialog({
    autoOpen: true,
    modal: true,
    buttons: {
        "OK": function () {
            alert("Added");
            // Unlike WinForms I cannot
            // set a dialog result here
            $(this).dialog("close");

            callback(/*pass your data here*/); // <----
        },
        "Cancel": function () {
            alert("Canceled");
            $(this).dialog("close");
        }
    }
});
}

promptForData(function(data){
    makeAjaxCall(data)
})

ただし、多くの非同期処理を行うと、コールバックが相互に「ネスト」して「運命のピラミッド」を作成する傾向があるため、これは少し醜くなり始める可能性があります。それに遭遇した場合は、Promise/Deferredパターンを確認することをお勧めします。

ここではエラー処理についても説明しなかったことに注意してください。「callbacky」コードを作成するときに、何かが例外をスローする可能性がある場合は、すぐにtry / catchブロックを追加して、それをキャッチして別のエラーコールバックに渡すことができるようにする必要があります。繰り返しになりますが、これが問題になる場合は、Promiseを調べてください。

于 2013-02-23T00:58:57.880 に答える