인터페이스 머지

Spec

• Spec 이름의 사용자형을 정의한다.
• Descriptor와 Exporter로 이뤄지며, 역할은 데코레이터로 부여한다.
• Descriptor는 항상 새로운 Spec를 반환한다.
  • Descriptor는 Array.prototype.map 과 동일한 형태로 동작한다.
• Exporter는 Object, HTMLElement, String과 같은 데이터형으로 반환한다.
  • Exporter는 Array.prototype.toString과 동일한 형태로 동작한다.

내부동작 예시

import {descriptor, exporter} from './decorator'

class Spec {
  #properties
  constructor (properties) {
    this.#properties = properties
  }
  @descriptor
  on (eventName, listener) {
    this.#properties[eventName] = listener
  }
  @exporter
  toJSON () {
    return Object.assign({}, this.#properties)
  }
}

export Spec

정적 펙토리 메서드

• 정적 펙토리 메서드를 통한 생성 방법도 제공한다.
• 싱글턴, 서브 타입 반환 등 활용성이 커지므로 객체 생성시 널리 사용되고 있는 방법(이펙티브 자바 책에 소개됨)

class Spec {
  #properties
  constructor (properties) {
    this.#properties = properties
  }
  static create (properties) {
    return new Spec(properties)
  }
}

const foo = new Spec()
const bar = Spec.create()

Element

• Element는 HTMLElement를 정의한다.
• 리턴값은 Spec을 반환한다.

내부동작 예시

export { div } from './div'
export { p } from './p'
export { text } from './text'

div.js

import Spec from '../Spec/index'
export const div = () => new Spec({nodeName: 'div'})

사용예제

import Spec from './Spec'
import { div, p, text } from './Element'

const spec = new Spec()
  .on('click', () => {})
  .className('table table-border')
const child = [
  div(),
  p(),
  text('Hello world')
]
const tag = div().spec(spec).children(...child)
const data = tag.toJSON()

spec

{
  spec: {
    className: 'table table-border',
    click () {}
  }
}

children

{
  children: [
    {nodeName: 'div'},
    {nodeName: 'p'},
    {nodeName: 'text', value: 'Hello World'}
  ]
}

data

{
  nodeName: 'div',
  children: [
    {nodeName: 'div'},
    {nodeName: 'p'},
    {nodeName: 'text', value: 'Hello World'}
  ],
  spec: {
    className: 'table table-border'
  }
}