MVVM 구현(3) - 게시 구독/관찰자 모드

구독/관찰자 모드를 발표합니다.즉, 여러 사용자(관찰자Observer가 특정한 주제Subject를 구독할 수 있다.테마 내용이 업데이트될 때 이 테마를 구독한 모든 사용자는 해당하는 알림을 받을 수 있다(Notify.

코드 구현

Subject는 구조 함수로 new Subject() 테마 대상을 만듭니다.이 대상 내부는 현재 테마를 구독하는 관찰자 그룹을 유지합니다.주제에는 관찰자(addObserver 추가, 관찰자 삭제removeObserver 및 관찰자 업데이트notify 알림 세 가지 방법이 포함되어 있다.notify시 사실상 모든 관찰자observer 자체update 방법을 호출한다.Observer는 구조 함수로 new Observer()에 관찰자 대상을 만들고 이 대상에는 update 방법이 포함되어 있다.

//  
function Subject() {
  this.observers = []
}

//  
Subject.prototype.addObserver = function(observer) {
  this.observers.push(observer)
}

//  
Subject.prototype.removeObserver = function(observer) {
  var index = this.observers.indexOf(observer)
  if(index > -1){
    this.observers.splice(index,1)
  }
}

//  
Subject.prototype.notify = function() {
  this.observers.forEach(function(observer){
    observer.update()
  })
}

function Observer(name) {
  this.name = name
  this.update = function() {
    console.log(name + ' update...')
  }
}

//  
var subject = new Subject()

//  1
var observer1 = new Observer('even')
//  1
subject.addObserver(observer1)

//  2
var observer2 = new Observer('yao')
//  2
subject.addObserver(observer2)

//  
subject.notify()

ES6 작성기/클래스 쓰기

class Subject {
  constructor() {
    this.observers = []
  }
  addObserver(observer) {
    this.observers.push(observer)
  }
  removeObserver(observer) {
    var index = this.observers.indexOf(observer)
    if(index > -1){
      this.observers.splice(index,1)
    }
  }
  notify() {
    this.observers.forEach(observer => {
      observer.update()
    })
  }
}

class Observer {
  constructor() {
    this.update = function() {
    }
  }
}

let subject = new Subject()
let observer = new Observer()
observer.update = function() {
  console.log('observer update...')
}
subject.addObserver(observer)
subject.notify()