Совместно используемый компонент в ES5

Question

современные javascript фреймворки, такие как Vue, React и angular, имеют поддержку для создания совместно используемых компонентов на странице / модуле в веб-приложении. Как лучше всего добиться этого, используя HTML + ES5? Любая библиотека или фреймворк? Я использую устаревший код, который не поддерживает ES6

Answer 1

Вы можете создать элементы HTML из JS и либо принести с ним файл .css для стилизации, либо стилизовать его с помощью JS. А затем вы просто импортируете его в свой HTML вот так:

<script src="yourcomponent/index.js"></script>

Вы также можете использовать cdn для развертывания вашего компонента.

Пример index.js в вашем компоненте :

function createRoot() {
  const rootElement = document.createElement("div");

  document.body.appendChild(rootElement);

  return rootElement;
}

function createComponent(root = createRoot(), elementType, className) {
   const componentWrapper = document.createElement(elementType);
   componentWrapper.setAttribute("class", className);

   return componentWrapper;
}


// usage

// you can pass root or not
const component = createComponent(document.getElementById("root"), "div", "my-component-wrapper");

Затем вы можете добавить к нему дополнительные узлы DOM или применить функциональность. Все это можно будет перенести в ваш сценарий.

Надеюсь, это послужит вдохновением :)