MvvmHtmlElement :: VanillaJS로 구현된 Mvvm 프레임워크
🔧

MvvmHtmlElement :: VanillaJS로 구현된 Mvvm 프레임워크

Created
Apr 19, 2021 12:31 PM
Tags
 
notion image
 
VanillaJS 기반으로 MVVM 프레임워크를 구현해 보았다.
인터페이스는 Vue-like 하게... 추상화는 Shadow DOM을 이용했다.
 
현재 지원하고 있는 기능은 다음과 같다.
 

API

Constructor

  • html : html 템플릿
  • data : 컴포넌트의 state가 될 데이터 모델
  • methods : 컴포넌트 내부에서 사용될 메서드
  • watch : state 변경 시 watch 할 callbacks
  • created : 컴포넌트가 생성될 때 실행될 callback
  • mounted : 컴포넌트가 DOM에 mounted 될 때 실행될 callback
 

Properties

  • $root : 컴포넌트의 Shadow DOM 루트
  • $data : 데이터 모델
  • $watcher : watch callbacks
  • $methods : 메서드
  • $emit : Custom Event 디스패치
  • $ref : Shadow DOM 내 Node에 대한 refs
 

DOM Attributes

여기서의 "바인딩"이란 reactive하게 값이 업데이트 되도록 정의함을 의미
 
  • m-bidata-<child-data-name>="<dataName>" : 양방향 바인딩
  • m-data-<child-data-name>="<string value>" : 자식 요소의 data 값 지정
  • m-prop-<child-property-name-to-update>="<dataName>" : 자식 요소의 프로퍼티 값 바인딩
  • m-attr-<child-attribute-name-to-update>="<dataName>" : 자식 요소의 attribute 바인딩
  • m-ref="<refName>" : $ref 를 통해 참조될 Node 정의
  • @<eventname>="<methodName>" : 이벤트 리스너 정의
 

 
이걸 이용하면 물론 Vue나 React, Svelte보다는 당연히 못하겠지만...
번들러나 컴파일링 없이 Component 단위의 애플리케이션을 만들 수 있다.
 
notion image
 
 
 

Loading Comments...