前端模块化：AMD和CMD，后端模块化：commonJS，ES6模块化

清疚 2023-06-07 05:43 22阅读 0赞

如果你对模块化已经了解，可以直接从第三点开始阅读。

**一、模块化的概念：**

在进行项目分析或者编码时，先把项目进行拆分，拆分成很多的类，对象，很多的函数等等。能够提高代码的复用性。这些被拆分出来的类型，对象，函数就是模块。就像一辆汽车是由很多的零部件组成，每个零部件就是一个小模块，而由很多零件组成的发动机之于一辆汽车可以认为是一个大模块；或者说，一台计算机，由主板，cpu，内存，硬盘，显示器，键盘等大模块组成。而一个内存或者cpu又分别由很多的小模块组成。以模块为单位管理代码，会更加独立，调试方便，维护也很方便。

**二、模块化经历的阶段：**

**    1. 函数封装**

这种做法的缺点很明显：污染了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间没什么关系。不同js文件里有相同的全局变量，如果被引入到同一个html文件中，全局变量就会互相影响。

**     2. 对象**

这样避免了变量污染，只要保证模块名唯一即可，同时同一模块内的成员也有了关系，看似不错的解决方案，但是也有缺陷，外部（对象之外）可以随意修改内部成员(属性)

对象的属性就是对象中每个方法的全局变量。

var p = {
    
        id:"007",
    
        name :"芙蓉",
    
        age:25,    
    
        eat:function(str){
    
            alert(this.name+"在吃"+str);
    
        },
    
        work:function(str){
    
            alert(this.name+“在干"+str);
    
        }           
    
    }
    
    //存在问题：
    
    //如：对于p对象的年龄,有效取值应该是在0-150之间的整数。
    
    //  而以下代码的执行，
    
    p.age = 151;
    
    都会使得项目内部出现了不合法的数据。这是程序的健壮性不好。   
    
    所以，对于对象的成员变量(属性)，应该不能被外部访问才对。

3.  **立即执行函数**

**可以通过立即执行函数，来达到隐藏细节的目的**

var p = (function (){
    
        var name="芙蓉";
    
        var age=25;
    
        function eat(str){
    
            alert(this.name+"在吃"+str);
    
        }
    
        function setAge(age){
    
            if(age<0 || age>150){
    
                alert("亲，年龄超出有效值（0-150）的范围");
    
                return;
    
            }
    
            age = age;
    
        }
    
        function getAge(){
    
            return age;
    
        }
    
        return {
    
            eat:eat,
    
            setAge:setAge,
    
            getAge:getAge
    
        }                   
    
    })();  
    
    var p = (function (){
    
        var name="芙蓉";
    
        var age=25;
    
        function eat(str){
    
            alert(this.name+"在吃"+str);
    
        }
    
        function setAge(age){
    
            if(age<0 || age>150){
    
                alert("亲，年龄超出有效值（0-150）的范围");
    
                return;
    
            }
    
            age = age;
    
        }
    
        function getAge(){
    
            return age;
    
        }
    
        return {
    
            eat:eat,
    
            setAge:setAge,
    
            getAge:getAge
    
        }                   
    
    })();

**    4. 模块化的解决方案。**

*  ** 以上模块化存在的问题：**

不管是以上哪种方式（函数，对象，立即执行函数），都存在同样的问题：

1)、html不但要引入自己需要的js文件，还需要引入js文件需要的js文件。如：a.html需要使用 b.js的代码，而由于b.js中使用了c.js里的代码。所以，在a.html中必须引入b.js和c.js。这是JavaScript语言先天性的缺陷----js文件没法引入js文件。其它编程语言（java，c\#，c/c++）就不存在这个问题。

2)、引入js文件的顺序问题以及异步加载问题。

*  **为此出现了一些解决方案：**

1)、前端模块化

在前端里出现了第三方的解决方案 AMD和CMD

2)、后端模块化

在后端里（nodeJS）出现了commonJS规范。

**三、模块化的概念**

1、**导出**：导出就是对外开放的，可以导出变量，常量，函数，对象等等。使用export关键字。放在export关键字后面的（即对外导出的）变量，常量，函数和对象，在其它js文件中可以使用，否则，其它js文件中是不能使用的。即只能内部使用的。

模块化的这种思路，可以隐藏细节，开放接口

2、**导入：**导入就是把其它js文件引入到当前js文件里。

**四、前端模块化：AMD和CMD**

**   1、ES6之前，原生不支持模块化，所以出现了第三方的解决方案，分别是AMD和CMD**

AMD: Asynchronous Module Definition,中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范，由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数（RequireJS库），实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出

CMD:  ”Common Module Definition”，称为 通用模块加载规范 。一般也是用在浏览器端。浏览器端异步加载库 Sea.js 实现的就是CMD规范。

**  2、AMD之requireJS**

**  **

