処理の前後でビジー画面を表示させる関数を返す関数

個人的なアプリを作っているときに、頻繁にbusy.jsを使ったビジー画面を使った。busy.jsは簡単にビジー画面を実装できるけれど、その表示は処理自体とは関係が無いにもかかわらず数行のコードがノイズのように本来やりたい処理のコードに挟まる。そのためコードの見通しが悪くなりがちだ。処理の本体とビジー画面の表示を分離させたい。そこで、無引数関数を受け取り、処理の前後にビジー画面表示をはさんでくれる関数を返す関数busyDecoratorを書いてみた。

下のプログラムはそれを使ってサーバからの応答を確認する関数を実装したもの。プログラム内のprefixという変数はAPIを叩くときのurl。http://hoge.com/api/ みたいな文字列。"ping"というのはサーバからの応答を確認するためだけに使うコマンドをあらわす文字列。アプリケーションはまず始めにpingコマンドでサーバと通信ができることを確認してからアプリケーションの本体が実行されるようプログラムされている。サーバの応答を確認する関数の本体は_serverIsAlive関数で、APIが利用可能かどうかが真偽値で分かる。この関数の処理中ビジー画面を表示させる関数がserverIsAlive関数で、その中身はbusyDecorator関数を用いて処理中にビジー画面を表示させるようにした関数を得て、それをすぐさま呼び出しているだけ。

サーバの応答確認の他にも、データの更新やら削除やらで使った。busyDecorator関数は無引数関数しか処理できないけれど、その場合は無引数の無名関数の中で引数のある関数を呼び出せば同様に処理できる。

// 無引数関数の呼び出しの前後にビジーエフェクトを表示させる
// 要：cvi_busy_lib.js
function busyDecorator(parentNode, closure, property)
{
    if (typeof property == "undefined")
        property = {text: "処理中・・・"}
    function withBusy(){
        var ctrl = new getBusyOverlay(parentNode, property);
        var val = closure();
        ctrl.remove();
        return val;
    }
    return withBusy;
}
//
// サーバからの応答確認
// サーバから応答があるかどうかをpingコマンドを同期通信で実行して確かめて真偽値を返す
// 要：prototype.js
//
function _serverIsAlive()
{
    var isAlive = false;
    var ajax = new Ajax.Request(prefix + "ping",
        {
            method: "get",
            asynchronous: false,
            onSuccess: function(res){ isAlive = true; },
        });
    if (!isAlive)
        alert("サーバからの応答がありません。");
    return isAlive;
}
function serverIsAlive()
{ return busyDecorator("viewport", _serverIsAlive, {text: "サーバの応答確認中・・・"})(); }