Rx 응답 식 프로 그래 밍

1.관찰 가능
Observable 은 말 그대로'관찰 가능 자'라 고 부 릅 니 다.다시 말 하면 특정한'데이터 소스'나'사건 소스'입 니 다.이런 데이터 소스 는 관찰 할 수 있 는 능력 을 가지 고 있 습 니 다.이것 은 당신 이 자발적으로 데 이 터 를 건 지 는 것 과 본질 적 인 차이 가 있 습 니 다.하나의 이미지 로 비유 하면 Observable 은 수도꼭지 와 같 습 니 다.수도 꼭 지 를 틀 어도 됩 니 다.Observable 을 구독 한 후에 물-데이터 가 끊임없이 흘러 나 옵 니 다.이것 이 바로 응답 식 프로 그래 밍 의 핵심 사상 인 주동 적 으로 수 동적 으로 변 하 는 것 이다.그러나 이것 은 이 글 에서 상세 하 게 설명 하지 않 는 다.

Observable 은 하나의 개념 으로 서로 다른 방식 으로 구체 적 으로 실현 할 수 있다.본 고 는 고급 함 수 를 통 해 두 가지 상용 Observable:from Event 와 Interval 을 실현 한다.Observable 에 대한 구독 과 구독 취소 두 가지 행 위 를 설명 함으로써 독자 들 이 Observable 이 무엇 인지 진정 으로 이해 하도록 도와 준다.
2.고급 함수
고급 함수 의 개념 은 함수 식 프로 그래 밍 에서 유래 한 것 으로 간단 한 정 의 는 함수 의 입 참 또는 반환 값 은 함수 의 함수 이다.예 를 들 면:

function foo(arg){
    return function(){
        console.log(arg)
    }
}
const bar = foo(“hello world”)
bar()  // hello world

ps:고급 함수 가 할 수 있 는 일이 많 습 니 다.여 기 는 본 논문 에 필요 한 상황 에 만 사용 합 니 다.
위의 이 foo 함수 호출 은 hello World 를 직접 인쇄 하지 않 고 이 hello World 를 캐 시 합 니 다.다음 에 우 리 는 실제 수요 에 따라 되 돌아 온 bar 함 수 를 호출 한 다음 에 hello World 를 인쇄 하 는 작업 을 진정 으로 수행 합 니 다.
왜 이렇게 포장 을 해 야 합 니까?실제로 이렇게 하 는 효 과 는 바로'지연'호출 이다.모든 정 수 는 이'지연'이라는 두 글자 안에 있다.우 리 는 실제로 택배 상자 처럼 보 이 는 행동 을 포장 했다.

안 에는 다른 물건 을 담 을 수 있 지만 물류 에 있어 서 는 통 일 된 물건 이다.따라서 택배 상자 에 대한 통일 적 인 조작 을 형성 할 수 있다.예 를 들 어 쌓 기,운송,저장,심지어 상 자 를 여 는 동작 도 일치 하 다.
앞의 예 로 돌아 가 foo 함 수 를 호출 하 는 것 은 택배 상 자 를 포장 한 것 과 같 습 니 다.이 택배 상자 안에 고정된 프로그램 이 있 습 니 다.바로 이 택배 상자(bar 호출)를 열 때 인쇄 작업 을 수행 하 는 것 입 니 다.
우 리 는 foo 1,foo 2,foo 3..........................................................................전 제 는 이 foo 가 함 수 를 되 돌려 주 는 것 입 니 다.그래 야'열기'동작,즉 되 돌아 오 는 함 수 를 만족 시 킬 수 있 습 니 다.

function foo1(arg){
    return function(){
       console.log(arg+"?")
    }
}
function foo2(arg){
      return function(){
         console.log(arg+"!")
     }
}
const bar1 = foo1(“hello world”)
const bar2 = foo2("yes")
bar1()+bar2() // hello world? yes!

3.택배 박스 모델
3.1 택배 박스 모델 1:from Event
위의 기초 가 있 으 면 Rx 프로 그래 밍 에서 가장 자주 사용 하 는 Observable-from Event(...)를 살 펴 보 겠 습 니 다.Rx 프로 그래 밍 초보 자 에 대해 서 는 처음에는 from Event(...)와 addEventListener(...)가 어떤 차이 가 있 는 지 이해 하기 어 려 웠 다.

btn.addEventListener("click",callback)
rx.fromEvent(btn,"click").subscribe(callback)

이 코드 를 직접 실행 하면 확실히 효과 가 같다.그럼 차 이 는 어디 에 있 습 니까?가장 직접적인 차 이 는 subscribe 함수 가 btn 이 아 닌 fromEvent(...)에 작용 하 는 것 이 고,addEventListener 는 btn 에 직접적 으로 작용 하 는 것 이다.subscribe 함 수 는 일종 의'열기'동작 이 고 from Event(...)는 일종 의 택배 상자 입 니 다.
from Event 는 실제로 addEventListener 에 대한"지연"호출 입 니 다.

