JavaScript之模块化——commonJS、AMD、CMD、ES6

快来打我* 2022-05-29 02:38 273阅读 0赞

前言：

模块，简单的理解就是一个或几个js文件实现特定功能，导入模块就是导入这些文件的代码，以供其调用。

加载，包括同步加载和异步加载，服务器端的模块js文件存放在磁盘上，同步获取js文件即可，所以nodejs遵循的是CommonJS规范。而浏览器获取js文件，需要通过网络请求服务器把模块的js文件下载下来，如果是同步获取必然会阻塞浏览器的渲染，因此需要利用异步加载方式，通过callback来通知浏览器加载完毕。

commonJS是同步加载，主要应用于服务器端javascript规范，主要代表是nodejs。commonJS是同步加载

AMD是异步加载，预加载，依赖前置，主要代表是requireJS。由于commonJS是同步加载，在浏览器端就不太适合。

CMD，主要代表seaJs，是异步加载，延迟加载，依赖就近。是在回调函数中提供require方法，按需require依赖模块。

以上内容来自[研究一下javascript的模块规范（CommonJs/AMD/CMD）][javascript_CommonJs_AMD_CMD]

AMD模块依赖声明方式

define(['./a', './b'], function (a, b) {
        // more code ..
    })

AMD是提前声明，不用静态分析模块依赖，加载器或者自动加载工具可以很容易得到依赖的模块。但是代码书写不是特别友好。

CMD模块依赖声明方式

define（function（require） {
        var a = require('./a');
        var b = require('./b');
        // more code ..
    }）

CMD依赖模块式就近声明，异步模块需要提前加载这些模块，需要在真正使用前提前提取所依赖的模块，无论是加载器即时加载，还是自动加载工具， CMD的这种依赖声明方式只能通过静态分析方式实现，这也是他的弊端所在。

不能压缩文件，由于require是局部变量，当压缩文件改变require变量名称后，加载器或者自动加载工具就无法获取依赖的模块了。

额外声明：路径参数不能进行字符串运算，不能利用字符串变量，否则加载器或者自动加载工具无法获取发哦依赖的模块。

注：SeaJs的静态分析方式是将模块包toString()之后利用提取require部分得到的依赖模块路径。

以上内容摘自[CMD与AMD区别][CMD_AMD]

ES6通过import和export实现模块的输入和输出。import用于提供输入其他模块提供的功能，export用来提供模块的对外接口。

import  a, {b, c} from 'module1';
    import a from ‘module1’; //默认导出是a，不用大括号
    import * from as aa from 'module1';
    import {a as default} from 'module1';

export var a = ‘1’；
    export var b = ‘2’；
    export {a, b};
    export {a, b as c};
    export default class{};
    export default b;

[javascript_CommonJs_AMD_CMD]: https://www.tuicool.com/articles/y2uqeaM
[CMD_AMD]: http://www.voidcn.com/article/p-xxpxcvsg-tq.html