jsDeferredとYUIの組み合わせ

去年の年末くらいから使ってみたいなとおもっていたjsDeferredをつかったサンプルを作ってみた。

• http://jsbin.com/ubupe/3

特集：JSDeferredで，面倒な非同期処理とサヨナラ｜gihyo.jp … 技術評論社あたりを見ているとデータへのアクセス部分のDeferred化だけど、ダイアログのコールバック部分に組み込んでまっすぐにUI処理を書けると便利かなとおもっていたので、そういうのを考えた。

つくったのは、dialog.alert, dialog.confirm, dialog.prompt, dialog.progressの４つ。

window.alert, window.confirm, window.promptのような機能をそれぞれYUI2をつかってDeferred化したものと、Deferredを受け取って、それが終了するまでダイアログをだすもの。

jsDeferredを利用するのはnewしてcallbackでcall,failを呼ぶだけと思えば、使う上で難しいことはそんなになかった。だいたい、おもったとおりに動いてくれる。progressつくるときはちょっと悩んだ。

実際問題としてはYUI2のSimpleDialogにはいろんなイベントがあってcall, fail, cancelをそれぞれどのコールバックに割り当てるかが悩みどころ。

作ったものの感想

• alert,confirm,promptは予想通りの使い勝手。
• progressについてはLoadingを出すだけならDeferred化する必要は無かった。下のような記述で十分簡単。ただUI上で受け取ったDeferredをcancelするUIという意味では便利かも。

function onclick() {
  loading = new LoadingDialog();
  loading.show();
  http.get("http://www.example.com/path/to/content")
  .next(function(){
    loading.hide();
  });
}