实现一个前端动态模块组件(Vite+原生JS)

1. 引言

在前面的文章《使用Vite创建一个动态网页的前端项目》中我们实现了一个动态网页。不过这个动态网页的实用价值并不高，在真正实际的项目中我们希望的是能实现一个动态的模块组件。具体来说，就是有一个页面控件同时在多个页面中使用，那么我们肯定想将这个页面控件封装起来，以便每个页面需要的时候调用一下就可以生成。注意，这个封装起来模块组件应该要包含完整的HTML+JavaScript+CSS，并且要根据从后端访问的数据来动态填充页面内容。其实像VUE这样的前端框架就是这种设计思路，同时这也是GUI程序开发的常见思维模式。

2. 实现

2.1 项目组织

在这里笔者实现的例子是一个博客网站上的分类专栏控件。分类专栏是一般通过后端获取的，但是这里笔者就将其模拟成直接域内获取一个数据categories.json，里面的内容如下：

[
  {
    "firstCategory": {
      "articleCount": 4,
      "iconAddress": "三维渲染.svg",
      "name": "计算机图形学"
    },
    "secondCategories": [
      {
        "articleCount": 2,
        "iconAddress": "opengl.svg",
        "name": "OpenGL/WebGL"
      },
      {
        "articleCount": 2,
        "iconAddress": "专栏分类.svg",
        "name": "OpenSceneGraph"
      },
      { "articleCount": 0, "iconAddress": "threejs.svg", "name": "three.js" },
      { "articleCount": 0, "iconAddress": "cesium.svg", "name": "Cesium" },
      { "articleCount": 0, "iconAddress": "unity.svg", "name": "Unity3D" },
      {
        "articleCount": 0,
        "iconAddress": "unrealengine.svg",
        "name": "Unreal Engine"
      }
    ]
  },
  {
    "firstCategory": {
      "articleCount": 4,
      "iconAddress": "计算机视觉.svg",
      "name": "计算机视觉"
    },
    "secondCategories": [
      {
        "articleCount": 0,
        "iconAddress": "图像处理.svg",
        "name": "数字图像处理"
      },
      {
        "articleCount": 0,
        "iconAddress": "特征提取.svg",
        "name": "特征提取与匹配"
      },
      {
        "articleCount": 0,
        "iconAddress": "目标检测.svg",
        "name": "目标检测与分割"
      },
      { "articleCount": 4, "iconAddress": "SLAM.svg", "name": "三维重建与SLAM" }
    ]
  },
  {
    "firstCategory": {
      "articleCount": 11,
      "iconAddress": "地理信息系统.svg",
      "name": "地理信息科学"
    },
    "secondCategories": []
  },
  {
    "firstCategory": {
      "articleCount": 31,
      "iconAddress": "代码.svg",
      "name": "软件开发技术与工具"
    },
    "secondCategories": [
      { "articleCount": 2, "iconAddress": "cplusplus.svg", "name": "C/C++" },
      { "articleCount": 19, "iconAddress": "cmake.svg", "name": "CMake构建" },
      { "articleCount": 2, "iconAddress": "Web开发.svg", "name": "Web开发" },
      { "articleCount": 7, "iconAddress": "git.svg", "name": "Git" },
      { "articleCount": 1, "iconAddress": "linux.svg", "name": "Linux开发" }
    ]
  }
]

这个数据的意思是将分类专类分成一级分类专栏和二级分类专栏，每个专栏都有名称、文章数、图标地址属性，这样便于我们填充到页面中。

新建一个components目录，在这个目录中新建category.html、category.js、category.css这三个文件，正如前文所说的，我们希望这个模块组件能同时具有结构、行为和样式的能力。这样，这个项目的文件组织结构如下所示：

my-native-js-app

├── public

│ └── categories.json

├── src

│ ├── components

│ │ ├── category.css

│ │ ├── category.html

│ │ └── category.js

│ └── main.js

├── index.html

└── package.json

2.2 具体解析

先看index.html页面，代码如下所示：

  
    
    
    
    Vite App
  
  
    

      

    
    
  

基本都没有什么变化，只是增加了一个名为category-section-placeholder的元素，这个元素会用来挂接在js中动态创建的分类专栏目录元素。

接下来看main.js文件：

import './components/category.js'

里面其实啥都没干，只是引入了一个category模块。那么就看一下这个category.js文件：

import "./category.css";
// 定义一个变量来存储获取到的分类数据
let categoriesJson = null;
// 使用MutationObserver监听DOM变化
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (
      mutation.type === "childList" &&
      mutation.target.id === "category-section-placeholder"
    ) {
      // 在这里调用函数来填充数据
      populateCategories(categoriesJson);
    }
  });
});
// 配置观察选项
const config = { childList: true, subtree: true };
// 开始观察目标节点
const targetNode = document.getElementById("category-section-placeholder");
observer.observe(targetNode, config);
// 获取分类数据
async function fetchCategories() {
  try {
    const backendUrl = import.meta.env.VITE_BACKEND_URL;
    const response = await fetch("/categories.json");
    if (!response.ok) {
      throw new Error("网络无响应");
    }
    categoriesJson = await response.json();
    // 加载Category.html内容
    fetch("/src/components/category.html")
      .then((response) => response.text())
      .then((data) => {
        document.getElementById("category-section-placeholder").innerHTML =
          data;
      })
      .catch((error) => {
        console.error("Failed to load Category.html:", error);
      });
  } catch (error) {
    console.error("获取分类专栏失败:", error);
  }
}
// 填充分类数据
function populateCategories(categories) {
  if (!categories || !Array.isArray(categories)) {
    console.error("Invalid categories data:", categories);
    return;
  }
  const categoryList = document.querySelector(".category-list");
  categories.forEach((category) => {
    const categoryItem = document.createElement("li");
    categoryItem.innerHTML = `