ES5 中的可共享組件

Question

現代 javascript 框架，如 Vue、React 和 angular 支持在 web 應用程序中跨頁面/模塊創建可共享組件。 使用 HTML + ES5 實現這一目標的最佳方法是什么？ 任何庫或框架？ 我正在使用不支持 ES6 的遺留代碼

Answer 1

您可以從 JS 創建 HTML 元素，並帶上一個.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");

然后，您可以向它 append 額外的 DOM 節點或應用功能。 所有這些都可以與您的腳本一起使用。

希望這可以作為靈感:)