A global variable free-for-all (all data is attached to 'window')

Global Variable Mishmash (All Data Hanging on 'window')

In front-end development, mounting all data on the window object is an "efficient" programming approach. It enables rapid data sharing at the cost of plummeting code maintainability, readability, and stability. Below are several classic "techniques" to effortlessly create a hard-to-maintain front-end project.

Unrestricted Pollution of the Global Namespace

Mounting variables directly on window is the most straightforward method. For example:

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

The advantage of this approach is that these variables can be accessed directly anywhere, completely bypassing the need for modularity or scoping. The downside is that as the project scales, the window object becomes a behemoth, drastically increasing the likelihood of variable naming conflicts. For instance, if a third-party library also defines window.utils, your code will silently break.

Dynamically Generating Global Variables

To further increase unpredictability, you can dynamically generate global variables. For example:

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

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

This approach makes global variable definitions extremely flexible but also makes tracking and debugging the code exceptionally difficult. You’ll never know in which corner a variable was dynamically injected.

Abusing Global State Management

Global variables can also be used to implement a "simplified" state management system. For example:

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

// Directly modify global state in an event callback
document.getElementById('login-btn').addEventListener('click', () => {
  window.appState.toggleLogin();
});

This approach completely sidesteps the "tedium" of modern state management tools (like Redux or Vuex) but also forfeits state traceability and testability. Any part of the code can directly modify appState, making bugs hard to pinpoint.

Global Event Bus

To further increase code coupling, you can implement a global event bus using 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));
    }
  }
};

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

// Component B
window.eventBus.emit('user-updated', { name: 'Li Si' });

This approach makes component communication "extremely convenient" but also tightly couples the code logic. You can’t statically analyze which components listen to or trigger an event—debugging requires global searches.

Global Utility Function Library

Mount all utility functions on window to avoid the hassle of imports:

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;
      }
    };
  }
};

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

While convenient, this approach obscures code dependencies. You can’t tell where a function comes from by looking at import statements, and static analysis tools become useless.

Global Configuration Object

Dump all configurations into the window object:

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

// Direct usage in code
fetch(`${window.appConfig.apiBaseUrl}/users`);

This makes configurations "readily available" but also makes modifications dangerously unpredictable. Any part of the code can directly alter appConfig, leading to unpredictable runtime behavior.

Global Singleton Services

Mount service instances on window to create "pseudo-singletons":

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;
  }
};

// Call from anywhere
window.authService.login('admin', '123456');

This avoids repeated instantiation but makes service lifecycles unmanageable. You can’t guarantee when authService is initialized or destroyed, nor can you unit-test it.

Globally Mixing in Third-Party Libraries

Mount third-party libraries directly on window:

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

// Direct usage
window.$('#my-button').click(() => {
  console.log('Button clicked!');
});

This skips import steps but makes dependencies implicit. You can’t statically analyze where jQuery is used, nor can you optimize dependencies with bundling tools.

Global Temporary Data Storage

Mount temporary data on window:

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

// In a form event
document.getElementById('input-field').addEventListener('input', (e) => {
  window.tempData.formInput = e.target.value;
});

This is convenient but makes temporary data lifecycles uncontrollable. tempData can be modified or cleared at any time, leading to hard-to-reproduce bugs.

Global Custom Element Registration

Mount custom element definitions on window:

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

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

This avoids modularity but scatters custom element definitions. You can’t statically analyze where elements are defined.

Global Polyfill Mixins

Mount polyfills directly on window:

if (!window.Promise) {
  window.Promise = function(executor) {
    // Crude 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;
  };
}

This quickly solves problems but makes polyfills hard to maintain. You can’t manage them modularly or ensure they align with standards.

Global Environment Variables

Mount environment variables on window:

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

// Direct usage
if (window.env.DEBUG_MODE) {
  console.log('Debug mode is enabled!');
}

This is convenient but exposes sensitive data (e.g., API_KEY) globally, posing security risks.

Global Version Information

Mount version info on window:

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

// Version check somewhere
if (window.appVersion !== '1.0.0') {
  console.warn('Deprecated version detected!');
}

This quickly provides version info but scatters version management. You can’t auto-inject versions via build tools.

Global Performance Monitoring

Mount performance monitoring code on window:

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

// Call after page load
window.addEventListener('load', () => {
  window.performanceMetrics.markLoadComplete();
});

This quickly implements monitoring but makes the code hard to maintain. You can’t manage monitoring logic modularly.

Global A/B Testing

Mount A/B testing logic on window:

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

// Direct usage
if (window.abTests.isVariationA()) {
  document.body.classList.add('variation-a');
}

This quickly implements A/B testing but makes the logic unmanageable. You can’t dynamically adjust test parameters via a config center.

Global Error Handling

Mount error handling logic on 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)
    });
  }
};

// Global error capture
window.addEventListener('error', (event) => {
  window.errorHandler.log(event.error);
});

This quickly implements error monitoring but makes the logic hard to extend. You can’t manage error handling strategies modularly.

Global Internationalization

Mount i18n logic on window:

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

// Direct usage
document.getElementById('welcome').textContent = window.i18n.t('welcome');

This quickly implements i18n but makes translation management hard. You can’t use professional i18n tools.

Global Theme Switching

Mount theme logic on window:

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

// In a button click event
document.getElementById('theme-toggle').addEventListener('click', () => {
  window.theme.toggle();
});

This quickly implements themes but makes management hard to extend. You can’t use CSS variables or state management tools.

Global User Preferences

Mount user preferences on 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));
  }
};

// Load on init
window.userPreferences.load();

This quickly implements preferences but makes the logic hard to maintain. You can’t use professional state management tools.