CommonJs、AMD、ES6模块化(学习笔记)

236 阅读3分钟

CommJS

CommonJS(www.commonjs.org) 是一种被广泛使用的Javascript模块化规范。器核心思想是通过require方法来同步加载依赖的其他模块;CommonJS 规范的流行得益于 Node.js 采用了这种方式,后来这种方式被引入了网页开发中。

优点:

1.代码可复用于Node.js环境下并运行
2.通过npm发布的很多第三方模块都采用了CommonJs规范

缺点:

1.无法直接运行于浏览器环境下,必须通过工具转成标准ES5
2.同步加载模块,更多的是在服务器中使用,因为服务器中好多资源文件都是在本地

CommonJS通常是指CommonJS2。CommonJS1中的exports实际上是module.exports的引用。

因此不建议直接通过exports=XX。只能通过 exports.XX = XX 的方式导出;

而 CommonJS2 在 CommonJSl 的基础上加入了 module.exports = XX 的导出方式。

commonJS1 eg:

child1.js 导出
exports['child10'] = 'child10'    
exports.child11='childe11'

parent.js 导入
const Child1 = require('./child1.js')

parent.js 输出
Child1.child10     //加了一层命名空间
Child1.child11

commonJS2 eg:

child2.js  导出
module.exports = function child20(){console.log('child20...')};

parent.js 导入
const Child2 = require('./child2.js');

parent.js 输出
Child2()         //不加命名空间

child3.js  导出
const child31='child31';
const child32=function (){console.log('child32...')};
module.exports ={
   child31:child31,    
   child32:child32
}

parent.js  导入
const { child31 } =require('./child3.js');
const child32=require('./child3.js').child32;

parent.js 输出
child31();
child32();

打印console.log(module);

image.png 所有模块都是构造函数Module的一个实例,这个实例包含上图显示的那些属性。如果没有父模块,直接调用当前模块,parent 属性就是 null,id 属性就是一个点。filename 属性是模块的绝对路径,path 属性是一个数组,包含了模块可能的位置

AMD

AMD ( en.wikipedia.org/wiki/Asynch… 也是一种 JavaScript 模块化规范,与 CommonJS 最大的不同在于,它采用了异步的方式去加载依赖的模块。 AMD 规范主要用于解决针对浏览器环境的模块化问题,最具代表性的实现是 requirejs (requirejs.org)

采用 AMD 导入及导出的代码如下:

image.png

优点:

可在不转换代码的情况下直接在浏览器中运行;
可异步加载依赖:
可并行加载多个依赖:
代码可运行在浏览器环境和 Node.js 环境下。

缺点:

JavaScript 运行环境没有原生支持 A岛。, 需要先导入实现了 AMD 的库 后才能正常使用

ES6模块化

ES6 模块化是国际标准化组织 ECMA 提出的 JavaScript 模块化规范,它在语言层面上实 现了模块化。浏览器厂商和 Node. 都宣布要原生支持该规范。 它将逐渐取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方法。

特点:

   ES6 模块虽然是终极模块化方案,但它的缺点在于目前无法直接运行在大部分 JavaScript 运行环境下,必须通过工具转换成标准的 ES5 后才能正常运行。
   每一个模块只加载一次, 并只执行一次,重复加载同一文件,直接从内存中读取;
   每一个模块内声明的变量都是局部变量, 不会污染全局作用域;
   通过export导出模块,通过import导入模块

export后只能跟function、class、var、let、const、default、{}。export的作用就是给当前模块对象添加属性,方便后期导入到其他模块中。

image.png

as重命名:

image.png