JavaScript에서 비동기 프로그래밍 패턴을 구현하는 방법

JavaScript에서 비동기 프로그래밍 모드를 구현하는 방법: 1. 비동기 프로그래밍의 가장 기본적인 방법인 콜백 함수 2. 이벤트 수신 3. 객체 게시.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, DELL G3 컴퓨터.

JavaScript에서 비동기 프로그래밍 모드를 구현하는 방법:

1. 콜백 함수

이것은 비동기 프로그래밍의 가장 기본적인 방법입니다.

f1과 f2라는 두 가지 함수가 있고, f2가 전자의 실행 결과를 기다린다고 가정해 보겠습니다.

코드는 다음과 같습니다.

f1();
f2();

f1이 시간이 많이 걸리는 작업이라면 f1을 다시 작성하고 f2를 f1의 콜백 함수로 작성하는 것을 고려해 볼 수 있습니다.

코드는 다음과 같습니다.

　　function f1(callback){
　　　　setTimeout(function () {
　　　　　　// f1的任务代码
　　　　　　callback();
　　　　}, 1000);
　　}

실행 코드는 다음과 같습니다.

코드는 다음과 같습니다.

　　f1(f2);

이런 방식으로 동기 작업을 비동기 작업으로 전환하고 f1은 프로그램을 차단하지 않습니다. 실행은 먼저 실행하는 것과 같습니다. 프로그램의 기본 논리는 시간이 많이 걸리는 작업의 실행을 연기합니다.

콜백 함수의 장점은 간단하고 이해하기 쉽고 배포하기 쉽다는 것입니다. 단점은 코드를 읽고 유지하는 데 도움이 되지 않는다는 것입니다. , 각 작업마다 하나의 콜백 함수만 지정할 수 있습니다.

2. 이벤트 모니터링

또 다른 사고 방식은 이벤트 중심 모델을 사용하는 것입니다. 작업 실행은 코드의 순서가 아니라 이벤트 발생 여부에 따라 결정됩니다.

f1과 f2를 예로 들어보겠습니다. 먼저 이벤트를 f1에 바인딩합니다(여기에서는 jQuery가 사용됨).

코드는 다음과 같습니다.

　　f1.on('done', f2);

위 코드 줄은 f1에서 done 이벤트가 발생하면 f2가 실행된다는 의미입니다. 그런 다음 f1을 다시 작성합니다.

코드는 다음과 같습니다.

　　function f1(){
　　　　setTimeout(function () {
　　　　　　// f1的任务代码
　　　　　　f1.trigger('done');
　　　　}, 1000);
　　}

f1.trigger('done')은 실행이 완료된 후 done 이벤트가 즉시 트리거되어 f2 실행을 시작한다는 의미입니다.

이 방법의 장점은 비교적 이해하기 쉽고, 여러 이벤트를 바인딩할 수 있고, 각 이벤트가 여러 콜백 함수를 지정할 수 있으며, "분리"될 수 있어 모듈화에 도움이 된다는 것입니다. 단점은 전체 프로그램이 이벤트 중심으로 이루어져야 하고 실행 프로세스가 매우 불분명해진다는 것입니다.

3. Publish/Subscribe

이전 섹션의 "이벤트"는 "신호"로 이해될 수 있습니다.

우리는 "신호 센터"가 있다고 가정합니다. 특정 작업이 실행되면 신호 센터에 신호를 "게시"하고 다른 작업은 신호 센터를 "구독"하여 언제 직접 실행할 수 있는지 알 수 있습니다. . 이를 "게시-구독 패턴"(게시-구독 패턴)이라고 하며 "관찰자 패턴"(관찰자 패턴)이라고도 합니다.

이 패턴의 구현은 다양합니다. 아래는 jQuery용 플러그인인 Ben Alman의 Tiny Pub/Sub입니다.

먼저, f2는 "신호 센터" jQuery에 대한 "완료" 신호를 구독합니다.

코드는 다음과 같습니다.

　　jQuery.subscribe("done", f2);

그런 다음 f1은 다음과 같이 다시 작성됩니다.

코드는 다음과 같습니다.

　　function f1(){
　　　　setTimeout(function () {
　　　　　　// f1的任务代码
　　　　　　jQuery.publish("done");
　　　　}, 1000);
　　}

jQuery.publish("done")은 f1의 실행이 완료된 후 " done"을 "Signal Center" jQuery 신호에 추가하여 f2의 실행을 트리거합니다.

또한, f2 실행이 완료된 후에도 구독 취소가 가능합니다.

코드는 다음과 같습니다.

　　jQuery.unsubscribe("done", f2);

이 방법의 성격은 "이벤트 청취"와 유사하지만 분명히 후자보다 더 좋습니다. "메시지 센터"를 보고 프로그램 운영을 모니터링하여 신호 수와 각 신호의 구독자 수를 확인할 수 있기 때문입니다.

4. Promises 객체

Promises 객체는 비동기 프로그래밍을 위한 통합 인터페이스를 제공하기 위해 CommonJS 작업 그룹에서 제안한 사양입니다.

간단히 말하면 각 비동기 작업은 콜백 함수를 지정할 수 있는 then 메서드가 있는 Promise 개체를 반환한다는 아이디어입니다. 예를 들어 f1의 콜백 함수 f2는 다음과 같이 작성할 수 있습니다.

코드는 다음과 같습니다.

　　f1().then(f2);

f1은 다음과 같이 다시 작성해야 합니다(여기서는 jQuery 구현이 사용됨).

코드는 다음과 같습니다.

　　function f1(){
　　　　var dfd = $.Deferred();
　　　　setTimeout(function () {
　　　　　　// f1的任务代码
　　　　　　dfd.resolve();
　　　　}, 500);
　　　　return dfd.promise;
　　}

이런 방식으로 작성하면 콜백 함수가 체인 작성 방식이 되어 프로그램의 흐름을 명확하게 볼 수 있고 많은 강력한 기능을 실현할 수 있는 완전한 지원 방식 세트가 있다는 장점이 있습니다.

예를 들어 여러 콜백 함수를 지정합니다.

코드는 다음과 같습니다.

　　f1().then(f2).then(f3);

또 다른 예는 오류 발생 시 콜백 함수를 지정합니다.

코드는 다음과 같습니다.

　　f1().then(f2).fail(f3);

게다가 하나도 있습니다. 이전 세 가지 방법에는 없는 기능입니다. 장점: 작업이 완료되고 콜백 함수가 추가되면 콜백 함수가 즉시 실행됩니다. 따라서 이벤트나 신호를 놓칠까 봐 걱정할 필요가 없습니다. 이 방법의 단점은 작성하고 이해하기가 상대적으로 어렵다는 것입니다.

관련 무료 학습 권장사항: javascript 비디오 튜토리얼

위 내용은 JavaScript에서 비동기 프로그래밍 패턴을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!