【Node.js和模块化】AMD

柔情只为你懂 2021-11-29 07:26 295阅读 0赞

**本文笔记基于「千古壹号」的GitHub项目：[https://github.com/qianguyihao/web][https_github.com_qianguyihao_web]  
非商业用途自由转载，保持署名，注明出处！**

--------------------

### 文章目录 ###

*  1.概念
 *   *  1.1 暴露模块方式
     *  1.2 引入模块方式
 *  2.举例： RequireJS
 *   *  2.1 初始化
     *  2.2 导入第3方包
     *  2.3 自定义模块
     *  2.4 添加.html文件&运行代码

# 1.概念 #

*  AMD（Asynchronous Module Definition）：异步模块定义。
 *  用途：浏览器端异步加载。
 *  RequireJS：基于**AMD规范**实现的模块化开发解决方案。

## 1.1 暴露模块方式 ##

*  没有依赖的模块：参数只有一个 function

define(function () { 
    
        return 模块
    
    });

*  定义有依赖的模块：（参数有两个：模块名、function）

define(['module1', 'module2'], function (m1, m2) { 
        return 模块
    });

## 1.2 引入模块方式 ##

requirejs(['module1', 'module2'], function (m1, m2) {
    
        使用m1 / m2
    
    })

# 2.举例： RequireJS #

## 2.1 初始化 ##

![在这里插入图片描述][20190721170500767.png]

## 2.2 导入第3方包 ##

官网：[require.js][]

![在这里插入图片描述][20190721192039985.png]  
点击后复制全文，新建txt文本，命名require.js，拷贝到项目的js/libs/目录中。

## 2.3 自定义模块 ##

1.  dataService.js：  
    没有依赖的模块，返回的是一个方法名字
2.  alerter.js：  
    有依赖模块myDataService，稍后会在main.js中作映射，和dataService.js文件关联起来。返回的是一个方法名字。

define(['myDataService'], function (dataService) { });

3.main.js：

*  映射：

requirejs.config({ 
       paths: {     //配置路径
            myDataService: './modules/dataService',
            myAlerter: './modules/alerter'
        }
    });
    - 引入模块
    ```js
    requirejs(['myAlerter'], function (alerter) { 
        alerter.showMsg();
    })();

*  上方做了映射，将myAlerter这个名字和alerter.js文件关联了起来。
 *  文件3依赖了文件2，文件2依赖了文件1。

## 2.4 添加.html文件&运行代码 ##

--------------------

**如有不当之处，欢迎指正!  
谢谢！**

[https_github.com_qianguyihao_web]: https://github.com/qianguyihao/web
[20190721170500767.png]: /images/20211129/7c052f4d3d1343c5973463ce6cf585f2.png
[require.js]: http://requirejs.org/docs/download.html
[20190721192039985.png]: /images/20211129/f438eca7ab0045298418d2e7db573ed4.png