JS 모드 - 모드 관측기

// 항목, 각 관찰자 상태 변경의 트리거를 수신하는 
클래스에게 제목 { 
  생성자 () { 
      this.state = 0 
      this.observers = [] 
  } 
  의 getState () { 
      복귀 this.state 
  } 
  setState를 (주) { 
      this.state = 주 
      this.notifyAllObservers () 
  } 
  어태 (관찰자) { 
      this.observers.push (관찰자) 
  } 
  notifyAllObservers () { 
      this.observers.forEach (관찰자 => { 
          observer.update () 
      }) 
  } 
} 

// 관찰자, 대기 트리거 
클래스 옵저버 { 
  생성자 (이름, 주제) { 
      this.name 이름 = 
      this.subject = 주제
      this.subject.attach (이) 
  } 
  업데이트 () { 
      을 console.log ( '$ {this.name} 업데이트, 상태 : $ {this.subject.getState는 ()}`) 
  } 
} 

//测试代码
하자의 새로운 = 주제 (는) 
O1 = 새 관찰자 ( 'O1'의) 할 
수 있도록 O2 = 새 관찰자 ( 'O2', S) 
할 수 O3 = 새 관찰자 ( '03', S) 

s.setState (1)

관찰자의 상태를 변경하는 경우, 관찰자는 상대적으로 일을 수행

관찰자와 커플 링의 관찰, 정도가 상대적으로 작고, 코드 변경은 내부의 뷰어에 기록되지 아니

시청자 관찰자의 복수가있을 수 있습니다

다른 시나리오

시계 모니터 변수 1.vue 업데이트

다음 비동기 2. 약속은 다음 FUNC 시청자의 다수가있을 수 있습니다. 값 뷰어 실행, 뷰어를 업데이트되며, 코드는 상대적으로 작은 커플 링입니다. 관찰자보다 더있을 수 있습니다.

새로운 새로운 약속 FUNC VAR = ((해결 거부) => { 
    해결 ( '리턴 값'); 
}) 

func.then (함수 () { 
    CONSOLE.LOG ( "관찰자 실행 ...."); 
}) ; 

func.then (함수 () { 
    ( "관찰자 실행 ...")로 CONSOLE.LOG; 
});

JS 모드 - 모드 관측기

추천