下降的历程 · 前端发生了什么 你最后一次写前端代码时，它看起来像这样：<br>服务器渲染·2009<br><?php foreach ($cart as $item): ?> <li> <?= $item->name ?> <button> 购买 </button> </li> <?php endforeach ; ?> <br>或者只是手写的代码<!-- 手动样式，无构建 --> <button class="buy"> 购买 </button> <style> .buy { padding: 4px 10px ; border: 1px solid #999 ; } </style><br>无论哪种方式：0个构建步骤 · 0个依赖项<br>在每个浏览器中都能工作，永远有效<br>然后你偏离了航道。发生了什么？<br>二十年，四十米的构建工具，以及一个非常困惑的<button>，接下来的就是整个故事。留出二十分钟；我会让你跟上进度。<br>开始下降 ↓<br>在2008年，你保存了一个名为index.html的文件，将其拖放到FTP客户端，观看小进度条向右爬行。当它完成时，你的网站存在了。它在Internet Explorer和Firefox以及那个新的名为Chrome的浏览器中运行。你没有运行“构建”。你没有安装1400个包。你编写了标记，编写了样式，浏览器正好执行你告诉它的内容。你对此很擅长。<br>然后，在iPhone发布到现在的某个时刻，你眨了眨眼，整个领域在你忙于发布实际产品时从基础上重建了自己。现在，一个初学者的教程开头便是你从未听说过的十六个工具，其中一半是以日语中“快”的单词命名的，而第一个命令下载的代码比阿波罗引导计算机运行的代码还要多，仅仅是为了渲染一个联系表单。<br>这里是好消息，这也是整个下降的论点：这一切都不是随意的。你即将遇到的每一个工具都是在真实伤口上生长出的瘢痕组织。有人遇到了一个真正的问题，构建了一个解决方案，而这个解决方案又创造了下一个问题，后者又有自己的解决方案，经过二十年的合理步骤，最终形成了如今你所仰望的宏伟、疲惫的疯狂大教堂。所以我们不记忆一个列表。我们将按顺序挖掘，让每个工具在它出现的痛苦的理由出现时正好出现。我们将始终检查一个标本，一只谦逊的<button>，并观察行业对它所做的事情。等到我们深入基岩，你将会大笑，因为2026年的前沿看起来与您通过FTP上传的文件非常相似。每个工具都是在真实伤口上的瘢痕组织。跟随伤口，地图便会自我绘制。<br>解锁一切的唯一想法<br>第一层 - 4 M 2006 - 2010<br>瘙痒<br>“我只想在不重新加载整个页面的情况下改变页面。”<br>第一个伤口很小也很合理。你想让页面的一部分改变，打开一个菜单，验证一个表单，加载一个部分，而不出现完全页面重新加载的白色闪烁。浏览器可以通过一种叫做XMLHttpRequest的棘手东西和一堆在每个浏览器中表现不同的繁琐DOM方法来实现这个。因此，这个时代选择了jQuery，而它确实很棒。<br>$("#cart").load(...)，浏览器之间的差异消失了。AJAX（在不重新加载的情况下获取数据）进入主流。在几个黄金年里，这已经足够了。但是应用程序变得雄心勃勃，下面出现了更深的伤口。当你的数据驻留在JavaScript变量和屏幕上时，你就是同步机器。更改价格？最好记得手动更新购物车总数、页面头部徽章、结账按钮和那个小汇总框。漏掉一个，UI就会对用户撒谎。这种手动的DOM操作，手动在一个越来越庞大的应用中，是这个层次后面一切试图赎罪的原罪。<br>遗物 - jQuery仍在运行着巨大的网络份额；没有人再用它开始新项目。<br>第二层 - 9 M 2010 - 2015<br>框架的到来<br>“别让我手动将屏幕与我的数据同步。”<br>解决同步伤口的办法是一个真正大的想法：声明式UI。你不再编写更新页面的步骤（“找到徽章，设置其文本”），而是描述给定数据时页面应该是什么样子，框架来确定步骤。你不再接触DOM。你更改数据，屏幕跟随。这就是你经常看到的反应式一词的含义。构建单元成为了组件：一个自包含的UI块（它的标记、行为、状态）像乐高一样组合在一起。2013年，Facebook推出的React通过将组件与JSX（在JavaScript内部编写的类似HTML的语法，仍然让人感到不安）以及一个叫做虚拟DOM的巧妙技巧相结合而赢得了这个时代：在内存中保持页面的轻量复制，在每个更改时进行差异比较，仅接触实际不同的真实DOM节点。然后千花齐放。Vue使这个过程易于接近。Angular（成年版重写，而不是已经死去的2010年“AngularJS”）带来了企业结构和TypeScript。Svelte问道，为什么要将框架送到浏览器，结果自己编译掉。Solid保持了JSX，但抛弃了虚拟DOM，进行了手术式更新。