前端模块化IIFE，commonjs，AMD，UMD，ES6 Module规范超详细讲解

最新推荐文章于 2025-04-10 15:59:54 发布

置顶

j植树

最新推荐文章于 2025-04-10 15:59:54 发布

阅读量1.2k

点赞数

分类专栏： javascript 文章标签： javascript umd amd es6/es7

本文链接：https://blog.csdn.net/jianghao2016/article/details/108353356

版权

本文详细介绍了前端模块化的概念和重要性，探讨了IIFE（立即执行函数表达式）、CommonJS、AMD（异步模块定义）和UMD（通用模块定义）的原理和使用。同时，文章提到了ES6模块作为现代前端的标准，并解释了其运行方式和特性。通过对各种模块化标准的比较，帮助开发者理解如何在不同场景下选择合适的模块化方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么前端需要模块化

在没有模块化的时候，多个脚本引入页面，会造成诸多问题，比如：

多人协同开发的时候，系统中可能会引入很多js脚本，这些js会定义诸多全局变量，这时候很容易出现变量名覆盖的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        var info = "这是功能A";
    </script>
    <script type="text/javascript">
        var info = "这是功能B";
    </script>
    <script>
        console.log(info); // 这是功能B
    </script>
</body>
</html>

上面的例子中可以看到第一个js中定义的变量info的值被第二个js中的变量所覆盖

当脚本之间存在依赖关系的时候，单纯的引用script看不出js之间的依赖，可读性很差

<html>
<!-- 此处省略head -->
<body>
    <script type="text/javascript">
        function getMessage(){
    
            return "这是一条message"
        }
    </script>
    <script type="text/javascript">
        function showMessage(){
    
            console.log(getMessage());
        }
    </script>
    <script>
        showMessage(); // 这是一条message
    </script>
</body>
</html>

如果第一个脚本没有引入，那么执行就会抛错，也就是说第二个脚本是依赖第一个脚本的，但是这个依赖关系这里看不出来

什么是模块

模块我理解为就是一个局部作用域，这个局部作用域内部定义了一些局部变量和方法，然后对外提供接口供外部调用，比如:

var moduleA = {
   
    name : "A"
}
var moduleB = {
   
    name : "B"
}

console.log(moduleA.name); // A

这里就可以看成是定义了两个最简单的模块，我们可以通过模块去访问各自的变量

是什么IIFE

IIFE(Immediately Ivoked Function Expression),即立即执行函数表达式&#

最低0.47元/天解锁文章

前端模块化IIFE，commonjs，AMD，UMD，ES6 Module规范超详细讲解

导航

为什么前端需要模块化

什么是模块

是什么IIFE