原生JavaScript中组件的复用相关问题

Question

纯原生JS，需要一个样式比较复杂的自定义组件。
想要在很多页面复用，想到了一种方式，但没试过：
在main.js中定义一个公共方法，动态创建构成该组件的dom元素，导入包含该组件样式的css文件并与组件的dom绑定（css比较复杂，直接在方法里写不好维护）。使用时直接调用该公共方法。
三个问题：1. 如何导入css文件？2. 导入后如何找到与该组件对应的部分？ 3. 找到该部分后如何与dom绑定？

或者还有其他比较好的组件复用的方式？

Answer 1

该回答引用GPTᴼᴾᴱᴺᴬᴵ
在原生JavaScript中，您可以使用以下方法来解决您的问题：

1.如何导入CSS文件？
您可以通过创建一个新的元素并将其添加到HTML文档的部分来导入CSS文件。以下是示例代码：

function loadCssFile(filename) {
  var link = document.createElement("link");
  link.setAttribute("rel", "stylesheet");
  link.setAttribute("type", "text/css");
  link.setAttribute("href", filename);
  document.head.appendChild(link);
}

然后，您可以在您的公共方法中调用loadCssFile()函数并将所需的CSS文件名作为参数传递。

2.导入后如何找到与该组件对应的部分？
您可以使用CSS选择器来选择与您的组件相关的DOM元素。例如，您可以使用一个特定的class名称来标识该组件，并使用document.querySelector()方法来选择该class对应的DOM元素。以下是示例代码：

function createComponent() {
  loadCssFile("your-component-styles.css");
  var component = document.createElement("div");
  component.classList.add("your-component-class");
  // Other code to create the component...
  var parentElement = document.querySelector(".your-component-container");
  parentElement.appendChild(component);
}

在上面的代码中，.your-component-class是您用于标识该组件的class名称，.your-component-container是包含该组件的父元素的选择器。
3.找到该部分后如何与DOM绑定？
在您的公共方法中，您可以使用DOM API来操纵组件的DOM元素并将其添加到页面中。例如，您可以使用document.createElement()方法创建新的DOM元素，并使用element.appendChild()方法将其添加到另一个元素中。以下是示例代码：

function createComponent() {
  loadCssFile("your-component-styles.css");
  var component = document.createElement("div");
  component.classList.add("your-component-class");
  // Other code to create the component...
  var parentElement = document.querySelector(".your-component-container");
  parentElement.appendChild(component);
}

在上面的代码中，component是您创建的DOM元素，parentElement是包含该组件的父元素的DOM元素。

另外，如果您需要在多个页面中重复使用同一个组件，您可以考虑将该组件封装在一个单独的JavaScript文件中，并将其导入到您的HTML文件中。这样，您就可以在需要使用该组件的任何页面中重复使用该文件。