🧭 JavaScript BOM 全阶段学习路线图
🟢 初级阶段：常用 BOM 操作基础
🎯 目标：能操作浏览器窗口、弹窗、计时器等基本功能
| 模块 | 🌟知识点 | ✅ 示例 |
|---|---|---|
🪟 window 对象 |
全局对象、open/close、属性如 innerWidth、innerHeight | window.open(url) 打开新页面 |
| 📢 弹窗函数 | alert()、confirm()、prompt() |
表单确认、二次确认 |
| 🕒 计时器 | setTimeout()、setInterval()、clearTimeout()、clearInterval() |
倒计时、自动刷新 |
| 🗂️ location 对象 | href、reload()、assign()、replace() |
页面跳转 |
| 🧭 navigator 对象 | 获取浏览器信息，如 userAgent、platform | 判断用户设备 |
| 📜 history 对象 | back()、forward()、go(n) |
页面前进后退控制 |
🟡 中级阶段：掌握页面控制与浏览器通信
🎯 目标：能实现复杂页面控制与信息获取
| 模块 | 🧠知识点 | ✅ 示例 |
|---|---|---|
🔁 window.open 高级用法 |
控制新窗口大小、位置、是否显示工具栏 | 弹出窗口设置 |
🔒 location.search/hash |
解析 URL 参数 | ?id=10，锚点跳转控制 |
🌐 navigator.onLine |
检测网络状态 | 离线提醒系统 |
📶 navigator.geolocation |
获取地理位置坐标（需 HTTPS） | 获取经纬度，定位服务 |
| ⏰ 定时器实战 | 防抖、节流（结合 DOM） | 搜索框防抖请求 |
| 📦 Storage | localStorage、sessionStorage 使用 |
保存登录状态、本地缓存 |
| 🍪 cookie 操作 | 设置、读取、删除 cookie | 用户识别、登录保持 |
🔵 高级阶段：浏览器控制与跨窗口通信
🎯 目标：能管理多窗口、多标签页状态，并实现通信机制
| 模块 | 🔥知识点 | ✅ 示例 |
|---|---|---|
| 🪟 跨窗口通信 | 父子窗口传值：window.opener、postMessage() |
A 页面控制 B 页面数据 |
🛠 window.name 传参 |
跨页数据传递 | iframe、跳转后取数据 |
| 🎭 模拟多窗口 SPA | 使用 window.open + postMessage 实现组件式分离 |
管理后台系统 |
| 📄 页面生命周期 | beforeunload、unload、页面隐藏监听 |
离开页面提醒 |
| 🔌 Clipboard API | 复制粘贴剪贴板控制（带权限） | 一键复制链接按钮 |
| 🌐 网络监听 | navigator.connection 检测网络类型变化（实验性） |
根据网速切换视频清晰度 |
💎 补充：常见实战场景
| 场景 | 用到的 BOM 能力 |
|---|---|
| 🔐 登录保持 | localStorage + cookie |
| 📅 倒计时跳转 | setInterval() + DOM 操作 |
| 📍 定位签到 | navigator.geolocation |
| 📩 弹窗提示 | alert() + 计时器控制关闭 |
| 🔁 页面跳转重定向 | location.replace() |
| 💬 跨标签页同步 | localStorage + storage 事件 |
| 🧹 离开页面清理 | beforeunload 事件 |
🧠 总结知识体系图
BOM 核心对象
│
├─ window（全局控制）
│ ├─ open/close
│ ├─ alert/confirm/prompt
│ └─ 定时器 setTimeout / setInterval
│
├─ location（地址控制）
│ ├─ href / assign / replace
│ └─ search / hash 参数控制
│
├─ navigator（浏览器信息）
│ ├─ userAgent / platform
│ └─ onLine / geolocation
│
├─ history（浏览记录）
│ └─ back / forward / go
│
├─ storage（本地存储）
│ ├─ localStorage / sessionStorage
│ └─ cookie 操作
│
└─ 高级功能
├─ 跨窗口通信
├─ 页面卸载与切换监听
└─ 剪贴板 / 网络状态监听