浏览器端模块加载器AMD和CMD

1.AMD 异步模块定义

AMD：浏览器端模块化开发的规范。使用AMD规范快发需要用到对应的库函数RequireJs，也即AMD是RequireJs在推广过程中对模块定义的规范化的产出。

RequireJs主要解决两个问题：

多个js文件依赖性，也即多个有依赖性的js文件，会出现被依赖的文件需要早于依赖它的文件加载到浏览器中，但是如果当依赖关系比较复杂的时候，代码的编写和维护就变得很复杂了。
js加载的时候，浏览器会停止网页渲染，加载文件越多，页面失去响应的时间就会越长。

RequireJs作用：

管理模块之间的依赖性，便于代码的编写和维护
实现js文件的异步加载，避免网页失去响应

RequireJs使用:

下载
- 官网地址：https://requirejs.org/
引用
- ```
<script src="js/require.js"><script>;// 假定下载后的require.js文件放于js目录下
```
  由于采用以上方式也会在加载js文件时造成网页失去响应，解决方法：
  - 把其放于网页底部加载
  - 为其添加async属性：该属性表明这个文件需要异步加载，避免网页失去响应
```
<script src="js/require.js" defer async="true"><script>;
```
    由于IE不支持这个属性，只支持defer，也需要加上defer
加载自己写的js文件
```
<script src="js/require.js" data-main="js/main"><script>;
```
- data-main属性作用：指定网页的主模块，默认后缀名是js，可以不用加上js后缀。
- main.js此时会被require.js第一个加载。
AMD模块规范写法
- 模块必须采用特定的define()函数来定义
- 如果一个模块不依赖其他模块
  - 直接将其定义在define()函数之中
```
// /js/test.js
define(function() {
    var sayHello = function() {
        console.log('hi');
    }
    return {
        sayHello: sayHello
    }
})
```
  - 加载
```
// /js/main.js
require(['test'],function(test){
    test.sayHello();
})
```
    第一个参数是需要加载模块数组，采取异步加载的方式，当模块加载完成之后将模块导出对象传入第二个参数作为形参，第二个参数当模块被加载完成之后进行调用
- 如果一个模块依赖其他模块
  - 第一个参数是所依赖的模块数组，第二个参数是当前模块所要有的逻辑实现
```
// /js/pra.js
define(['other'],function(other) {
    //... code
})
```
    其中两个参数的用法与require加载模块是一样的原理
  - 那如何找到模块的呢？
    
    以require加载为例:
    
    默认情况下，require.js假定模块与main.js在同一个目录下，文件名为test.js，然后自动加载。但是如果是其他路径下的模块呢？此时可以使用require.config()对模块加载行为进行自定义。
    
    require.config()写在当前主模块main.js头部。参数是一个对象，paths属性指定各个模块加载路径
    - 文件与main.js同一目录
```
require.config({
    paths: {
        'test': 'test.js'
    }
})
```
    - 文件与main.js不同目录
      
      第一种写法：直接写路径
```
require.config({
    paths: {
        'test': '../lib/test.js';// 也可以直接写绝对路径，包括网址也可以
    }
})
```
      第二种：改变基目录（baseUrl）
```
require.config({
    baseUrl: '../lib'
    paths: {
        'test': 'test.js'
    }
})
```

2.CMD 通用模块定义

类似于AMD，CMD有个浏览器的实现：SeaJs，SeaJs要解决的问题和RequireJs一样，只不过模块加载时机不一样。且SeaJs推崇一个模块一个文件。

官方地址：https://www.zhangxinxu.com/sp/seajs/

语法与Require.js类似，就不在此处再赘述了

3.AMD和CMD区别

两个最明显的区别在于模块定义时对依赖的处理不同:

AMD推崇前置依赖，在定义模块的时候就要声明其依赖的模块
CMD推崇就近依赖，只有在用到某个模块的时候再去require

也即AMD提前执行，CMD延迟执行

最后编辑于：2021.03.15 14:18:03