virtual-dom는 간단한 자바스크립트 라이브러리로 diff 가상 DOM을 생성하고 생성하는 데 사용된다.
GiitHub의 example에서 알 수 있듯이 이 프로그램 라이브러리만 간단한 형식으로 동적 보기를 실현할 수 있다.
이 간단함은 매우 매력적이어서 나는 실제로 사용한 적이 있다
나는 명백한 일을 총결하고 싶다.

가상 DOM이란?

React 등 이전부터 채택되었는데 요즘 유행하는 느낌은 가상 DOM이다

무거운 진짜 DOM과 달리 가상 DOM을 구축한다(JS 대상이기 때문에 가볍다) 트리

상태가 바뀔 때마다 가상 DOM을 구축하여 지난번 가상 DOM과 diff를 얻어 실제 DOM

에 응용한다.
동적 보기를 실현하는 형식.
가상이기 때문에 브라우저뿐만 아니라 서버측 HTML 렌더링에서도 사용할 수 있습니다.

예제

카운터 예

계수기를 준비하는view 모델counter

데이터 재현 보기 기반 처리render

가상 DOM에서 실제 DOM 생성

가상 DOM의 변경 사항을 확인하고 패치

이런 절차에서 MV* 스타일의 간단한 계수기를 기술해 보자.

var h = require('virtual-dom/h');
var diff = require('virtual-dom/diff');
var patch = require('virtual-dom/patch');
var createElement = require('virtual-dom/create-element');

// ビューをアップデート
function update() {
    var newTree = render(counter);
  var patches = diff(tree, newTree);
  patch(node, patches);
  tree = newTree;
}

// 仮想DOMを生成（レンダリング）
function render(counter) {
  return h('div', [
    h('p', String(counter.value)),
    h('button', {onclick: function () { counter.increment(); }}, 'Increment')
   ]);
}

var counter = {
  value: 0,
  increment: function () {
    this.value += 1;
    update();
  }
};

var tree = render(counter);
var node = createElement(tree);
document.body.appendChild(node);

사용법

virtual-dom는 npm부터 설치하는 것을 전제로 하기 때문에 Browserify와 웹 패키지를 통해 설치해야 합니다.
바로 시도하려면 Browserify를 사용한 코드RequireBin를 온라인으로 바로 실행할 수 있어 편리하다.

뻔한 일

주로 Vue입니다.Knockoutjs 등으로DOM에서 데이터를 직접 연결하는 형식의 라이브러리·프레임워크를 비교하고 싶습니다.

간단하고 알기 쉽다

DOM에 데이터를 직접 연결하는 프로그램 라이브러리의 설치는 검은색 상자로 변하기 쉽다
가상 DOM의 생성, 비교, 응용만 통해 모든 보기 조작을 나타낼 수 있어 매우 명쾌하다.
virtual-dom 자체도 작은 프로그램 라이브러리로 코드를 바로 읽을 수 있습니다.

보기에 제공되는 데이터 구조는 자유롭다

데이터 귀속 시스템 프레임워크에서 데이터의 변화를 감지하고 다른 값에 의존하는 값을 따라가기 위해
보기에 전달되는 데이터는 많은 제한을 받을 수 있다고 생각합니다. (Vue.js는 JSON의 유효한 데이터로 제한되고, Knockout.js는 반드시 ko.observable라는 특별한 값을 사용해야 합니다.)
virtual-dom라면 어떤 값이 변할 때 모든 보기를 수동으로 업데이트하면 되기 때문에 이 제한을 해제하는 것이 편리합니다.
특히 나무 구조처럼 복잡한 데이터 구조를 처리하고 싶은 상황에서 진정한 JS 데이터를 처리해 주시면 감사하겠습니다.

실수하기 쉽다

보기의 생성 과정이 실제 DOM과 복잡한 데이터 연결과 관련이 없는 표현 처리에 통합되어 오류를 쉽게 식별할 수 있어서 매우 기쁘다.
이것은 가상 DOM 자체의 큰 장점이라고 한다.

서버측 HTML 렌더링과 비슷합니까?

매번 보기를 생성하는 생각은 서버 측의 HTML 템플릿과 비슷하기 때문에 서버 측의 사람들에게는 비교적 이해하기 쉽다.

JS로 뷰를 기술해야 합니다.

데이터가 시스템 라이브러리에 귀속된 상황에서 동적 보기의 기술은 HTML에서 선언할 수 있는 것과 상반된다.
자유도가 높아지는 한편, 시야에 복잡한 논리가 들어가 있어 가독성을 유지하기는 어려울 것 같다.

총결산

virtual-dom로 원시 동적 보기를 묘사하는 방법은 주요한 방법이라고는 말할 수 없지만 좋은 점도 많다.
virtual-dom 같은 가상 DOM 시스템을 기반으로 다양한 것을 만들어 보는 것도 흥미롭다.(virtual-dom를 바탕으로 제작된 프레임mercury 등이 대표적이다)