当前位置：首页 > news >正文

第七章：组件之城 · 重构世界的拼图术

news 来源：原创 2025/5/25 5:36:17

剧情引入：废墟中的拼图城市

事件风暴结束，林昊被导师零号引领至一座断壁残垣的城市——传说中的组件之城（Component City）。这里曾是一座井然有序、功能强大的前端文明遗迹，但如今却被混乱的“复制粘贴开发法”摧毁。

零号说：“林昊，你要重建这座城，用组件拼图术将前端世界重新组装！”

什么是组件？

在前端中，组件（Component）是一块具有特定功能、样式、结构的可复用单元。每个按钮、表单、导航栏都可以封装成组件。

就像拼图，页面可以由多个组件拼接而成：

[Header]
[Sidebar]  [Content]
[Footer]

用函数封装组件：从重复中解放

林昊发现页面中有许多重复的“用户卡片”：

<div class="card"><h3>林昊</h3><p>冒险者 · 编号001</p>
</div><div class="card"><h3>艾拉</h3><p>前端女巫 · 编号002</p>
</div>

导师零号提示他：“提取成函数，减少重复！”

function createUserCard(name, title, id) {return `<div class="card"><h3>${name}</h3><p>${title} · 编号${id}</p></div>`;
}document.body.innerHTML += createUserCard("林昊", "冒险者", "001");
document.body.innerHTML += createUserCard("艾拉", "前端女巫", "002");

函数式组件是组件化思想的起点！

Props：传递组件的灵魂

每一个组件都应该从外界接收数据，这就是 props（属性）的思想雏形。

function Button(text, color) {return `<button style="background:${color};">${text}</button>`;
}document.body.innerHTML += Button("点击我", "tomato");

组件就像函数，输入 props → 输出结构，变得灵活、通用。

组件嵌套：拼图之间的协作

林昊学会封装多个组件，再组合成页面：

function Header(title) {return `<header><h1>${title}</h1></header>`;
}function Footer() {return `<footer>© 组件之城 · 林昊</footer>`;
}function Layout(content) {return `${Header("欢迎来到组件之城")}<main>${content}</main>${Footer()}`;
}document.body.innerHTML = Layout("<p>这里是主内容区域</p>");