feat: 添加前端项目基础配置和阶段示例

添加 .editorconfig 配置文件用于统一编辑器设置，包括缩进风格、换行符、字符集等规范。添加 jsconfig.json 配置文件用于 JavaScript 项目的编译选项，启用类型检查和模块解析配置。添加 stage00 到 stage03 四个阶段的 HTML 和 JavaScript 示例： - stage00: 基础 HTML 结构演示 - stage01: 纯命令式 DOM 操作实现用户卡片 - stage02: 声明式渲染方式重构用户卡片生成 - stage03: 扩展支持列表渲染多个用户数据每个阶段都包含对应的 HTML 入口文件和 JavaScript 实现逻辑，逐步展示从命令式到声明式渲染的演进过程。
2026-05-02 12:16:03 +08:00
commit fc87cf4622
9 changed files with 196 additions and 0 deletions
--- a/stage03/index.html
+++ b/stage03/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang='zh-cn'>
+<head>
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1'>
+  <title>Stage 03: 列表渲染</title>
+</head>
+<body>
+  <div id="minivue"></div>
+  <script src="./index.js"></script>
+</body>
+</html>
--- a/stage03/index.js
+++ b/stage03/index.js
@@ -0,0 +1,50 @@
+/**
+ * Stage 03：列表渲染
+ * 用循环对数组中的每个数据项调用渲染函数
+ */
+
+/**
+ * 根据用户数据生成卡片 DOM 节点
+ * @param {{ name: string, age: number, tag: string }} user
+ * @returns {HTMLDivElement}
+ */
+function generateUser(user) {
+  const card = document.createElement("div");
+  card.className = "user-card";
+
+  const name = document.createElement("h2");
+  name.textContent = "姓名: " + user.name;
+
+  const age = document.createElement("p");
+  age.textContent = "年龄: " + user.age;
+
+  const tag = document.createElement("span");
+  tag.textContent = user.tag;
+
+  card.appendChild(name);
+  card.appendChild(age);
+  card.appendChild(tag);
+  return card;
+}
+
+/**
+ * 将用户卡片挂载到指定容器
+ * @param {{ name: string, age: number, tag: string }} user
+ * @param {HTMLElement} container
+ */
+function renderUser(user, container) {
+  container.appendChild(generateUser(user));
+}
+
+const multiUser = [
+  { name: "小明", age: 18, tag: "学生" },
+  { name: "小王", age: 19, tag: "学生" },
+  { name: "小李", age: 20, tag: "学生" },
+  { name: "小孙", age: 56, tag: "校长" },
+  { name: "小赵", age: 43, tag: "老师" },
+];
+
+const root = document.getElementById("minivue");
+for (let i = 0; i < multiUser.length; i++) {
+  renderUser(multiUser[i], root);
+}