MVC란

참고자료: Maria - The MVC Framework for JavaScript Application

전통적인 MVC는 아래 3가지의 패턴으로 이뤄진다.

1. Model-View: Observer Pattern
2. View-Controller: Strategy Pattern
3. View-Views: Composite Pattern

const model = new Model();
const view = new View(model);
const controller = new Controller(model, view);

view.setController(controller);

document.body.appendChild(view.build());

View 확장

class View {
  build () {
    const div = document.createElement('div');
    const items = this.model.getState();
    
    items.forEach((item) => {
      const childView = new ChildView(this.model);
      childView.setController(this.controller);
      div.appendChild(childView.build());
    });

    return div;
  }
}

Model 확장

const modelCollection = new ModelCollection();
const model1 = new Model();
const model2 = new Model();

modelCollection.add(model1);
modelCollection.add(model2);

const view = new View(modelCollection);

class View {
  build () {
    const div = document.createElement('div');
    const models = this.model.getModels();
    
    models.forEach((model) => {
      const childView = new ChildView(model);
      const childController = new ChildController(model, childView);

      childView.setController(childController);

      div.appendChild(childView.build());
    });

    return div;
  }
}