JavaScript 非同期メソッドキューチェーン実装コード分析_JavaScript スキル-jsチュートリアル-php.cn

JavaScript 非同期メソッドキューチェーン実装コード分析_JavaScript スキル

WBOY

リリース： 2016-05-16 18:25:40

オリジナル

1103 人が閲覧しました

このメソッドについては、「JavaScript デザインパターン」で詳しく説明されています。メソッドのチェーン呼び出しを実装するには、プロトタイプで定義されたメソッドが、これらのメソッドを呼び出すインスタンスオブジェクトへの参照を返すようにするだけです。この本のコード:

コードをコピーします。コードは次のとおりです:

 
(関数() { 
function _$(els) { 
this.elements = []; 
for (var i = 0, len = els.length; i 
 var 要素 = els[i]; 
if (要素の種類 == '文字列') { 
要素 = document.getElementById(要素) 
} 
this.elements.push(要素); 
} 
}; 
_$.prototype = { 
each: function(fn) { 
for ( var i = 0, len = this.elements.length; i fn.call(this, this.elements[i]); 
これを返す; 
setStyle: function(prop, val) { 
this .each(function(el) { 
el.style[prop] = val; 
}); 
これを返す 
}, 
show: function() { 
var that = this; 
this.each(function(el) { 
that.setStyle('display', 'block'); 
return this; , 
addEvent: function(type, fn) { 
var add = function(el) { 
if (window.addEventListener) { 
el.addEventListener(type, fn, false); >} 
else if (window.attachEvent) { 
el.attachEvent('on' type, fn); 
} 
}; 
this.each(function(el) { 
 add(el); 
}); 
return this; 
} 
}; 
return new _$(arguments); 
}; 
})(); 

 
ご覧のとおり、各メソッドは「return this」で終了し、呼び出したメソッドのオブジェクトを次のメソッドに渡します。チェーン方式。しかし、操作したいデータが非同期リクエストを通じて取得された場合、メソッド呼び出しのチェーンをどのように維持すればよいでしょうか? Dustin Diaz は、メソッド呼び出しを確実に連鎖させる方法を提供しています。彼は、『JavaScript Design Patterns』という本の著者の 1 人でもあります。 
彼は最初に Queue オブジェクト、つまり次のオブジェクトを作成しました: 

コードをコピー

コードは次のとおりです: function Queue() { // コールバックを保存します this._methods = []; // 応答への参照を保持します

this._response = null; / すべてのキューはフラッシュされずに開始します

this._flushed = false; 
} 
Queue.prototype = { 
// キューにコールバックを追加します 
add: function(fn) { 
 // キューがフラッシュされていた場合はすぐに戻ります 
if (this._flushed) { 
fn(this._response) 
// それ以外の場合はキューにプッシュします 
} else { this ._methods.push(fn); 
} 
}, 
flush: function(resp) { 
// 注: フラッシュは 1 回のみ行われます 
if (this._flushed) { 
return; 
} 
// flash() の後に応答を保存します 
this._response = resp; 
this._flushed; = true ; 
// シフトアウトしてコールバックします 
while (this._methods[0]) { 
this._methods.shift()(resp); 
 >} 
}; 

 
次に、これを非同期メソッド キュー チェーンを構築するツールとして使用します。このツールを使用すると、サーバーからコンテンツを取得してセレクターに追加する jQuery プラグインを簡単に構築できます。 




コードをコピー


 コードは次のとおりです。

(function($) {

$.fn .fetch = function(url) { var queue = new Queue; this.each(function() { var el = this; queue.add(function(resp) { $(el).html(resp); });

$.ajax({

url: url,
dataType: 'html',
成功: function(html) {
queue.flush(html);
}
});

このようにして、コンテンツを非同期で取得し、一連の呼び出しを継続できます。

コードをコピー

コードは次のとおりです。

$("

")
.fetch('/server/navigation.html')

.addClass('column')
.appendTo('#side');

Viewデモページで効果を確認してください。サーバー側の応答での操作を待機しているキュー内に多数の項目がある場合はどうすればよいですか?著者はそのようなメソッドを構築したので、参考にしてください:

コードをコピー

コードは次のとおりです:

 
function fetchTweet(url) { 
this.queue = 新しいキュー; 
var self = this; ) { 
self.tweet = resp; 
self.queue.flush(this)>}); 
} 
fetchTweet.prototype = { 
linkify: function(); 
this.queue.add(function(self) { 
self.tweet = self.tweet.replace(/b@(w{1,20}b/g, '$1'); 
} ); 
これを返します; 
}, 
filterBadWords: function() { 
this.queue.add(function(self) { 
self.tweet = self.tweet.replace(/) b(fuck|shit|piss)b/g, ""); 
return this; 
}, 
appendTo: function(selector) { 
this.queue. add(function(self) { 
$(self.tweet).appendTo(selector); 
これを返します; 

 
このようにして、次の方法で呼び出すことができます: 




コードをコピーします 

コードは次のとおりです:

fetchTweet(url).linkify().filterBadWords().appendTo('#status'); この時点で、非同期メソッドチェーンの実装方法はすでにわかっています。 JavaScript での非同期メソッドキューチェーン

> の下部にあるいくつかのコメントによって生じたいくつかの疑問については、検討する価値があります。プラグイン $.fn.fetch は、返されたコンテンツを追加するだけで済みます。また、Queue でコールバック関数を 1 つだけ使用する場合は、次のように記述できます。コードをコピーします

コードは次のとおりです:

(function($) { $.fn.fetch = function(url) {

var queue = 新しいキュー; this.each( function() { var el = this; $.ajax({ url: url, type: 'get', dataType: 'json',

成功: function(resp) {

$(el).html(resp['text1']); 
} 
}); ; 
これを返します; 
})(jQuery); 

 
どう思いますか? 