JS Generator 함수 의 의미 와 용법 인 스 턴 스 총화

본 논문 의 사례 는 JS Generator 함수 의 의미 와 용법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다. 구체 적 으로 는 다음 과 같 습 니 다.
완 일 봉 선생님 의 《 Generator 함수 의 의미 와 용법 》 총 결 을 읽다.
선생님 의 문장 은 통속 적 이 고 이해 하기 쉬 우 나, 저 는 개인 적 으로 위 에 약간의 차이 가 있 기 때문에 몇 번 을 본 후에 야 비로소 조금씩 느 낄 수 있 습 니까?
그것 을 기록 해라.
아니면 그 말 이 냐, 모든 사물 의 출현 은 대응 하 는 문 제 를 해결 하기 위 한 것 이다.
그렇다면 제 너 레이 터 가 등장 한 것 은 어떤 문 제 를 해결 하기 위 한 것 일 까?
비동기 프로 그래 밍 장면 에서 만약 에 여러 개의 비동기 임무 가 있다 면 그들의 선후 집행 순 서 를 어떻게 처리 합 니까?
일반적인 예 를 들 어 jquery 의 ajax 요청 은 모든 success 가 비동기 작업 입 니 다.
그러면 문제 가 생 겼 습 니 다. 만약 에 페이지 렌 더 링 을 보장 하려 면 5 개의 네트워크 요청 이 모두 돌아 온 후에 페이지 를 렌 더 링 해 야 합 니 다.
우리 의 코드 는:

$.ajax({...success:function(data){
  $.ajax({...success:function(data){
    $.ajax({...success:function(data){
      $.ajax({...success:function(data){
        $.ajax({...success:function(data){
          //do something
        }})
      }})
    }})
  }})
}})

이것 이 바로 '반전 함수 악몽' (callback hell) 입 니 다.
이 문 제 를 해결 하기 위해 서 후에 Deferred 와 promise 가 나 타 났 다.
두 가 지 는 차이 가 크 지 않 고 포장 기법 을 통 해 반전 함 수 를 줄인다.
위의 ajax 는 다음 과 같이 쓸 수 있 습 니 다:

