바닐라 JS(POC)의 단방향 데이터 바인딩

코드 및 데모

작은 조각으로 나누자

나는 당신이 이미 data-binding 에 익숙하다고 가정합니다.

대부분의 최신 프론트 엔드 프레임워크는 즉시 사용할 수 있는 데이터 바인딩을 제공하지만 내부에 무엇이 있습니까?

단방향 데이터 바인딩의 기본 버전을 구현해 보았는데 정말 재미있었습니다. :)

그렇다면 단방향 데이터 바인딩에 필요한 것은 무엇입니까?

보기 HTML의 예입니다.

JavaScript로 메모리에 보관되는 상태입니다.

주요 기능은 다음과 같습니다.

Everytime the state changes, the view need to be updated

HTML 보기가 있다고 가정해 보겠습니다.

    <div data-binding="quote"></div>

및 상태:

    const state = {
      quote: 'Either you run the day, or the day runs you.'
    };

처음으로 보기를 쉽게 설정할 수 있습니다.

    document.querySelector('[data-binding="quote"]').innerHTML = state.quote

우리는 상태를 업데이트할 때 다음과 같은 마법을 원합니다.

    state.quote = 'We become what we think about'

보기가 마술처럼 바뀌어야 합니다. 이를 달성하기 위해 set 객체에 대한 state 속성의 기본 동작을 수정하여 모델을 업데이트하는 것 외에 뷰도 업데이트하도록 할 수 있습니다.

JavaScript에서 이를 수행하는 한 가지 방법은 Proxy Object 을 사용하는 것입니다.

    const createState = (state) => {
      return new Proxy(state, {
        set(target, property, value) {
          target[property] = value; // default set behaviour
          render(); // updates the view everytime the state changes
          return true;
    }
      });
    };

    const state = createState({
      quote: 'Either you run the day, or the day runs you.' // creates initial state
    });

state 를 업데이트할 때마다 프록시의 힘으로 render 함수가 호출됩니다.render의 가능한 구현은 다음과 같습니다.

    const render = () => {
     document.querySelector('[data-binding="quote"]').innerHTML = state.quote
    };

이제 다음을 사용하여 상태를 수정하면

    state.quote = 'We become what we think about.'

render 함수가 호출되고 뷰가 업데이트됩니다! 마법! 👨‍💻