ES5 中的可共享组件

Question

现代 javascript 框架，如 Vue、React 和 angular 支持在 Web 应用程序中跨 page/module 创建可共享组件。我如何使用 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 节点或应用功能。所有这些都可以与您的脚本一起使用。

希望这能成为灵感:)

ES5 中的可共享组件

Shareable component in ES5

javascript

ecmascript-5