前端模块化 CommonJS AMD ES6 CMD

Posted 2021-02-13 闲敲棋子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端模块化 CommonJS AMD ES6 CMD相关的知识，希望对你有一定的参考价值。

不使用模模块化的情况

util.js(基础函数库） getFormatDate 函数
a-util.js（业务基础函数库） aGetFormatDate 函数使用getFormatDate
a.js aGetFormatDate

// util.js
function getFormatDate(date, type) {
    // type === 1 返回 xxxx
    // type === 2 返回 xxx
    // ...
}

// a-util.js
function aGetFormatDate(date) {
    //要求返回 xxx 格式
    return getFormatDate(date, 2)
}

// a.js
var dt = new Date()
console.log(aGetFormatDate(dt))

<script src="util.js"></script>
<script src="a-util.js"></script>
<script src="a.js"></script>

这些代码中的函数必须是全局变量，才能暴露给使用方，全局变量污染

a.js知道要引用a-util.js，但是他还知道要依赖util.js么？

使用模块化

// util.js
export {
    function getFormatDate(date, type) {
    // type === 1 返回 xxxx
    // type === 2 返回 xxx
    // ...
    }
}

// a-util.js
var getFormateDate require(‘util.js‘)
export {
    function aGetFormatDate(date) {
    //要求返回 xxx 格式
    return getFormatDate(date, 2)
    }
}

// a.js
var aGetFormatDate = require(‘a-util.js‘)
var dt = new Date()
console.log(aGetFormatDate(dt))

直接<script src="a.js"></script>，其他根据依赖关系自动引用
那两个函数，没必要做成全局变量，不会带来污染和覆盖

AMD（异步模块定义）

require.js requirejs.org
全局define函数
全局require函数
依赖JS会自动、异步加载

//util.js
define(function () {
    return {
        getFormatDate(date, type) {
    // type === 1 返回 xxxx
    // type === 2 返回 xxx
    // ...
    }
    }
})

// a-util.js
define([‘./util.js‘], function (util) {
    return {
        aGetFormatDate: function(date) {
            return util.getFormatDate(date,2)
        }
    }
})

// a.js
define([‘a-util.js‘], function (aUtil) {
    return {
        printDate: function(date) {
            console.log(aUtil.aGetFormatDate(date))
        }
    }
})

// main.js
required([‘./a.js‘], function(){
    var date = new Date()
    a.printDate(date)
})

使用require.js

<scritp src="/require.min.js" data-main="./main.js"></scritp>

require（）函数在加载依赖函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块加载成功，才会去执行。

因为网页在加载js的时候会停止渲染，因此我们可以通过异步的方式去加载js,而如果需要依赖某些，也是异步去依赖，依赖后再执行某些方法。

CommonJS

nodejs 模块化规范，现在被大量用于前端
其那段开发依赖的插件和库，都可以从npm中获取
构建工具的高度自动化，使得使用npm的成本非常低
CommonJS不会异步加载JS，而时同步一次性加载出来

// util.js
module.exports = {
    getFormatDate(date, type) {
    // type === 1 返回 xxxx
    // type === 2 返回 xxx
    // ...
    }
}

// a-util.js
var util = require(‘util.js‘)
module.exports = {
    aGetFormatDate: function(date) {
            return util.getFormatDate(date,2)
        }
}

AMD 和 CommonJS 的使用场景

需要异步加载JS，使用AMD
使用了npm之后建议使用CommonJS
ES6实现模块化

如果使用es6语法，那么则无需引入requireJS进行模块化，它的特点主要为：
- 在模块顶级作用域中的this为undefine。
- 单个文件为一个模块，顶级作用域声明的变量只在当前模块生效。对其他模块不影响，对外导出的变量才能被其他变量使用
定义

导出内容有俩种关键字：
- export 导出该模块要导出的变量、函数、对象等等。
```
export const color = ‘#fff‘;
```
- as 输出时创建别名，也适用于导入情况。
```
const color = ‘#fff‘;
export color as white
```
- export default 该模块的默认输出值，可以为变量、函数、对象,一个模块只能导出一个默认值。默认导出的内容可以无名称，因为默认导出就代表该模块，但也可以有名称，或者使用别名 as。
```
export default const color = ‘#fff‘;
// export default 5；
// const color = ‘#fff’；
// export { color as default  }
```
使用
- 在模块中使用import关键字来导入其他模块导出的内容。分为几种情况：
- 导入非默认内容，需要用结构的方式，因为在模块中，非默认导出的内容，都会被添加到一个变量中，用结构的方式拿出一个或多个内容。
```
import { color } from ‘./color‘;
```
- 导入默认内容，可以直接导出即可。
```
import color from ‘./color‘;
```
CMD

CMD规范的实现代表是sea.js
- 对于依赖的模块AMD是提前执行，CMD是延迟执行。不过RequireJS从2.0开始，也改成可以延迟执行（根据写法不同，处理方式不通过）。
- CMD推崇依赖就近，AMD推崇依赖前置。
```
//AMD
define([‘./a‘,‘./b‘], function (a, b) {
 
    //依赖一开始就写好
    a.test();
    b.test();
});
 
//CMD
define(function (requie, exports, module) {
     
    //依赖可以就近书写
    var a = require(‘./a‘);
    a.test();
     
    ...
    //软依赖
    if (status) {
     
        var b = requie(‘./b‘);
        b.test();
    }
});
```
简单来说,就是sea.js属于懒加载,require.js属于预加载.
```
 
```