diffDOM을 사용한 DOM 비교

가상 DOM에 의존하지 않고 dom 요소를 업데이트하려는 경우 대안은 무엇입니까?.

실제로 많은 대안이 있으며 diffDOM이 그 중 하나입니다.

다음은 사용 예입니다. diffDOMSample

lib.js

const diffDOM=function(e){...};

const dd = new diffDOM.DiffDOM(); 

let render;

function html(html) {
    var template = document.createElement('template');
    html = html.trim(); // Never return a text node of whitespace as the result
    template.innerHTML = html;
    return template.content.firstChild;
}

function init(view, state, target = document.body) {
  let preview = view(state);
  target.append(preview);
  render = function () {
    dd.apply(preview, dd.diff(preview, view(state)));
  }
}

export { html, init, render }

state.js

import { render } from "./lib.js"

const State = {
    counter: 0
}

const handler = { 
    get(target, property) {
        return target[property];
    },
    set(target, property, value) {
       Reflect.set(target, property, value);   
       render()
       return true
    }
}

const state = new Proxy(State, handler);

export { state }

main.js

import { html, init } from "./lib.js" 
import { state  } from "./state.js"

function inc() {
  state.counter = state.counter + 1;
}

function view (state) {
  let view = html(`
    <div>
      <div>Counter <span>${state.counter}</span> </div> 
      <button>INC</button>
    </div>
 `);
 let btn = view.querySelector("button")
 btn.onclick = inc;
 return view;
}

init(view, state);fully at the following sample :