JavaScript 비동기 메소드 큐 체인 구현 코드 분석_javascript 기술

이 메서드는 "Javascript 디자인 패턴"에 자세히 설명되어 있습니다. 메서드의 체인 호출을 구현하려면 프로토타입에 정의된 메서드만 해당 메서드를 호출하는 인스턴스 개체에 대한 참조를 반환하도록 하면 됩니다. 책에 나오는 코드는

코드를 복사하세요 코드는 다음과 같습니다.

(function () {
함수 _$(els) {
this.elements = []
for (var i = 0, len = els.length; i var element = els[i];
if (typeof element == 'string') {
element = document.getElementById(element)
}
this.elements.push(element);
}
};
_$.prototype = {
each: function(fn) {
for ( var i = 0, len = this.elements.length; i fn.call(this, this.elements[i])
}
return this
},
setStyle: function(prop, val) {
this .each(function(el) {
el.style[prop] = val;
})
return this;
},
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)
}
}; 🎜> add(el);
});
return this;
}
}
window.$ = function() {
return new _$(arguments);
};
})();


보시다시피, 각 메소드는 "return this"로 끝나며, 이는 호출 메소드의 객체를 다음 메소드로 전달합니다. 체인 방식. 그러나 우리가 조작하려는 데이터가 비동기 요청을 통해 얻은 경우 메소드 호출 체인을 어떻게 유지합니까? Dustin Diaz는 체인 메서드 호출을 보장하는 방법을 제공하며 "Javascript Design Patterns"라는 책의 저자이기도 합니다.
그는 먼저 대기열 개체를 구성했습니다.

코드 복사

코드는 다음과 같습니다. 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) {
// 참고: 플러시는 한 번만 발생합니다.
if (this._flushed) {
return;
}
// 플러시() 이후 후속 호출에 대한 응답을 저장합니다.
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:
성공: function(html) {
queue.flush(html);
}
})
return this
})(jQuery);


이러한 방식으로 콘텐츠를 비동기적으로 가져오고 호출 체인을 계속할 수 있습니다.




코드 복사

코드는 다음과 같습니다.

$("

") .fetch('/server/navigation.html') .addClass('column') .appendTo('#side');

보기
데모
페이지에서 효과를 확인해 보세요.
서버측 응답에서 작업 대기 중인 항목이 대기열에 많으면 어떻게 해야 하나요? 저자는 참고할만한 방법을 구성했습니다.

코드 복사

코드는 다음과 같습니다.

function fetchTweet(url) {
this.queue = new Queue;
this.tweet = "";
var self = this
ajax(url, function(resp) ) {
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');
} );
return this;
},
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);
})
return this
}
}; 🎜>이런 식으로 다음과 같이 호출할 수 있습니다.

코드 복사

코드는 다음과 같습니다. fetchTweet(url).linkify().filterBadWords().appendTo('#status');

이 시점에서 우리는 이미 비동기 메소드 체인을 구현하는 방법을 알고 있습니다.
JavaScript의 비동기 메서드 큐 체인
> 하단에 있는 일부 주석에서 제기된 몇 가지 질문은 생각해 볼 가치가 있습니다. 플러그인 $.fn.fetch는 반환된 콘텐츠를 다음에 추가하기만 하면 됩니다. Queue가 필요한가요? 게다가 jQuery의 $.fn.load는 Queue에서 하나만 사용하는 경우 다음과 같이 작성할 수 있습니다. 코드 복사

코드는 다음과 같습니다.

(function($) { $.fn.fetch = function(url) { var queue = new Queue; this.each( function() { var el = this; $.ajax({

url: url,

type: 'get',
dataType: 'json',
성공: function(resp) {
$(el).html(resp['text1'])
}
}); ;
return this;
})(jQuery)


어떻게 생각하세요?