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

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

前端开发中，将一切数据都挂载到 window 对象上是一种“高效”的编程方式。它能快速实现数据共享，但代价是代码的可维护性、可读性和稳定性直线下降。以下是几种经典的“技巧”，帮助你轻松打造一个难以维护的前端项目。

无节制地污染全局命名空间

直接在 window 上挂载变量是最直接的方式。例如：

window.userData = { name: '张三', age: 25 };
window.config = { apiUrl: 'https://example.com' };
window.utils = {
  formatDate: (date) => date.toISOString(),
  log: (msg) => console.log(msg)
};

这种方式的好处是，任何地方都能直接访问这些变量，完全不需要考虑模块化或作用域。缺点是，随着项目规模扩大，window 对象会变成一个庞然大物，变量命名冲突的概率大幅增加。比如，某个第三方库也定义了 window.utils，你的代码就会悄无声息地崩溃。

动态生成全局变量

为了进一步增加代码的不可预测性，可以动态生成全局变量。例如：

function createGlobalVar(key, value) {
  window[key] = value;
}

createGlobalVar('dynamicVar', 'Hello, World!');
console.log(window.dynamicVar); // 输出: Hello, World!

这种方式让全局变量的定义变得极其灵活，但也让代码的追踪和调试变得异常困难。你永远不知道某个变量是在哪个角落被动态注入的。

滥用全局状态管理

全局变量还可以用来实现“简易版”状态管理。例如：

window.appState = {
  isLoggedIn: false,
  currentUser: null,
  toggleLogin: function() {
    this.isLoggedIn = !this.isLoggedIn;
  }
};

// 在某个事件回调中直接修改全局状态
document.getElementById('login-btn').addEventListener('click', () => {
  window.appState.toggleLogin();
});

这种方式完全避开了现代状态管理工具（如 Redux、Vuex）的“繁琐”，但也彻底放弃了状态的可追踪性和可测试性。任何地方都能直接修改 appState，导致 bug 难以定位。

全局事件总线

为了进一步增加代码的耦合度，可以用 window 实现一个全局事件总线：

window.eventBus = {
  events: {},
  on: function(event, callback) {
    if (!this.events[event]) this.events[event] = [];
    this.events[event].push(callback);
  },
  emit: function(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(cb => cb(data));
    }
  }
};

// 组件A
window.eventBus.on('user-updated', (user) => {
  console.log('User updated:', user);
});

// 组件B
window.eventBus.emit('user-updated', { name: '李四' });

这种方式让组件之间的通信变得“无比便捷”，但也让代码的逻辑变得高度耦合。你无法通过静态分析知道哪些组件监听或触发了某个事件，调试时只能靠全局搜索。

全局工具函数库

将所有工具函数都挂到 window 上，可以省去导入的麻烦：

window.$ = {
  debounce: function(fn, delay) {
    let timer;
    return function() {
      clearTimeout(timer);
      timer = setTimeout(() => fn.apply(this, arguments), delay);
    };
  },
  throttle: function(fn, interval) {
    let lastTime = 0;
    return function() {
      const now = Date.now();
      if (now - lastTime >= interval) {
        fn.apply(this, arguments);
        lastTime = now;
      }
    };
  }
};

// 使用
window.$.debounce(() => console.log('Debounced!'), 300)();

这种方式虽然方便，但也让代码的依赖关系变得模糊。你无法通过导入语句知道某个函数来自哪里，也无法通过工具进行静态分析。

全局配置对象

将所有配置都塞进 window 对象：

window.appConfig = {
  apiBaseUrl: 'https://api.example.com',
  featureFlags: {
    enableNewUI: true,
    enableExperimental: false
  },
  logging: {
    level: 'debug',
    maxEntries: 1000
  }
};

// 在代码中直接使用
fetch(`${window.appConfig.apiBaseUrl}/users`);

这种方式让配置“唾手可得”，但也让配置的修改变得极其危险。任何地方都能直接修改 appConfig，导致运行时行为不可预测。

全局单例服务

将服务实例挂到 window 上，实现“伪单例”：

window.authService = {
  token: null,
  login: function(username, password) {
    return fetch('/login', { method: 'POST', body: JSON.stringify({ username, password }) })
      .then(res => res.json())
      .then(data => {
        this.token = data.token;
      });
  },
  logout: function() {
    this.token = null;
  }
};

// 在任意地方调用
window.authService.login('admin', '123456');

这种方式虽然避免了重复实例化，但也让服务的生命周期变得难以管理。你无法保证 authService 在何时被初始化或销毁，也无法对其进行单元测试。

全局混入第三方库

将第三方库直接挂到 window 上：

// 引入jQuery
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

// 直接使用
window.$('#my-button').click(() => {
  console.log('Button clicked!');
});

这种方式虽然省去了模块导入的步骤，但也让代码的依赖关系变得隐式。你无法通过代码静态分析知道哪些地方使用了 jQuery，也无法通过打包工具优化依赖。

全局存储临时数据

将临时数据也挂到 window 上：

window.tempData = {
  formInput: '',
  selectedItems: [],
  lastOperationTime: null
};

// 在某个表单事件中
document.getElementById('input-field').addEventListener('input', (e) => {
  window.tempData.formInput = e.target.value;
});

这种方式虽然方便，但也让临时数据的生命周期变得难以控制。tempData 可能在任何时候被修改或清除，导致难以复现的 bug。

全局注册自定义元素

