最近开始接触 AI 全栈开发，发现现在的大模型开发已经不仅仅是“会写代码”那么简单了。
真正的开发流程开始越来越工程化：
- 前后端分离
- 模块化设计
- 语义化 HTML
- DOM 编程
- Node.js 后端
- npm 包管理
很多以前觉得“只是写页面”的东西，现在才发现其实都是大厂非常重视的底层能力。
一、AI 全栈开发的项目结构
现在主流项目基本都是：
fe/
backend/
也就是：
- frontend（前端）
- backend（后端）
进行模块化拆分。
这样做最大的好处：
- 前端专注页面
- 后端专注接口
- 职责清晰
- 更适合团队协作
否则所有代码全堆一起：
app.js
index.html
style.css
server.js
database.js
项目一大基本就会崩。
二、为什么现在特别强调“模块化”？
模块化本质是一种设计思想。
核心理念：
每个文件只做一件事。
例如：
components/
pages/
utils/
api/
每个目录都有自己的职责。
否则：
- 不好维护
- 不好扩展
- 不好优化
- 后期修改容易互相影响
这也是为什么现在大厂特别强调：
“低耦合、高内聚”
三、前端三件套的真正分工
1. HTML 负责结构
HTML 本质是：
页面骨架
例如：
- header
- main
- footer
- article
决定页面有什么。
2. CSS 负责样式
CSS 决定：
- 颜色
- 布局
- 动画
- 响应式
现在很多项目会直接使用：
- Bootstrap
- Tailwind CSS
这类 CSS 框架提高开发效率。
3. JavaScript 负责交互
JS 负责：
- 动态修改页面
- 请求数据
- 用户交互
- DOM 操作
比如：
document.querySelector()
本质就是：
从页面中找到某个节点。
四、HTML 为什么强调“语义化”？
以前很多人写页面：
<div></div>
<div></div>
<div></div>
全是 div。
但现在更强调：
语义化标签。
例如：
<header>
<main>
<footer>
<aside>
<nav>
因为：
语义化不仅仅是“好看”。
它影响：
- SEO
- 可维护性
- 可读性
- 无障碍访问
这也是很多大厂面试会问的底层知识。
五、块级元素与行内元素
HTML 默认分两类元素。
块级元素
特点：
- 默认独占一行
- 通常用来做布局盒子
例如：
div
section
header
行内元素
特点：
- 不会换行
- 用来包裹内容
例如：
span
a
strong
六、CSS 布局核心：盒子思想
最近发现：
CSS 最重要的其实是：
“盒子思维”
开发页面时：
不是先写文字。
而是：
先画盒子。
例如：
container
row
col
经典行列布局：
- container 控制整体宽度
- row 表示一行
- col 表示列
这种思想其实一直影响到现在的：
- Flex
- Grid
- Bootstrap
七、DOM 编程到底是什么？
DOM：
Document Object Model
本质：
浏览器把 HTML 解析成了一棵树。
例如：
document.body
document.querySelector()
都属于 DOM 操作。
JS 可以：
- 查找节点
- 修改节点
- 添加节点
- 删除节点
例如：
.innerHTML
可以动态修改页面内容。
八、为什么大厂特别重视 DOM 底层？
因为：
很多框架底层其实都离不开 DOM。
比如：
- React
- Vue
本质上最终还是：
操作 DOM。
所以真正理解：
- document
- 节点
- 树结构
- 父子节点
- 兄弟节点
会对后面学习框架帮助非常大。
九、Node.js 与后端初始化
现在 JS 已经不仅仅能写前端。
还能写后端。
例如：
- Node.js
初始化项目：
npm init -y
会生成：
package.json
它相当于：
项目的说明书。
里面记录：
- 项目名称
- 依赖包
- 启动命令
- 版本信息
十、npm 包管理
npm：
Node Package Manager
作用：
管理项目依赖。
例如：
npm i json-server
这里：
- i = install
安装后：
就能快速启动一个假数据接口服务器。
这对于前后端联调特别方便。
十一、我现在越来越能理解“工程化开发”了
以前觉得：
写网页就是：
+ css + js
现在发现真正开发里更重要的是：
- 模块化
- 文件职责划分
- 项目结构
- 语义化
- DOM 思维
- 包管理
- 工程化协作
很多东西看起来基础。
但其实越往后越重要。
尤其是：
大厂特别重视底层。
