ES5中的可共享组件

Question

现代的javascript框架，如Vue，React和angular都支持在web应用中跨pagemodule创建可共享的组件，我如何使用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");

你可以给它添加额外的DOM节点或应用功能。所有这些都可以在你的脚本中实现。

希望这能给你带来启发:)