function fromEvent(target,evtName){
    return function(callback){
        target.addEventListener(evtName,callback)
    }
}
const ob = fromEvent(btn,"click")
ob(console.log)//     subscribe

읊다,읊조리다from Event 는 본질 적 으로 고급 함수 입 니 다.
subscribe 를 어떻게 실현 하여'열기'작업 을 완성 하 는 지 에 대해 본 논문 의 토론 범위 에 있 지 않 고 Rx 프로 그래 밍 에서 이 subscribe 의 동작 을'구독'이 라 고 합 니 다.'구독'은 모든 Observable 이 통일 적 으로 갖 춘 조작 이다.다시 한 번 강조 하 자 면 본 논문 에서 Observable 에 대한'호출'은 논리 적 으로 subscribe 에 해당 한다.
다음은 예 를 하나 더 들 면 기본적으로 독자 로 하여 금 2 반 N 을 들 게 할 수 있다.
3.2 택배 박스 모델 2:interval
Rx 에 interval 이 있 는데 setInterval 과 어떤 차이 가 있 습 니까?
누군가가 이미 앞 다 투어 대답 하기 시 작 했 을 것 이다.interval 은 setInterval 에 대한 지연 호출 이다!bingo！

function interval(period){
    let i = 0
    return function(callback){
        setInterval(period,()=>callback(i++))
    }
}
const ob = interval(1000)
ob(console.log)//     subscribe

위의 두 가지 예 를 보면 from Event(...)든 Interval(...)이 든 내 부 는 완전히 다른 논리 이지 만 그들 은'택배 박스'라 는 것 에 속 하기 때문에 우 리 는 그것 을 Observable―관찰자 라 고 부른다.
fromEvent 와 Interval 자 체 는'택배 함'을 만 드 는 모델 일 뿐 호출 후 되 돌아 오 는 것 만 이'택배 함',즉 fromEvent(btn,'click'),interval(1000)등...
4.고급 택배 상자
위의 기초 가 있 으 면 아래 에서 진급 을 시작 합 니 다.우 리 는 그렇게 많은 택배 상 자 를 가지 고 있 으 면 이 택배 상자 들 을 다시 포장 할 수 있 습 니 다.

글 의 첫머리 에 택배 상자 가 일부 조작 을 통일 시 켰 기 때문에 우 리 는 많은 택배 상 자 를 한데 쌓 을 수 있다.즉,큰 택배 상자 로 조합 할 수 있다!이 큰 택배 함 은 작은 택배 함 과 마찬가지 로'열기'조작(즉 구독)이 있다.우리 가 이 큰 택배 상 자 를 열 었 을 때 무슨 일이 일어 날 까요?
작은 택배 상자(concat)를 하나씩 열 거나 작은 택배 상자(merge)를 한꺼번에 열 수도 있 고 가장 쉽게 열 리 는 택배 상자(race)만 열 수도 있다.
다음은 간단 한 merge 방법 입 니 다.

function merge(...obs){
    return function(callback){
        obs.forEach(ob=>ob(callback)) //        
    }
}

우 리 는 이전의 from Event 와 interval 을 가지 고 예 를 들 자!

merge 방법 으로 Observable 두 개 를 조합 합 니 다:

const ob1 = fromEvent(btn,'click') //      1
const ob2 = interval(1000) //      2
const ob = merge(ob1,ob2) //      
ob(console.log) //       

우리 가'열기'(구독)라 는 큰 택배 상자 ob 를 열 었 을 때,그 중 두 개의 작은 택배 상자 도'열기'(구독)되 고,어떤 작은 택배 상자 안의 논리 도 실행 되 며,우 리 는 두 개의 Observable 을 합 쳐 하나의 것 이 되 었 다.
이것 이 바로 우리 가 각종 비동기 함 수 를 택배 상자(Observable)로 포장 하 는 이유 입 니 다.그들 에 게 통일 적 으로 조작 할 수 있 도록 편리 합 니 다!물론'열기'(구독)만 있 습 니 다.이 조작 은 초급 기능 일 뿐 입 니 다.다음은 진급 을 시작 합 니 다.
5.택배 박스 소각
5.1,택배 박스 폐기-구독 취소

우 리 는 fromEvent 를 예 로 들 었 습 니 다.이전에 우 리 는 간단 한 고급 함 수 를 써 서 addEventListener 에 대한 패키지 로 삼 았 습 니 다.

function fromEvent(target,evtName){
    return function(callback){
        target.addEventListener(evtName,callback)
    }
}

