아시다시피, JavaScript 언어의 실행 환경은 "단일 스레드"입니다.
소위 "단일 스레드"는 하나의 작업을 한 번에만 완료 할 수 있음을 의미합니다. 여러 작업이있는 경우 대기열을 큐를 타거나 이전 작업을 완료하고 다음 작업을 실행하는 등을 수행해야합니다.
이 모델의 장점은 구현이 비교적 간단하고 실행 환경이 비교적 간단하다는 것입니다. 단점은 오랜 시간이 걸리는 작업이있는 한 후속 작업을 대기해야하므로 전체 프로그램의 실행을 지연시킬 것입니다. 공통 브라우저는 특정 JavaScript 코드 조각이 오랫동안 실행되기 때문에 (예 : Dead Loop)이 장소에 전체 페이지가 붙어 있고 다른 작업을 실행할 수 없기 때문에 일반 브라우저는 응답하지 않습니다 (가짜 죽음).
이 문제를 해결하기 위해 JavaScript 언어는 작업 모드를 작업 모드를 동기 (동기)와 비동기식 (비동기)의 두 가지 유형으로 나눕니다.
"동기 모드"는 이전 섹션의 패턴입니다. 후자의 작업은 이전 작업이 종료 된 다음 실행되기를 기다립니다. 프로그램의 실행 순서는 작업의 배열 순서와 일관되고 동기입니다. "비동기 모드"는 완전히 다릅니다. 각 작업에는 하나 이상의 콜백 기능 (콜백)이 있습니다. 이전 작업이 끝나면 다음 작업이 아니지만 콜백 함수가 실행됩니다. 후자의 작업은 이전 작업이 종료되기를 기다리지 않고 실행되므로 프로그램의 실행 순서는 작업의 배열 순서와 일치하지 않으며 비동기입니다.
"비동기 모드"는 매우 중요합니다. 브라우저 측에서는 브라우저가 응답을 잃지 않도록 장기 작업을 비동기로 실행해야합니다. 가장 좋은 예는 Ajax 작업입니다. 서버 측에서 "비동기 모드"는 유일한 모드입니다. 실행 환경이 단일 스레드이기 때문에 모든 HTTP 요청을 동시에 실행할 수 있으면 서버 성능이 급격히 떨어지고 곧 응답이 손실됩니다.
이 기사는 "비동기 모드"프로그래밍의 4 가지 방법을 요약합니다. 그것들을 이해하면보다 합리적인 구조, 더 나은 성능 및보다 편리한 유지 보수로 JavaScript 프로그램을 작성할 수 있습니다.
1. 콜백 함수
이것은 비동기 프로그래밍의 가장 기본적인 방법입니다.
F1과 F2의 두 가지 함수가 있다고 가정하며, 후자는 전자의 실행 결과를 기다리고 있습니다.
코드 사본은 다음과 같습니다.
f1 ();
f2 ();
F1이 시간이 많이 걸리는 작업 인 경우 F1을 다시 쓰고 F2를 작성하는 것을 F1의 콜백 함수로 고려할 수 있습니다.
코드 사본은 다음과 같습니다.
함수 f1 (콜백) {
settimeout (function () {
// F1의 작업 코드
콜백 ();
}, 1000);
}
실행 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
F1 (F2);
이런 식으로 동기화 작업을 비동기 작업으로 전환합니다. F1은 프로그램 운영을 차단하지 않으며, 이는 프로그램의 주요 논리를 먼저 실행하고 시간 소모적 인 작업의 실행을 연기하는 것과 동일합니다.
콜백 기능의 장점은 단순하고 이해하기 쉽고 배포하기 쉽고, 단점은 코드의 읽기 및 유지 보수에 도움이되지 않는다는 것입니다. 그것들은 다양한 부분 사이에 고도로 결합 (커플 링)되며 프로세스는 매우 혼란 스러울 것이며 각 작업은 하나의 콜백 함수 만 지정할 수 있습니다.
2. 이벤트 모니터링
또 다른 아이디어는 이벤트 중심 모델을 채택하는 것입니다. 작업의 실행은 코드의 순서에 따라 달라지지 않고 이벤트가 발생하는지 여부에 따라 다릅니다.
F1과 F2를 예로 들어 봅시다. 먼저, F1에 대한 이벤트를 바인딩하십시오 (여기에서 사용 된 jQuery 쓰기 방법).
코드 사본은 다음과 같습니다.
f1.on ( 'done', f2);
위의 코드 라인은 완료 이벤트가 F1에서 발생하면 F2가 실행된다는 것을 의미합니다. 그런 다음 F1을 다시 작성하십시오.
코드 사본은 다음과 같습니다.
함수 f1 () {
settimeout (function () {
// F1의 작업 코드
f1.trigger ( 'done');
}, 1000);
}
f1.trigger ( 'done')는 실행이 완료된 후 완료 이벤트가 즉시 트리거되어 F2를 실행하기 시작 함을 의미합니다.
이 방법의 장점은 이해하기 쉽다는 것입니다. 여러 이벤트를 바인딩 할 수 있으며 각 이벤트는 여러 콜백 함수를 지정할 수 있으며 모듈화에 도움이되는 "분리"일 수 있습니다. 단점은 전체 프로그램이 이벤트 중심이되고 운영 프로세스가 매우 불분명해진다는 것입니다.
3. 게시/구독
이전 섹션의 "이벤트"는 "신호"로 완전히 이해할 수 있습니다.
우리는 "신호 센터"가 있다고 가정합니다. 작업이 완료되면 신호가 신호 센터에 게시됩니다. 다른 작업은 신호를 신호 센터에 "가입"하여 실행을 시작할 수있는시기를 알 수 있습니다. 이것을 "관찰자 패턴"이라고도하는 "게시-서브 스크 레이스 패턴"이라고합니다.
이 모델에는 많은 구현이 있습니다. 다음은 Ben Alman의 Tiny Pub/Sub이며 jQuery의 플러그인입니다.
먼저, F2는 "Done"신호를 "신호 센터"jQuery에 가입합니다.
코드 사본은 다음과 같습니다.
jQuery.subscribe ( "done", f2);
그런 다음 F1은 다음과 같이 다시 작성됩니다.
코드 사본은 다음과 같습니다.
함수 f1 () {
settimeout (function () {
// F1의 작업 코드
jQuery.publish ( "done");
}, 1000);
}
jquery.publish ( "done")는 F1 실행이 완료된 후 "신호 센터"jQuery로 "완료된"신호가 발행되어 F2의 실행을 트리거합니다.
또한, F2가 실행 된 후, 구독 취소도 구독되지 않을 수도 있습니다.
코드 사본은 다음과 같습니다.
jquery.unsubscribe ( "done", f2);
이 방법의 특성은 "이벤트 청취"와 유사하지만 후자보다 훨씬 낫습니다. "메시지 센터"를보고 각 신호에 대해 얼마나 많은 신호 수와 몇 개의 가입자가 있는지 이해하여 프로그램 작동을 모니터링 할 수 있기 때문입니다.
4. 대상을 약속합니다
약속 객체는 CommonJS Working Group이 제안한 사양이며, 비동기 프로그래밍을위한 통합 인터페이스를 제공 할 목적으로.
간단히 말해서, 그 아이디어는 각 비동기 작업이 약속 객체를 반환한다는 것입니다.이 콜백 함수를 지정할 수있는 메소드가 있습니다. 예를 들어, F1의 콜백 함수 F2는 다음과 같이 쓸 수 있습니다.
코드 사본은 다음과 같습니다.
F1 (). 그런 다음 (F2);
F1은 다음과 같이 다시 작성해야합니다 (jQuery의 구현은 여기에서 사용됩니다).
코드 사본은 다음과 같습니다.
함수 f1 () {
var dfd = $ .deferred ();
settimeout (function () {
// F1의 작업 코드
dfd.resolve ();
}, 500);
반환 DFD.Promise;
}
이러한 방식으로 쓰는 장점은 콜백 함수가 체인 쓰기 방법이되었으며 프로그램 흐름이 매우 명확하게 볼 수 있으며 많은 강력한 기능을 실현할 수있는 완전한 지원 방법이 있습니다.
예를 들어 여러 콜백 함수를 지정합니다.
코드 사본은 다음과 같습니다.
f1 (). 그런 다음 (f2). (f3);
예를 들어, 오류가 발생하면 콜백 함수를 지정합니다.
코드 사본은 다음과 같습니다.
f1 (). 그런 다음 (f2) .fail (f3);
또한 이전 세 가지 방법 중 어느 것도 얻지 못한다는 이점이 있습니다. 작업이 완료되면 콜백 기능을 추가하면 콜백 기능이 즉시 실행됩니다. 따라서 이벤트 나 신호를 누락하는 것에 대해 걱정할 필요가 없습니다. 이 방법의 단점은 쓰고 이해하기가 비교적 어렵다는 것입니다.