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

最新推荐文章于 2024-04-22 09:09:12 发布

置顶

j植树

最新推荐文章于 2024-04-22 09:09:12 发布

阅读量1k

点赞数

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

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

版权

为什么前端需要模块化

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

多人协同开发的时候，系统中可能会引入很多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元/天解锁文章

j植树

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端模块化IIFE，commonjs，AMD，UMD，ES6 Module规范超详细讲解

为什么前端需要模块化在没有模块化的时候，多个脚本引入页面，会造成诸多问题，比如：多人协同开发的时候，系统中可能会引入很多js脚本，这些js会定义诸多全局变量，这时候很容易出现变量名覆盖的问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial
复制链接

扫一扫