zzy
fc87cf4622
添加 .editorconfig 配置文件用于统一编辑器设置，包括缩进风格、 换行符、字符集等规范。 添加 jsconfig.json 配置文件用于 JavaScript 项目的编译选项， 启用类型检查和模块解析配置。 添加 stage00 到 stage03 四个阶段的 HTML 和 JavaScript 示例： - stage00: 基础 HTML 结构演示 - stage01: 纯命令式 DOM 操作实现用户卡片 - stage02: 声明式渲染方式重构用户卡片生成 - stage03: 扩展支持列表渲染多个用户数据 每个阶段都包含对应的 HTML 入口文件和 JavaScript 实现逻辑， 逐步展示从命令式到声明式渲染的演进过程。
51 lines
1.3 KiB
JavaScript
51 lines
1.3 KiB
JavaScript
/**
|
||
* 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);
|
||
}
|