zzy
fc87cf4622
添加 .editorconfig 配置文件用于统一编辑器设置，包括缩进风格、 换行符、字符集等规范。 添加 jsconfig.json 配置文件用于 JavaScript 项目的编译选项， 启用类型检查和模块解析配置。 添加 stage00 到 stage03 四个阶段的 HTML 和 JavaScript 示例： - stage00: 基础 HTML 结构演示 - stage01: 纯命令式 DOM 操作实现用户卡片 - stage02: 声明式渲染方式重构用户卡片生成 - stage03: 扩展支持列表渲染多个用户数据 每个阶段都包含对应的 HTML 入口文件和 JavaScript 实现逻辑， 逐步展示从命令式到声明式渲染的演进过程。
25 lines
623 B
JavaScript
25 lines
623 B
JavaScript
/**
|
||
* Stage 01：纯命令式 DOM 操作
|
||
* 每一步都直接创建、组装、插入节点
|
||
*/
|
||
|
||
const card = document.createElement("div");
|
||
card.className = "user-card";
|
||
|
||
const nameEl = document.createElement("h2");
|
||
nameEl.textContent = "姓名: 小明";
|
||
|
||
const ageEl = document.createElement("p");
|
||
ageEl.textContent = "年龄: 18";
|
||
|
||
const tagEl = document.createElement("span");
|
||
tagEl.textContent = "学生";
|
||
|
||
card.appendChild(nameEl);
|
||
card.appendChild(ageEl);
|
||
card.appendChild(tagEl);
|
||
|
||
const root = document.getElementById("minivue");
|
||
console.assert(root != null, "容器 #minivue 未找到");
|
||
root.appendChild(card);
|