无模块化

在早期的前端开发中，JavaScript 代码通常都是直接写在 HTML 文件中，没有模块化的概念。随着项目规模的扩大，代码的复杂度也随之增加，开发者逐渐意识到需要一种机制来组织和管理代码，以提高可维护性和复用性，这就是前端模块化发展的起点。

全局作用域

在最初的前端开发中，所有的 JavaScript 代码都是共享同一个全局作用域。这意味着所有的变量和函数都在全局范围内可见，容易导致命名冲突和代码难以维护。随着项目变得越来越复杂，全局作用域的局限性逐渐显现出来。

特点：

所有变量和函数共享同一作用域。
随着代码量的增加，命名冲突频发。
代码组织混乱，难以维护。

示例：

javascript

var globalVar = 'I am global'

function doSomething() {
  console.log(globalVar)
}

iife

为了解决全局作用域污染问题，开发者开始使用立即执行函数表达式（IIFE）。

IIFE 通过将代码包裹在一个函数中并立即执行，从而创建一个局部作用域，避免了与全局作用域的冲突。

特点：

通过创建局部作用域来避免全局污染。
代码组织更加模块化和清晰。

示例：

javascript

;(function () {
  var privateVar = 'I am private'
  function privateFunc() {
    console.log(privateVar)
  }
  window.publicFunc = function () {
    privateFunc()
  }
})()

无模块化 ​

全局作用域 ​

iife ​

无模块化

全局作用域

iife