编辑“︁JavaScript BOM最佳实践”︁（章节）

= JavaScript BOM最佳实践 =

== 介绍 ==
'''浏览器对象模型（Browser Object Model, BOM）'''是JavaScript中用于与浏览器窗口交互的核心API集合。它允许开发者控制浏览器行为，例如操作窗口、导航历史、屏幕属性和弹窗等。与DOM（文档对象模型）不同，BOM没有正式标准，但现代浏览器基本实现了一致的接口。

BOM的主要对象包括：
* '''window'''：浏览器窗口的顶级对象
* '''navigator'''：浏览器信息（名称、版本等）
* '''location'''：当前URL信息
* '''history'''：浏览器会话历史
* '''screen'''：用户屏幕信息

== 核心概念与最佳实践 ==

=== 1. 窗口操作 ===
==== 窗口尺寸与滚动 ====
获取和操作窗口尺寸时，应优先使用现代API：

<syntaxhighlight lang="javascript">
// 获取视口尺寸（跨浏览器方案）
const viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
const viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);

// 平滑滚动到页面顶部（现代浏览器）
window.scrollTo({
  top: 0,
  behavior: 'smooth'
});
</syntaxhighlight>

==== 弹窗控制 ====
避免使用阻塞式弹窗（alert/confirm/prompt），推荐非阻塞替代方案：

<syntaxhighlight lang="javascript">
// 不良实践
alert('操作已完成'); // 阻塞UI线程

// 良好实践
const notification = document.createElement('div');
notification.textContent = '操作已完成';
document.body.appendChild(notification);
setTimeout(() => notification.remove(), 3000);
</syntaxhighlight>

=== 2. 导航与URL处理 ===
使用'''Location'''对象时应注意安全：

<syntaxhighlight lang="javascript">
// 安全的重定向方式（保留原始参数）
function safeRedirect(newPath) {
  const url = new URL(window.location.href);
  url.pathname = newPath;
  window.location.assign(url.toString()); // 比href赋值更安全
}

// 获取查询参数（现代API）
const params = new URLSearchParams(window.location.search);
const userId = params.get('id'); // 获取?id=123中的123
</syntaxhighlight>

=== 3. 历史状态管理 ===
现代SPA应用应使用History API：

<syntaxhighlight lang="javascript">
// 添加历史记录（不触发刷新）
history.pushState({ page: 'settings' }, 'Settings', '/settings');

// 监听回退/前进
window.addEventListener('popstate', (event) => {
  console.log('导航至状态:', event.state);
});
</syntaxhighlight>

=== 4. 设备能力检测 ===
通过'''navigator'''和'''screen'''实现响应式设计：

<syntaxhighlight lang="javascript">
// 检测网络状态
const isOnline = navigator.onLine;
window.addEventListener('online', () => console.log('恢复连接'));

// 根据屏幕密度加载资源
const highResImages = window.devicePixelRatio > 1 ? 
  'image@2x.jpg' : 'image.jpg';
</syntaxhighlight>

== 性能优化实践 ==

=== 防抖与节流 ===
处理滚动/resize等高频事件时：

<syntaxhighlight lang="javascript">
function debounce(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, arguments), delay);
  };
}

window.addEventListener('resize', debounce(() => {
  console.log('调整后的尺寸:', window.innerWidth);
}, 250));
</syntaxhighlight>

=== 内存管理 ===
BOM对象可能造成内存泄漏：

<syntaxhighlight lang="javascript">
// 不良实践（全局变量保持引用）
let heavyData = /* 大数据 */;
window.onunload = function() {
  heavyData = null; // 必须手动释放
};

// 良好实践（使用WeakMap）
const weakMap = new WeakMap();
weakMap.set(document.getElementById('app'), { largeData });
</syntaxhighlight>

== 安全注意事项 ==

=== 跨域限制 ===
某些BOM属性受同源策略限制：

<syntaxhighlight lang="javascript">
// 尝试获取其他窗口大小（需同源）
try {
  const otherWindow = window.open('https://same-origin.com');
  console.log(otherWindow.innerWidth); // 同源时可用
} catch (e) {
  console.error('跨域访问被拒绝');
}
</syntaxhighlight>

=== XSS防护 ===
动态URL操作需转义：

<syntaxhighlight lang="javascript">
// 危险操作
const userInput = 'javascript:alert(1)';
window.location.href = userInput; // XSS漏洞！

// 安全方案
function sanitizeUrl(input) {
  const a = document.createElement('a');
  a.href = input;
  return a.protocol === 'https:' ? a.href : '/safe-fallback';
}
</syntaxhighlight>

== 可视化关系图 ==
<mermaid>
graph TD
    A[window] --> B[document]
    A --> C[navigator]
    A --> D[location]
    A --> E[history]
    A --> F[screen]
    A --> G[localStorage]
    A --> H[sessionStorage]
    C --> I[userAgent]
    C --> J[geolocation]
    D --> K[href]
    D --> L[search]
</mermaid>

== 数学计算示例 ==
计算屏幕DPI（每英寸像素数）：

<math>
DPI = \frac{\sqrt{width_{px}^2 + height_{px}^2}}{diagonal_{in}}
</math>

JavaScript实现：
<syntaxhighlight lang="javascript">
function calculateDPI() {
  const { width, height } = screen;
  const diagonalIn = Math.sqrt(width**2 + height**2) / 96; // 假设96PPI
  return Math.round(diagonalIn);
}
</syntaxhighlight>

== 实际应用案例 ==
'''案例：构建无刷新表单提交'''

1. 拦截表单提交
2. 使用Fetch API发送数据
3. 通过History API更新URL
4. 显示异步结果

<syntaxhighlight lang="javascript">
document.querySelector('form').addEventListener('submit', async (e) => {
  e.preventDefault();
  
  const formData = new FormData(e.target);
  const response = await fetch('/api/submit', { 
    method: 'POST',
    body: formData 
  });
  
  if (response.ok) {
    history.pushState({ updated: true }, '', '/success');
    showFeedback('提交成功！');
  }
});

function showFeedback(message) {
  // 非阻塞式显示结果...
}
</syntaxhighlight>

== 总结 ==
JavaScript BOM最佳实践的核心原则：
* 优先使用现代API（如History/URL）
* 考虑性能影响（防抖/节流）
* 严格处理用户输入（XSS防护）
* 注意内存管理（避免泄漏）
* 提供渐进增强体验

通过遵循这些实践，可以构建既强大又安全的浏览器端应用。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript BOM]]