无需第三方库如何用JavaScript将HTML文件封装为可复用组件

完全可以通过原生JavaScript实现该需求，无需借助任何第三方框架，以下是完整实现方案：

新建公共JS文件，命名为componentLoader.js，代码如下：

/**
 * 加载独立HTML组件到指定挂载节点
 * @param {string} mountClass 挂载节点的类选择器（如 '.carousel-container'）
 * @param {string} htmlPath 独立HTML组件的文件路径
 * @returns {Promise} 组件加载完成后resolve，加载失败reject
 */
export function loadHtmlComponent(mountClass, htmlPath) {
  return new Promise((resolve, reject) => {
    // 查找挂载节点
    const mountNode = document.querySelector(mountClass)
    if (!mountNode) {
      reject(new Error(`未找到挂载节点：${mountClass}`))
      return
    }

    // 请求HTML文件内容
    fetch(htmlPath)
      .then(res => {
        if (!res.ok) throw new Error(`HTML文件加载失败，状态码：${res.status}`)
        return res.text()
      })
      .then(htmlContent => {
        // 插入HTML内容
        mountNode.innerHTML = htmlContent

        // 处理HTML中内嵌的script标签（直接innerHTML插入的script不会自动执行）
        const scripts = mountNode.querySelectorAll('script')
        scripts.forEach(oldScript => {
          const newScript = document.createElement('script')
          // 复制原有script的所有属性
          Array.from(oldScript.attributes).forEach(attr => {
            newScript.setAttribute(attr.name, attr.value)
          })
          // 复制script内容
          newScript.textContent = oldScript.textContent
          // 替换旧script，触发执行
          oldScript.parentNode.replaceChild(newScript, oldScript)
        })

        resolve()
      })
      .catch(err => {
        console.error('组件加载失败：', err)
        reject(err)
      })
  })
}

// 兼容非模块化场景，挂载到全局window对象
if (typeof window !== 'undefined') {
  window.loadHtmlComponent = loadHtmlComponent
}

1. 非模块化场景直接在HTML中使用 #

直接在需要调用的HTML文件中引入componentLoader.js，然后调用全局方法即可：

<!-- 引入公共加载JS -->
<script src="./utils/componentLoader.js"></script>
<!-- 挂载节点 -->
<div class="navbar-container"></div>
<div class="carousel-container"></div>

<script>
  // 加载导航栏组件
  loadHtmlComponent('.navbar-container', './components/navbar.html')
  // 加载轮播图组件，加载完成后执行额外逻辑
  loadHtmlComponent('.carousel-container', './components/imageCarousel.html')
    .then(() => {
      // 此处可以写组件加载完成后的操作，比如初始化轮播逻辑
      console.log('轮播组件加载完成')
    })
</script>

2. 模块化场景在其他JS文件中引入使用 #

如果你的项目使用ES模块化规范，直接在需要调用的JS文件中导入函数即可：

// 引入公共加载函数
import { loadHtmlComponent } from './utils/componentLoader.js'

// 调用加载组件
loadHtmlComponent('.carousel-container', './components/imageCarousel.html')
  .then(() => {
    // 组件加载完成后的逻辑
  })

注意需要在引入该JS的script标签上添加type="module"属性：

<script type="module" src="./yourScript.js"></script>

• 不要直接使用file://协议打开HTML文件测试，会触发跨域限制导致fetch失败，建议使用VS Code的Live Server插件搭建本地静态服务测试
• HTML组件的路径请根据项目实际目录结构填写，使用绝对路径可以避免相对路径的适配问题
• 如果多个页面加载同一个HTML组件，浏览器会自动缓存文件内容，不会重复请求，性能开销极低
• 若组件存在全局样式、全局JS变量冲突，建议提前做好命名隔离（比如给组件根节点加唯一类名，样式全部嵌套在该类名下）

内容的提问来源于stack exchange，提问作者Code Fingers