jQuery框架使得网页内容与事件定义分离

2006年，框架John Resig把一个名为jQuery的使得事件小工具丢到开发者社区时，没人料到它会在五年内占据全球网站访问量的网页半壁江山。它解决了一个极其具体又极其普遍的内容痛点：网页里的JavaScript代码，总是定义一团乱麻。乱到什么程度？分离你打开任何一个稍复杂的页面源码，大概率能看到onclick、框架onmouseover直接嵌在HTML标签里，使得事件和样式属性搅在一起，网页像一碗煮烂的内容面条。

jQuery改变了这个局面。定义它的分离核心动作很简单：用`$(document).ready()`把行为逻辑和页面结构隔开。你不再需要在``标签里写`onclick="doSomething()"`，框架而是使得事件给这个按钮一个id或class，然后在独立的网页script块里写`$('#myButton').click(function(){ ... })`。就这一小步，让网页的“骨架”（HTML）和“神经系统”（事件行为）彻底分居了。

我印象最深的是2011年维护的一个老项目。那是个后台管理系统，表格每一行都有编辑、删除、状态切换三个按钮。原代码里每个按钮都绑着不同的onclick函数，还传不同的参数。改需求时，前端同事要在十几个HTML文件里搜索某个函数名，然后逐个修改。引入jQuery后，我们把所有操作统一委托到`$('.table').on('click', '.edit-btn', ...)`上，利用事件冒泡机制，一个监听器管住全表。从那以后，加新按钮只需在HTML里加个class，行为代码一行不改。

这种分离带来的好处不只是代码好看了。它让职责边界清晰起来——HTML负责“有什么”，JavaScript负责“干什么”。设计师可以安心调整页面结构，不用怕误删某个内联事件；程序员可以专心维护逻辑，不用在HTML注释里找蛛丝马迹。哪怕后来Vue、React用更彻底的组件化思想取代了jQuery的统治地位，但“结构”与“行为”分离这个理念，jQuery是真正把它普及到大众层面的那个。

当然，jQuery的写法并非完美。它依赖选择器字符串，一旦HTML结构变动，那些`$('.class-name')`就可能静默失效。但换个角度看，它至少让开发者养成了一个习惯：先想清楚页面里哪些元素需要交互，再统一在脚本里定义行为。这种“先规划再实施”的思维模式，比任何框架本身都更值钱。

现在打开浏览器控制台，随便查一个老站点的源码，你依然能看到`$(function(){ ... })`这种写法。它像一段被广泛使用的方言，虽然年轻人已经改说Vue的“官方语言”，但那份把事件从标签里解放出来的功劳，始终记在jQuery账上。说句实在话，没有它当年那下“分离手术”，前端这棵大树不可能长得这么快。