코드스피츠 86 객체지향 자바스크립트 - 5회차 part1 (step 34)

optional vs mandatory

optional : else를 사용하지않음 (반드시 일어나지는 않음)
mandatory : else를 사용함 (반드시 일어나는 일이 존재)

기존 코드 수정하기

// Client 코드
binder.addProcessor(new class extends Processor {
  _process (vm, el, k, v) { el.style[k] = v }
}('styles'))
binder.addProcessor(new class extends Processor {
  _process (vm, el, k, v) { el.setAttribute(k, v) }
}('attributes'))
binder.addProcessor(new class extends Processor {
  _process (vm, el, k, v) { el[k] = v }
}('properties'))
binder.addProcessor(new class extends Processor {
  _process (vm, el, k, v) { el[`on${k}`] = e => v.call(el, e, vm) }
}('events'))

이를 수정해준다.

Processor

const Processor = class {
  category;
  #next = null;
  constructor (category) {
    this.category = category
    Object.freeze(this)
  }
  process (category, vm, el, k, v,
            _0 = type(vm, ViewModel),
            _1 = type(el, HTMLElement),
            _2 = type(k, "string")) {
    this._process(vm, el, k, v)

    // next가 있을 경우, next의 process를 실행한다.
    if (this.#category === category) this._process(vm, el, k, v)

    // category
    if (this.#next !== null) this.#next.process(category, vm, el, k, v)
  }
  _process (vm, el, k, v) { throw 'override' }
  next (processor) {
    this.#next = processor
    return processor
  }
}

next 함수를 추가한다.

const processor = new class extends Processor {
_process (vm, el, k, v) { el.style[k] = v }
}('styles')
processor
  .next(new class extends Processor {
    _process (vm, el, k, v) { el.setAttribute(k, v) }
  }('attributes'))
  .next(new class extends Processor {
    _process (vm, el, k, v) { el[k] = v }
  }('properties'))
  .next(new class extends Processor {
    _process (vm, el, k, v) { el[`on${k}`] = e => v.call(el, e, vm) }
  }('events'))

next를 이용해서 연결짓는다.