** 1）、引入第三方库requireJS**

** 2）、html文件中引入主模块**

主模块就是html文件所（直接）依赖的模块（文件），使用script标签的data-main属性。假如html需要依赖的文件是main.js , 则代码如下：

如果main.js需要引入其它js文件，那怎么办？我们就需要知道如何定义模块，如何引入模块。

即html文件的最终代码是：<

!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
        <title>Document</title>
    
    </head>
    
    <body>
    
        <input id="btn01" type="button" value="测试" />
    
    </body>
    
    </html>
    
    <script src="js/require.js" data-main="js/main.js"></script>

**  3）、主模块引入其它模块（就是导入）main.js代码**

假如，main.js引入的是person.js。那么 main.js 里的写法如下：

//require ：引入其它模块 
    
    //require函数的第一个参数：是引入的模块名，是数组
    
    //requrie函数的第二个参数，是回调函数，回调函数的参数，
    
    //对应到模块里的return。 即 p 对应着js/person.js里的return。
    
    require(["js/person.js"],function(p){
    
        document.getElementById("btn01").onclick = function(){
    
           p.eat("方便面");
    
           p.work();
    
        }
    
    });

** 4）、定义模块（person.js）**

导出用return，引入别的模块，在define的第一个参数写就行。

假如，main.js引入的是person.js。则person.js里的代码写法如下：

// 这表示当前模块不依赖其它模块
    
    define([],function(){
    
        var name ="张三疯";
    
        var age = 12;
    
        
    
        return {
    
            eat:function(str){
    
                alert(name+"在吃"+str);
    
            },
    
            work:function(){
    
                alert(name+"在努力地工作……");
    
            }
    
        }
    
    });

**5）、如果person.js模块还需要其它模块（如：dog.js）的话，怎么办？**

**5.1）、修改一下，person.js的代码。**

//define ：定义模块
    
    //define 函数的第一个参数：是引入（依赖）的模块名，是数组
    
    //define 函数的第二个参数，是回调函数，回调函数的参数，
    
    // 对应到模块里的return。 即 d 对应着js/dog.js里的return。
    
    
    
    define(["js/dog.js"],function(d){
    
        var name ="张三疯";
    
        var age = 12;
    
        
    
        return {
    
            eat:function(str){
    
                alert(name+"在吃"+str);
    
            },
    
            work:function(){
    
                alert(name+"在努力地工作……");
    
            },
    
            lookDoor:function(){
    
                d.lookDoor();
    
            }
    
        }
    
    });

**5.2）、增加一个dog.js的代码。**

//这表示当前模块不依赖其它模块
    
    define(function(){
    
        var name ="大黄";
    
        
    
        return {
    
            lookDoor:function(){
    
                alert(name+"在看门");
    
            }
    
        }
    
    });

**3、C****MD之****seaJS**

**   1）、引入seaJS（在html里）：**

<!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
        <title>Document</title>
    
    </head>
    
    <body>
    
        <input id="btn01" type="button" value="测试" />
    
    </body>
    
    </html>
    
    <script src="js/sea.js"></script>
    
    <script src="js/main_sea.js"></script>

**  2）、主模块的引入：**

** 3）、主模块引入其它模块（main\_sea.js代码），**

**假如main\_sea.js引入person\_sea.js**

//在主模块里，用seajs引入其它模块，用seajs.use函数。
    
    seajs.use(["person_sea"],function(p){
    
        document.getElementById("btn01").onclick = function(){
    
            p.eat("方便面");
    
            p.work();
    
            p.lookDoor();
    
         }
    
    });

** 4）、模块的定义(person\_sea.js)：**

//seajs中定义模块，用define函数。
    
    //引入其它模块：不在第一个参数，使用回调函数里的requrie;
    
    //导出本模块的属性或者方法：使用回调函数里的exports
    
    define(function(require,exports) {
    
        var name ="张三疯";
    
        var age = 12;
    
        //对外导出（开发）eat函数
    
        exports.eat = function(str){
    
            alert(name+"在吃"+str);
    
        };
    
        
    
        //对外导出（开发）work函数
    
        exports.work = function(){
    
            alert(name+"在努力地工作……");
    
        };
    
    
    
        //此时需要dog模块，所以，用require引入。
    
        let d = require("dog_sea");
    
        exports.lookDoor=function(){
    
            d.lookDoor();
    
        }
    
    });

**dog\_sea.js的代码。**

define(function(require,exports) {
    
        var name ="大黄";
    
        exports.lookDoor=function(){
    
            alert(name+"在看门");
    
        }
    
    });

**4、总结一下，使用模块化的步骤：**

**1****）****、定义模块**

** 1****.1****）、引入别的模块**

** ****1.****2）、对外导出本模块的哪些属性和方法**

**2****)****、主模块引入其它模块**

**3****)****、html引入主模块**

**5、对比AMD和CMD的区别：**

