デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

deferred.pipe( )deferredオブジェクトのフィルタリング

構文

deferredオブジェクトのフィルタリング返値:promiseオブジェクト
deferred.pipe( done, fail )ver1.6〜
deferred.pipe( done, fail, progress )ver1.7〜
※v1.8で非推奨となりました、thenメソッドを利用してください。

機能

deferred.pipeメソッドはv1.8で非推奨となりました。代わりにdeferred.thenメソッドを利用してください。

deferred.pipeメソッドはdefferdオブジェクトの状態によって実行される処理(done, fail, progress)をフィルタリングしてpromiseオブジェクトとして返します。promiseオブジェクトに渡したい内容は引数に設定したfunction(done, fail, progress)内でreturnを利用して渡します。

解説

まずはpipeメソッドを利用していないサンプルから

サンプル(pipe/01.html)を開いてbody内にbutton要素しかないことを確認してください。jQueryでは、まず以下部分を確認してください。1行目でdeferredオブジェクト「dfd」を作成し、2〜4行目でdeferred.doneメソッドを利用してdeferredオブジェクトの処理を完了したらbody要素に引数で受け取った値を表示するようにしています。

var dfd = $.Deferred();
dfd.done(function(str){
	$("body").append(str);
});

続いて以下の部分を確認してください。buttonをクリックしたらdeferred.resolveメソッドを利用してdeferredオブジェクトを完了させます。このとき引数として「john」を送っています。

$("button").click(function(){
	dfd.resolve("john");
});

結果として、buttonをクリックするとbody要素内に「john」と追加されます。

pipeメソッドを利用してフィルタリング

ではサンプルpipe/01.htmlにdeferred.pipeメソッドを利用してフィルタリングします。
サンプル(pipe/02.html)を開いてbody内の構成はpipe/01.html同じ事を確認してください。jQueryは少し処理が追加され、以下の様にdeferredオブジェクトに対しdeferred.pipeメソッドを利用しています。サンプルでは、処理が完了した時に受け取る値「str」の前に「my name is」を追加してreturnで返しています。

var myPromise = dfd.pipe(function(str){
	return "my name is " + str;
});

続いて以下の部分を確認してください。サンプルpipe/01.htmlから変更なさそうに見えますが、deferredオブジェクトではなく上記のdeferred.pipeメソッドによって得られたpromiseオブジェクトを利用するように変更してあります。

myPromise.done(function(str){
	$("body").append(str);
});

そのため、buttonのクリックすると送った値「john」がdeferred.pipeメソッドのフィルタリング処理によって「my name is」を追加されてからdeferred.doneメソッドで設定されたfunctionに渡されます。

結果として、buttonをクリックすると「my name is john」と表示されます。サンプルではdoneのフィルタリングしか設定していませんが、同じようにしてfailやprogressに対してもフィルタリングする事ができます。