将自定义元素的定义也挂到 window 上：

window.customElements = window.customElements || {};
window.customElements.MyButton = class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<button>Click Me</button>';
  }
};

// 使用
customElements.define('my-button', window.customElements.MyButton);

这种方式虽然避免了模块化，但也让自定义元素的定义变得分散。你无法通过代码静态分析知道哪些地方定义了自定义元素。

全局混入 polyfill

将 polyfill 直接挂到 window 上：

if (!window.Promise) {
  window.Promise = function(executor) {
    // 简陋的 Promise polyfill
    let resolve, reject;
    const promise = {
      then: (onFulfilled) => {
        promise.thenHandler = onFulfilled;
        return promise;
      },
      catch: (onRejected) => {
        promise.catchHandler = onRejected;
        return promise;
      }
    };
    executor(
      (value) => {
        if (promise.thenHandler) promise.thenHandler(value);
      },
      (error) => {
        if (promise.catchHandler) promise.catchHandler(error);
      }
    );
    return promise;
  };
}

这种方式虽然能快速解决问题，但也让 polyfill 的实现变得难以维护。你无法通过模块化的方式管理 polyfill，也无法确保其行为与标准一致。

全局混入环境变量

将环境变量挂到 window 上：

window.env = {
  NODE_ENV: 'development',
  API_KEY: '123456',
  DEBUG_MODE: true
};

// 在代码中直接使用
if (window.env.DEBUG_MODE) {
  console.log('Debug mode is enabled!');
}

这种方式虽然方便，但也让敏感信息（如 API_KEY）暴露在全局作用域中，存在安全隐患。

全局混入版本信息

将版本信息挂到 window 上：

window.appVersion = '1.0.0';
window.buildTimestamp = '2023-10-01T12:00:00Z';

// 在某个地方检查版本
if (window.appVersion !== '1.0.0') {
  console.warn('Deprecated version detected!');
}

这种方式虽然能快速获取版本信息，但也让版本管理变得分散。你无法通过构建工具自动注入版本信息。

全局混入性能监控

将性能监控代码挂到 window 上：

window.performanceMetrics = {
  startTime: Date.now(),
  pageLoadTime: null,
  markLoadComplete: function() {
    this.pageLoadTime = Date.now() - this.startTime;
    console.log(`Page loaded in ${this.pageLoadTime}ms`);
  }
};

// 在页面加载完成后调用
window.addEventListener('load', () => {
  window.performanceMetrics.markLoadComplete();
});

这种方式虽然能快速实现性能监控，但也让监控代码变得难以维护。你无法通过模块化的方式管理监控逻辑。

全局混入 A/B 测试

将 A/B 测试逻辑挂到 window 上：

window.abTests = {
  currentVariation: Math.random() > 0.5 ? 'A' : 'B',
  isVariationA: function() {
    return this.currentVariation === 'A';
  },
  isVariationB: function() {
    return this.currentVariation === 'B';
  }
};

// 在代码中直接使用
if (window.abTests.isVariationA()) {
  document.body.classList.add('variation-a');
}

这种方式虽然能快速实现 A/B 测试，但也让测试逻辑变得难以管理。你无法通过配置中心动态调整测试参数。

全局混入错误处理

将错误处理逻辑挂到 window 上：

window.errorHandler = {
  errors: [],
  log: function(error) {
    this.errors.push(error);
    console.error('Error logged:', error);
  },
  report: function() {
    fetch('/api/errors', {
      method: 'POST',
      body: JSON.stringify(this.errors)
    });
  }
};

// 全局捕获错误
window.addEventListener('error', (event) => {
  window.errorHandler.log(event.error);
});

这种方式虽然能快速实现错误监控，但也让错误处理逻辑变得难以扩展。你无法通过模块化的方式管理错误处理策略。

全局混入国际化

将国际化逻辑挂到 window 上：

window.i18n = {
  currentLanguage: 'en',
  translations: {
    en: { welcome: 'Welcome' },
    zh: { welcome: '欢迎' }
  },
  t: function(key) {
    return this.translations[this.currentLanguage][key];
  }
};

// 在代码中直接使用
document.getElementById('welcome').textContent = window.i18n.t('welcome');

这种方式虽然能快速实现国际化，但也让翻译管理变得难以维护。你无法通过专业的国际化工具管理翻译资源。

全局混入主题切换

将主题切换逻辑挂到 window 上：

window.theme = {
  current: 'light',
  toggle: function() {
    this.current = this.current === 'light' ? 'dark' : 'light';
    document.body.classList.toggle('dark-mode', this.current === 'dark');
  }
};

// 在某个按钮点击事件中
document.getElementById('theme-toggle').addEventListener('click', () => {
  window.theme.toggle();
});

这种方式虽然能快速实现主题切换，但也让主题管理变得难以扩展。你无法通过 CSS 变量或专业的状态管理工具管理主题。

全局混入用户偏好

将用户偏好挂到 window 上：

window.userPreferences = {
  fontSize: 'medium',
  colorScheme: 'auto',
  save: function() {
    localStorage.setItem('preferences', JSON.stringify(this));
  },
  load: function() {
    const saved = localStorage.getItem('preferences');
    if (saved) Object.assign(this, JSON.parse(saved));
  }
};

// 初始化时加载
window.userPreferences.load();

这种方式虽然能快速实现偏好管理，但也让偏好逻辑变得难以维护。你无法通过专业的状态管理工具管理用户偏好。