**5.1）****、定义模块**

都使用的都是define函数

** ****5.1.1）****、引入别的模块**

AMD：

在define函数的第一个参数

define(\[依赖的模块列表\],function(引入模块的变量名列表)\{\});

CMD:

在define函数的第二个参数（回调函数）的require参数。

define(function(require,exports)\{

let d = require("dog");//引入dog模块

\});

** ****5.1.2）****、对外导出本模块的哪些属性和方法**

AMD:

用return

CMD:

在define函数的第二个参数（回调函数）的exports参数。

**5.2）****、主模块引入其它模块**

AMD:

require函数

require(\[引入的其它模块列表\],function(其它模块对应的变量名列表)\{

\});

CMD:

seajs.use(\[引入的其它模块列表\],function(其它模块对应的变量名列表)\{

\});

**5.3）****、html引入主模块（假如主模块是main.js）**

AMD:

1）、script标签的 data-main

2）、也可以使用script标签引入主模块。

即：

CMD:

script标签引入主模块

**5.4）****、模块路径问题：**

AMD:

基准路径是html的文件夹

define(\["js/dog.js"\],function(d)\{\})

CMD:

就是js文件的文件夹,

let d = require("dog\_sea");

**5.5）、依赖方面：**

5.5.1）. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible(尽可能的懒惰)

5.5.2）. CMD 推崇依赖就近，AMD 推崇依赖前置。

5.5.3）如下代码示例：

a模块依赖b模块和c模块的代码格式

1.  、AMD

a.js的代码：

define(\['./b', './c'\], function(b, c) \{ // 依赖必须一开始就写好  
             b.doSomething()

c.doSomething()  
  
    \})

1.  、CMD的代码：

a.js

define(function(require,exports,module)\{

var  b = require(“b");

………………

var  c = require(“c");

………………

\});

**四、后端****模块化：****commonJS**

commonJS是后端模块化的解决方案，在nodeJS中有使用（nodeJS是js做后端的技术，相当于php，jsp，aspx）。

咱们曾经写的webpack就是用的commonJS规范。

1、导出：

module.expors=\{

Name:‘张三疯’,

Eat:function()\{

2、导入

Require();

**五、ES6的模块化：**

1、原生支持模块化了

ES6中新增的模块化，即从ES6开始，原生js支持模块化了，不需要第三方的模块化库，现在很多浏览器也支持ES6了。

2、模块化的两个概念

**1）、导出（export关键字）**：导出就是对外开放的，可以导出变量，常量，函数，对象等等。使用export关键字。放在export关键字后面的（即对外导出的）变量，常量，函数和对象，在其它js文件中可以使用，否则，其它js文件中是不能使用的。即只能内部使用的。

在用export导出时，可以导出多个

如：person.js文件（模块）里，如下：

//导出字符串
    
    export var str = "hello";
    
    //导出函数
    
    export var fun = function(){
    
        alert("我是函数");
    
    }
    
    //导出对象
    
    export const p =  {
    
        "id":"007",
    
        "name":"张三疯",
    
        "eat":function(){
    
            alert("吃");
    
            ff();
    
        }
    
    }
    
    //此函数没有使用export关键字导出，所以，只能在当前js文件内部使用
    
    function ff(){
    
        alert("我只能在当前js被使用");
    
    }

**2）、导入（import）**：导入就是把其它js文件引入到当前js文件里。使用关键字import。

在使用import导入（export导出的）时，要使用花括号，

如：import \{str,fun,p\} from './person.js';

在index.js文件中，引入模块person.js；

//导入时，需要使用{}，这是解构赋值。
    
    import {str,fun,p} from './person.js';
    
    window.onload = function(){
    
        document.getElementById("btn01").onclick = function(){
    
            console.log(str);
    
            fun();
    
            console.log(p.id);
    
            p.eat();
    
        }
    
    }

**3）、在html文件中引入index.js**（注意： type="module"）  
注意：js中使用了模块化的关键字import，在引入时，script标签的type属性的值必须写成module。即：<script type="module" src="js/index.js"></script>

注意：测试以上代码时，google浏览器要求放在服务器上进行 ，否则，就会有跨域问题。

**4）、export default****和****export 有什么区别：**

1.  、export与export default均可用于导出常量、函数、文件、模块等
2.  、在一个文件或模块中，export可以有多个，export default仅有一个，而且export default在导出是不需要变量名，相当于匿名的。
3.  、通过export方式导出，在导入时要加\{ \}，export default则不需要。

**代码示例：**

**模块定义：dog.js**

export default {
    
        "name":"大黄",
    
        "eat":function(){
    
            alert("吃");
    
        }
    
    }

**导入模块：**

import d from './dog.js';
    
    window.onload = function(){
    
        document.getElementById("btn01").onclick = function(){
    
            console.log(d);
    
            d.eat();
    
        }
    
    }