MVC、MVVMモデルについて

『コードスピッツ』レッスン[ES 6+デザインモードとビューモード]を受講後まとめ
https://www.youtube.com/watch?v=LJhkPP0E6dw&list=PLBNdLLaRx_rLSwAiLS52IXEo26KsMhzLC&index=2&ab_channel=%EC%BD%94%EB%93%9C%EC%8A%A4%ED%94%BC%EC%B8%A0

MVCモデル

モデル、ビュー、およびコントローラオブジェクトからなる
モデルオブジェクトは、データを保存するために使用されます.ファイバモードが適用されている場合、ここのデータが変更されると、サブスクリプションのコントローラに通知されます.
ビューオブジェクトは、データをレンダリングするために使用されます.
コントローラオブジェクトは、ビューオブジェクトに一致するモデルオブジェクトを検索して描画します.また、アクションハンドル関数があるため、レンダリング中にアクションハンドル関数を使用してコントローラオブジェクトの関数を登録します.

モデルオブジェクト

const Model = class extends Set{
  addController(v){
    super.add(v);
  }
  
  removeController(v){
    super.delete(v);
  }
  
  notify(){
    this.forEach(v => v.listen(this));
  }
}

モデルオブジェクトは、傍観者モードで通知の役割を果たします.ただし、値が変化した場合は、通知する必要はありません.観察中のコントローラだけがあります.
HomeDetailModel

const HomeDetailModel = class extends Model{
  constructor(_id=err(), _title=err(), _memo=''){
    super();
    prop(this,{_title,_id,_memo});
   }
  
  get title(){return this._title;}
  get id(){return this._id;}
  get memo(){return this._memo;}
}

Viewオブジェクト

const View = class{
  constructor(controller){
    prop(this, { controller });
  }
  render(){
    ~
  }
}

model入力を受け入れ、画面に描画する役割を果たす
HomeDetailView

const HomeDetailView = class extends View{
  render(model){
    const title = model.title;
    const memo = model.memo;
    const id = model.id;
    
    return append(el('section'),
      el('h2', 'innerHTML', model.title),
      el('p', 'innerHTML', model.memo),
      el('button', 'innerHTML', 'delete', 'addEventListener', ['click', _ => this.controller.$removeDetail(id)]),
      el('button', 'innerHTML', 'list', 'addEventListener', ['click', _ => this.controller.$list()])
      );
  }
};

コントローラオブジェクト

const Home = class extends Controller{
  detail(){
    const view = new HomeDetailView(this, true);
    const model = new HomeModel(true);
    model.addController(this);
    return view.render(model);
  }
}

HomeDetailModelオブジェクトを受信し、画面に描画します.

MVVM

今回のビューはビューモデルの傍観者です.ViewはViewModelを購読しています.ViewModelはモデルのリスナーであり、ビューのオブジェクトでもあります.
ビューモデルはビューに注目しなくなりました.ビューモデルはモデルを購読しています.今まで理解していたと言えば….二重傍観者モデルのように見えます.