那天周五晚上十点多，我正准备关电脑下班。产品经理小王，端着一杯已经凉了的咖啡，幽幽地站在我工位旁边。
“小米啊，咱们线上那个活动页面，有时候点按钮没反应，有时候又好了，你能不能帮我看看？”
我一听就愣了一下。这种“有时候可以、有时候不行”的问题，十有八九不是后端，而是前端状态错乱、加载顺序、缓存、或者 DOM 绑定的问题。
我打开页面源码，看了不到三分钟，就忍不住笑了。笑得有点复杂。页面里，JavaScript 写得那叫一个“热闹”。
按钮标签上塞满了行内事件，onclick、onchange、onmouseover，像极了在电线杆上贴满小广告；页面底部又引了好几个外部 js 文件，每个文件里又偷偷再改一次状态；最骚的是，有几个业务逻辑，居然既写在行内，又写在外部文件。
我心里默默替浏览器叹了口气。今天我就想借这个真实的工作场景，跟你聊一个很多人觉得“太基础所以懒得细想”，但实际上影响巨大的问题：
JavaScript 中，行内代码和外部文件，到底有什么区别？什么时候该用？为什么大厂一再强调别写行内？
为了讲清楚，我不打算直接讲规范和结论。我想先给你讲三个小故事。
第一幕：街头小吃 vs 中央厨房
你有没有注意过一个现象？街边小吃摊，有的特别好吃；连锁品牌的快餐，味道却几乎一模一样。为什么？
因为街边摊很多东西是“现做现放”，而连锁快餐大多来自中央厨房，统一配方、统一流程、统一管理。
JavaScript 的行内代码和外部文件，本质上就像这两种模式。
什么是行内 JavaScript？
行内 JavaScript，简单说一句话：
代码直接写在 HTML 标签里，或者页面某个标签内部。
就像
