全局变量大杂烩（所有数据都挂 'window' 上）

全局变量挂载在 window 对象上是早期前端开发的常见模式，但随着项目复杂度提升，这种方式的弊端逐渐暴露。从变量污染到性能问题，再到调试困难，这种“大杂烩”式的代码组织需要更严谨的替代方案。

为什么全局变量会挂载到 window？

在浏览器环境中，window 是全局作用域的顶层对象。通过 var 声明的变量或直接赋值的未声明变量，默认会成为 window 的属性：

var appName = 'MyApp';
console.log(window.appName); // 输出 'MyApp'

// 未声明的变量直接赋值
apiKey = '12345';
console.log(window.apiKey); // 输出 '12345'

ES6 的 let/const 解决了这一问题：

let privateData = 'secret';
console.log(window.privateData); // 输出 undefined

典型问题场景

命名冲突

多个脚本文件共享 window 时，变量名可能被意外覆盖：

// scriptA.js
window.config = { debug: true };

// scriptB.js
window.config = { apiUrl: '/endpoint' }; // 覆盖了前一个 config

难以追踪的依赖

以下代码依赖全局变量 userToken，但未显式声明：

// 某工具函数
function fetchData() {
  return axios.get('/data', { 
    headers: { 'Authorization': window.userToken } // 依赖全局状态
  });
}

性能影响

过多全局变量会导致：

1. window 对象膨胀，内存占用增加
2. 属性查找时间变长（原型链搜索）

现代替代方案

模块化封装

使用 ES Modules 隔离作用域：

// config.js
export const API_CONFIG = { timeout: 5000 };

// app.js
import { API_CONFIG } from './config.js';

命名空间模式

即使需要全局暴露，也应采用命名空间约束：

window.MY_APP = {
  utils: {
    formatDate: () => { /* ... */ }
  },
  config: {
    env: 'production'
  }
};

状态管理库

对于复杂应用状态，使用专用工具：

// 使用 Vuex 示例
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) { state.count++ }
  }
})

调试技巧

当面对遗留的全局变量代码时，可通过这些方法快速定位问题：

1. 列出所有自定义全局属性：

Object.keys(window).filter(key => {
  return !key.startsWith('webkit') && 
         !key.startsWith('') && 
         typeof window[key] !== 'function';
});

2. 使用 Chrome 开发者工具的「全局变量」断点：

// 监控特定全局变量修改
window._oldConfig = window.config;
Object.defineProperty(window, 'config', {
  set(value) {
    debugger; // 触发断点
    window._oldConfig = value;
  }
});

特殊场景的合理使用

某些情况下全局变量仍有存在价值：

1. 第三方库的 CDN 引入方式：

<script src="https://cdn.example.com/library.js"></script>
<script>
  // 库通过 window.Library 暴露接口
  window.Library.init();
</script>

2. 跨 iframe 通信：

// 父页面设置
window.sharedData = { userId: 123 };

// iframe 内访问
parent.window.sharedData;

性能优化实践

通过 Object.freeze() 防止全局配置被意外修改：

window.APP_CONFIG = Object.freeze({
  version: '1.0.0',
  endpoints: Object.freeze({
    api: '/api/v1'
  })
});

window.APP_CONFIG.version = '2.0.0'; // 静默失败或报错（严格模式）

TypeScript 增强类型安全

声明全局接口避免类型错误：

// global.d.ts
interface Window {
  __MY_DATA__: {
    user?: { id: string };
    tracking?: boolean;
  };
}

// 使用时获得类型提示
window.__MY_DATA__ = {
  user: { id: 'U123' } // 自动补全 user 属性
};

历史代码迁移策略

逐步重构旧系统的步骤示例：

1. 第一阶段：收集所有全局变量

// legacy-globals.js
window.__LEGACY__ = {
  oldFunction1: window.oldFunction1,
  deprecatedVar: window.someVar
};

// 删除原全局变量
delete window.oldFunction1;
delete window.someVar;

2. 第二阶段：模块化拆分

// 转换前
window.calculatePrice = (qty, price) => qty * price;

// 转换后
// price-utils.js
export const calculatePrice = (qty, price) => qty * price;

浏览器扩展的特殊性

Chrome 扩展的内容脚本与页面脚本共享 DOM 但隔离 JS 执行环境，此时全局变量需通过 window.postMessage 通信：

// content-script.js
window.addEventListener('message', (event) => {
  if (event.data.type === 'FROM_PAGE') {
    chrome.runtime.sendMessage(event.data.payload);
  }
});

// 页面脚本
window.postMessage({
  type: 'FROM_PAGE',
  payload: { action: 'getData' }
}, '*');