Stateful Nite 第4夜

gistfile1.md

jQuery.Deferred#pipe

非同期処理を直列に実行するときに、直前の実行結果が次の非同期処理の初期条件になるような場合に使います。

// 2 * 5 = 10
var filter = function ( x ) {
  return x * 5;
}
var callback = function ( result ) {
  console.log(result);
}
$.Deferred().resolve(2).pipe(filter).done(callback);

• pipeは実行コンテキストのDeferredから新しいDeferredを生成する
• pipeは引数にfilterを受け取る
• 新しく生成されたDeferredにcallbackを登録する
• 生成元のDeferredにはcallbackを登録しない
• 生成元のDeferredをresolveする
• pipeの実行コンテキストのDeferredがresolveされるとfilterが呼び出される
• filterは仮引数にresolveの実引数を受け取る
• filterは実行結果を返す
• callbackはfilterの実行結果を受け取る

var entryId = 1;
$.getJSON("http://www.example.com/entry?id="+entryId).pipe(function ( entry ) {
  return $.getJSON("http://www.example.com/category?id="+entry.categoryId);
}).pipe(function ( category ) {
  return $.getJSON("http://www.example.com/blog?id="+category.blogId)
}).done(function ( blog ) {
  console.log(blog);
});

• filterが返す実行結果がDeferredの場合
  • filterの実行コンテキストのDeferredは、実行結果のDeferredがresolveした値をそのままresolveする

jQuery.Deferred#progress, jQuery.Deferred#notify

Deferredが完了されるまでの途中経過を通知します

// カウントダウン
function countDown ( count, interval ) {
  var df  = $.Deferred();
  var tid = setInterval($.proxy(function ( df ) {
     if ( 0 == this.count ) {
       df.resolve(this.count);
     } else {
       df.notify(this.count--);
     }
  }, {count: count}, df), interval);
  df.done(function ( ) {
    clearInterval(tid);
  })
  return df.promise();
}

countDown(10, 1000).progress(function ( count ) {
  console.log("残り", count);
}).done(function ( count ) {
  console.log(count, "完了!");
});

jQueryを使った簡単データバインディング

// valueというプロパティと
// それを更新するための
// updateValueというメソッドを持ったオブジェクト
// ==============================

data = {
  value: 1,
  updateValue: function ( newValue ) {
    this.value = newValue;
  }
}

// dataが更新されたら#valueの更新前、更新後の値を受け取るcallbackを実行したい
callback = function ( oldValue, newValue ) {
  console.log(oldValue, newValue)
}

data = {
  value: 1,
  updateValue: function ( newValue ) {
    var oldValue = this.value;
    this.value   = newValue;
    this.callback(oldValue, newValue);
  }
}
data.callback = callback

// イマイチやねぇ…


// $.event.trigger を使うと！
// ==========================

data = {
  value: 1,
  updateValue: function ( newValue ) {
    var oldValue = this.value;
    this.value   = newValue;
    $.event.trigger("updated", [oldValue, newValue], this);
  }
} 

// #valueが更新された時に実行されるcallback
// 引数の一つ目はjQuery.Eventオブジェクト
callback = function ( event, oldValue, newValue ) {
  console.log(oldValue, newValue)
}

// dataオブジェクトが発行するupdatedイベントにcallbackを登録
$(data).bind("updated", callback);

// 実行すると、、、
data.updateValue(2);