ajax1 = $.ajax({...success:function(data){});
ajax2 = $.ajax({...success:function(data){});
ajax3 = $.ajax({...success:function(data){});
ajax4 = $.ajax({...success:function(data){});
ajax5 = $.ajax({...success:function(data){});
$.when(ajax1,ajax2,ajax3,ajax4,ajax5).done(function(
  //do something
)).then(function(){
  //do something2
})

1.8 버 전 이상 의 jquery ajax 모듈 은 기본 값 으로 Deferred 대상 을 되 돌려 줍 니 다.
Deferred 와 promise 는 리 셋 함 수 를 분리 하여 비동기 작업 의 처리 와 실행 을 두 부분 으로 나 누 어 완성 합 니 다.
그들의 가장 큰 문 제 는 코드 가 불필요 하 다 는 것 이다. 포장 후의 코드 는 모두 then, done 을 통 해 뒤의 내용 을 집행 해 야 하고 차원 감 이 뚜렷 하지 않다 는 것 이다.
그것 은 비교적 무감각 하고 간단 한 서법 이 있 습 니까?
바로 협 정 입 니 다. 저도 이곳 에서 오랫동안 곤 혹 스 러 웠 습 니 다. 앞에서 말 한 것 은 대부분 날 에 자주 사용 되 었 고 원 리 를 잘 알 고 있 습 니 다. 협 정 에 사용 하 는 것 이 적 습 니 다. 우리 가 분석 해 봅 시다.
협 정의 예 를 직접 보 세 요.

function asnycJob() {
 // ...    
 var f = yield readFile(fileA);
 // ...    
}

완 일 봉 선생님 의 말씀:
위 코드 의 함수 asyncJob 은 하나의 협 정 입 니 다. 그 오묘 함 은 바로 그 중의 yield 명령 입 니 다.그것 은 여기까지 집행 하고 집행 권 은 다른 협의 에 맡 길 것 임 을 나타 낸다.즉, yield 명령 은 비동기 두 단계 의 경계선 이다.협 정 은 yield 명령 을 받 으 면 잠시 멈 추고 집행 권 이 돌아 오 면 잠시 멈 춘 곳 에서 계속 뒤로 집행 한다.그것 의 가장 큰 장점 은 코드 의 쓰기 가 동기 화 작업 과 매우 비슷 하 다 는 것 이다. 만약 에 yield 명령 을 제거 하면 정말 똑같다.
그동안 이해 하지 못 했 던 이 유 는 이 두 마디 를 제대로 읽 지 못 했 기 때 문 이 었 는데, 지금 은 진지 하 게 보 니 생각 이 확 트 였 다.중요 한 게 몇 가지 가 있어 요.
우선 asnycJob 이라는 방법 은 하나의 협정 입 니 다.
yield 는 return 에 해당 하 며 현재 프로그램의 실행 상 태 를 되 돌려 줍 니 다.
yield 가 실 행 될 때 프로그램 을 끊 고 돌아 오 기 를 기다 린 후에 계속 실행 합 니 다.
이 시간 을 걸 고 다른 협 정 함 수 를 실행 합 니 다.
Generator 함 수 는 ES6 대 협 정 함수 의 실현 입 니 다.
Generator 함수 의 특징 은 코드 실행 을 일시 정지 할 수 있다 는 것 이다.
협 정 함수 와 마찬가지 로 yield 키 워드 를 만나면 코드 실행 을 중단 합 니 다.
일반 함수 와 의 차 이 는 Generator 함수 가 결 과 를 후회 하지 않 고 포인터 대상 으로 돌아 가 는 것 입 니 다.
포인터 의 next 방법 을 통 해 포인터 가 다음 yield 키워드 위 치 를 가리 키 도록 이동 합 니 다.
즉, Generator 함수 의 단계별 실행 은 next 방법 으로 제어 된다.
Generator 함 수 를 사용 하면 저희 코드 가 얼마나 바 뀔 까요?

fangction* gen(){
  var url = 'user/get/info';
  var data = yield $.get({url:url});
  console.log(data.userName);
}

원 격 인터페이스의 귀환 시 기 를 걱정 할 필요 가 없다. 완전히 동기 화 된 방식 으로 코드 를 쓰 면 된다.
하지만 단점 도 있 습 니 다. Generator 함 수 는 한 단계 의 조작 을 간결 하 게 하지만 절차 에 대한 관리 가 불편 합 니 다.
위의 예 는 어떻게 집행 합 니까?

var g = gen();
g.next();
g.next();

next 방법의 역할 은 단계별 로 Generator 함 수 를 실행 하 는 것 이다.next 방법 을 호출 할 때마다 대상 을 되 돌려 줍 니 다.
현재 단계 의 정보 (value 속성 과 done 속성) 를 표시 합 니 다.value 속성 은 yield 문장 뒤의 표현 식 값 으로 현재 단계 의 값 을 표시 합 니 다.
done 속성 은 하나의 불 값 으로 Generator 함수 가 실행 되 었 는 지, 즉 다음 단계 가 있 는 지 를 나타 낸다.
Generator 함 수 를 실행 하기 위해 서 는 두 번 의. next 방법 이 필요 합 니 다.
비동기 작업 의 프로 세 스 관 리 를 어떻게 자동화 하 는 지 에 대해 서 는 co, thunk, async 의 도움 이 필요 합 니 다.
Generator 함수 의 의미 와 용법
관심 있 는 친 구 는 온라인 HTML / CSS / JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 운행 효 과 를 테스트 합 니 다.
더 많은 자 바스 크 립 트 관련 내용 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,,,,,,
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.