main.jsevent-loop.js

点击之后发生了什么

事件、请求和页面更新,都在脚本里排成一条时间线。

没有脚本的页面只能被阅读。有了 JavaScript,按钮才能打开抽屉,表单才能校验,列表才能按接口刷新。它处理的是时间:用户做了什么,程序接着做什么。

  1. 01
    事件监听

    click、input、submit、scroll 是最常见的入口。先拦住默认行为,再决定要不要发请求,页面才不会在提交后整页刷新。

  2. 02
    异步任务

    定时器、网络请求和用户输入不在同一拍上。Promise 和 async/await 把等待写成顺序,避免回调套回调把逻辑藏起来。

  3. 03
    操作 DOM

    改文本、切类名、插节点,都是在改当前这一帧的文档。改得越少越稳;能靠数据驱动就不要手动拼一大段 HTML。

  4. 04
    模块边界

    把请求、格式化和界面更新拆开。一个文件既画按钮又拼 URL,三个月后没有人敢动。

  5. 05
    看见运行轨迹

    控制台、断点和网络面板比猜更有效。先证明事件触发了,再证明数据回来了,最后才调样式。