CommonJS、requirejs、ES6的对比

CommonJS

 

 CommonJS就是为JS的表现来制定规范，因为js没有模块的功能所以CommonJS应运而生，它希望js可以在任何地方运行，不只是浏览器中。

CommonJS是nodejs也就是服务器端广泛使用的模块化机制。 

该规范的主要内容是，模块必须通过module.exports 导出对外的变量或接口，通过 require() 来导入其他模块的输出到当前模块作用域中。

根据这个规范，每个文件就是一个模块，有自己的作用域，文件中的变量、函数、类等都是对其他文件不可见的。

如果想在多个文件分享变量，必须定义为global对象的属性。（不推荐）

定义模块

在每个模块内部，module变量代表当前模块。它的exports属性是对外的接口，将模块的接口暴露出去。其他文件加载该模块，实际上就是读取module.exports变量。

var x =5;

varaddX =function(value) {returnvalue + x;};

module.exports.x = x;

module.exports.addX = addX;             

定义模块

require方法用于加载模块，后缀名默认为.js

varapp =require('./app.js');

根据参数的不同格式，require命令去不同路径寻找模块文件。

如果参数字符串以“/”开头，则表示加载的是一个位于绝对路径的模块文件。

如果参数字符串以“./”开头，则表示加载的是一个位于相对路径的模块文件

如果参数字符串不以“./“或”/“开头，则表示加载的是一个默认提供的核心模块（node核心模块，或者通过全局安装或局部安装在node_modules目录中的模块）

AMD

AMD（异步模块定义）是为浏览器环境设计的，因为 CommonJS 模块系统是同步加载的，当前浏览器环境还没有准备好同步加载模块的条件。

requirejs即为遵循AMD规范的模块化工具。 

RequireJS的基本思想是，通过define方法，将代码定义为模块；通过require方法，实现代码的模块加载。

ES6 Modules

ES6正式提出了内置的模块化语法，我们在浏览器端无需额外引入requirejs来进行模块化。

ES6中的模块有以下特点：

模块自动运行在严格模式下

在模块的顶级作用域创建的变量，不会被自动添加到共享的全局作用域，它们只会在模块顶级作用域的内部存在；

模块顶级作用域的 this 值为 undefined

对于需要让模块外部代码访问的内容，模块必须导出它们

定义模块

使用export关键字将任意变量、函数或者类公开给其他模块。

重命名模块

 

这里将本地的sum函数重命名为add导出，因此在使用此模块的时候必须使用add这个名称。

导出默认值

模块的默认值是使用 default 关键字所指定的单个变量、函数或类，而你在每个模块中只能设置一个默认导出。

 

加载模块

 

限制export 与 import 都有一个重要的限制，那就是它们必须被用在其他语句或表达式的外部，而不能使用在if等代码块内部。原因之一是模块语法需要让 JS 能静态判断需要导出什么，正因为此，你只能在模块的顶级作用域使用 export与import。

作者：杨霞_60e4
链接：https://www.jianshu.com/p/f65e84bfeb16
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。