우리 가 이 함 수 를 호출 할 때 택배 상자(from Event(btn,click)가 생 성 되 었 습 니 다.우리 가 이 함수 가 되 돌아 오 는 함 수 를 호출 했 을 때 택배 상자(from Event(btn,click)(console.log)를 열 었 습 니 다.
그럼 저희 가 이 열 린 택배 상 자 를 어떻게 없 애 죠?
우선 우 리 는 이미 열 린 택배 상 자 를 받 아야 합 니 다.위의 함수 호출 결 과 는 void 입 니 다.우 리 는 어떠한 조작 도 할 수 없 기 때문에 열 린 상태의 택배 상 자 를 만들어 야 합 니 다.아니면 고급 함 수 를 사용 하 는 사상:되 돌아 오 는 함수 에서 함 수 를 하나 더 되 돌려 서 소각 작업 에 사용 합 니 다.

function fromEvent(target,evtName){
    return function(callback){
        target.addEventListener(evtName,callback)
        return function(){
            target.removeEventListener(evtName,callback)
        }
    }
}
const ob = fromEvent(btn,'click') //      
const sub = ob(console.log) //      ，             
sub() //      

마찬가지 로 interval 에 대해 서도 우 리 는 법 대로 만 들 수 있다.

function interval(period){
    let i = 0
    return function(callback){
        let id = setInterval(period,()=>callback(i++))
        return function(){
            clearInterval(id)
        }
    }
}
const ob = interval(1000) //      
const sub = ob(console.log) //      
sub() //      

5.2,고급 택배 박스 소각

우 리 는 merge 를 예 로 들 면:

function merge(...obs){
    return function(callback){
        const subs = obs.map(ob=>ob(callback)) //               
        return function(){
            subs.forEach(sub=>sub()) //          
        }
    }
}
 
const ob1 = fromEvent(btn,'click') //      1
const ob2 = interval(1000) //      2
const ob = merge(ob1,ob2) //      
const sub = ob(console.log) //       
sub() //       

우리 가 큰 택배 상 자 를 소각 할 때,안에 있 는 모든 작은 택배 상 자 를 함께 소각 할 것 이다.
여섯
여기에서 우 리 는 Observable 의 두 가지 중요 한 조작(구독,구독 취소)을 끝 냈 습 니 다.주의해 야 할 것 은 구독 취소 행 위 는 Observable 에 작용 하 는 것 이 아니 라 이미'열 린'택배 상자(Observable 구독 후 돌아 오 는 것)에 작용 합 니 다!
Observable 은 이 외 에 도 두 가지 중요 한 조작 이 있 습 니 다.즉,사건 을 보 내 고 완성/이상 을 보 내 는 것 입 니 다.(이 두 조작 은 Observable 이 주동 적 으로 시작 한 반전 에 속 하고 조작 방향 과 반대 되 기 때문에 조작 이 라 고 할 수 없습니다.)
이 두 가지 행 위 는 택배 박스 로 는 그다지 형상 적 이지 않 습 니 다.Observable 을 수도꼭지 에 비유 할 수 있 습 니 다.원래 택배 박스 를 열 었 다가 수도 꼭 지 를 틀 었 는데 우리 가 들 어 온 반전 함 수 는 물 을 받 는 물컵 에 비유 할 수 있 습 니 다!모두 가 반전 함수 에 대해 이미 매우 익숙 하기 때문에 본 고 는 더 이상 군말 하지 않 겠 다.
후기
우리 가 배 운 내용 을 정리 하면 우 리 는 고급 함 수 를 통 해 일부 조작 을'지연'시 켰 고 통 일 된 행 위 를 부여 했다.예 를 들 어'구독'은 비동기 함 수 를 지연 시 켰 다.'구독 취소'는 바로 위 에서 자원 을 파괴 하 는 함 수 를'지연'하 는 것 이다.
이른바'지연'실행 이란 Rx 프로 그래 밍 의 배후 에서 가장 이해 하기 어렵 고 가장 핵심 적 인 부분 이다.Rx 의 본질은 비동기 함 수 를 봉인 한 다음 에 4 대 행위 로 추상 화 하 는 것 이다.구독 취소,구독 취소,이벤트 발송,완성/이상 이다.
실제 Rx 라 이브 러 리 를 실현 하 는 방법 은 여러 가지 가 있 습 니 다.본 고 는 고급 함수 의 사상 을 이용 하여 Observable 의 본질 을 이해 하도록 도 왔 습 니 다.공식 적 으로 실 현 된 버 전에 서 Observable 이라는 택배 박스 는 고급 함수 가 아니 라 대상 이지 만 본질 적 으로 똑 같 습 니 다.
이상 은 Rx 응답 식 프로 그래 밍 의 상세 한 내용 입 니 다.Rx 응답 식 프로 그래 밍 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 십시오!