CommonJS
前言
NodeJS中应用的模块标准。
依据CommonJS标准，一个独自的文件就是一个模块（module）。加载模块应用require办法，该办法读取一个文件并执行，最初返回文件外部的module.exports对象。
CommonJS采纳同步加载模块的形式，只有加载完能力执行前面的操作，次要实用于服务端。
应用规定
1、exports与require应用的模块导入导出规则遵循的是CommonJS(AMD和CMD)标准, 个别在NodeJS(express,koa)中应用，是绝对比拟先呈现的标准,也是目前大多数浏览器反对的模块导入导出标准。
module.exports 与 exports
1、一个文件即为一个module；
2、一个module中有很多字段，例如 id path parent exports等等，能够间接在js文件输入module即可查看；
3、exports示意这个module要导出的数据，module.export默认指向一个空的对象内存；
4、变量exports默认指向module.exports（援用传递）；
5、module实际上导出的数据是在module.export这个变量中；
require
1、应用require即可导入另一模块中导出的数据；
exports与require之间的分割
无论模块exports的是什么数据类型，module.exports与require指向的是同一块内存地址，任何一方扭转都会影响另一方的数据（动静）
案例一：
// a.js文件
let aNum = 1;
let aArr = [1];
setTimeout(() => {
aNum = 11; // 并不会影响module.exports.aNum的值
aArr.push(11); // 会影响module.exports.aArr的值
console.log('1s a模块扭转数据aNum&aArr:');
console.log(`aNum=${aNum},module.exports.aNum=${module.exports.aNum}`);
console.log(`aArr=${aArr},module.exports.aArr=${module.exports.aArr}`);
}, 1000)
setTimeout(() => {
console.log(`3s a模块承受数据:aNum=${module.exports.aNum},aArr=${module.exports.aArr}`);
}, 3000)
// 以下写法等价于
// module.exports.aNum = aNum aNum属于根本类型 值拷贝
// module.exports.aArr = aArr aArr属于对象 值援用
module.exports = {
aNum,
aArr
};
console.log(`a模块已导出数据:aNum=${module.exports.aNum},aArr=${module.exports.aArr}`);
// b.js文件
const a = require("./commonjs_a");
console.log(`b模块已接收数据:aNum=${a.aNum},aArr=${a.aArr}`);
setTimeout(() => {
console.log(`2s b模块承受数据:aNum=${a.aNum},aArr=${a.aArr}`);
a.aNum = 2;
a.aArr = [2]
console.log(`2s b模块扭转数据:aNum=${a.aNum},aArr=${a.aArr}`);
}, 2000)
// 输入后果
a模块已导出数据:aNum=1,aArr=1
b模块已接收数据:aNum=1,aArr=1
1s a模块扭转数据aNum&aArr:
aNum=11,module.exports.aNum=1
aArr=1,11,module.exports.aArr=1,11
2s b模块承受数据:aNum=1,aArr=1,11
2s b模块扭转数据:aNum=2,aArr=2
3s a模块承受数据:aNum=2,aArr=2ES6 Module
前言
应用规定
1、export与import是ES组织官网退出的模块化计划,个别在typescript和三大框架(Angular, Vue, React)中比拟常见,但目前反对这套标准的客户端浏览器比拟少,所以通常状况下代码都要通过Babel转换成目前浏览器能反对的,也就是exports和require那一套。
export 与 export default
1、无论导出数据是什么类型的，export导出的都是变量的援用绑定；
2、任何未显式导出的变量、函数或类都是模块公有的，无奈从模块内部拜访；
// es6_a.mjs
export let aNum = 1;
export let aArr = [1];
setTimeout(() => {
aNum = 11;
aArr.push(11);
console.log('1s a模块扭转数据aNum&aArr:');
console.log(`aNum=${aNum},`);
console.log(`aArr=${aArr},`);
}, 1000)
console.log(`a模块已导出数据:aNum=${aNum},aArr=${aArr}`);
// es6_b.mjs
// import时必须加{ }
import {aNum, aArr} from './es6_a.mjs';
console.log(`b模块已接收数据:aNum=${aNum},aArr=${aArr}`);
setTimeout(() => {
console.log(`2s b模块承受数据:aNum=${aNum},aArr=${aArr}`);
}, 2000);
// 输入后果
a模块已导出数据:aNum=1,aArr=1
b模块已接收数据:aNum=1,aArr=1
1s a模块扭转数据aNum&aArr:
aNum=11
aArr=1,11
2s b模块承受数据:aNum=11,aArr=1,112、export default有点非凡，导出的数据要依据数据类型来定，与CommonJS的module.exports有点相似
// es6_a.mjs
let aNum = 1;
let aArr = [1];
setTimeout(() => {
aNum = 11;
aArr.push(11);
console.log('1s a模块扭转数据aNum&aArr:');
console.log(`aNum=${aNum}`);
console.log(`aArr=${aArr}`);
}, 1000)
// 与module.exports相似
export default {
aNum, // 数值类型 深拷贝
aArr // 对象类型 浅拷贝
}
console.log(`a模块已导出数据:aNum=${aNum},aArr=${aArr}`);
// es6_b.mjs
import a from './es6_a.mjs';
console.log(`b模块已接收数据:aNum=${a.aNum},aArr=${a.aArr}`);
setTimeout(() => {
console.log(`2s b模块承受数据:aNum=${a.aNum},aArr=${a.aArr}`);
}, 2000);
// 输入后果
a模块已导出数据:aNum=1,aArr=1
b模块已接收数据:aNum=1,aArr=1
1s a模块扭转数据aNum&aArr:
aNum=11
aArr=1,11
2s b模块承受数据:aNum=1,aArr=1,113、* 在export * from 'xxx'前面加正文会报怪异的bug，导出的数据为undefined
import
1、导入default的不须要应用{ }，导入非默认模块则须要加{ }
2、一个文件能够同时导出默认的模块和非默认的模块，如下所示：
// es6_a.mjs
export let color = 'red';
export default function(num1, num2) {
return num1 + num2;
}
// es6_b.mjs
// 默认值必须排在非默认值之前
import sum, { color } from './es6_a.mjs';
console.log(sum(1,2));
console.log(color);
// 输入后果
3
red3、能够应用as在导出和导入时重命名
// es6_a.mjs
function sum(num1, num2) {
return num1 + num2;
}
export { sum as a };
// es6_b.mjs
import { a as aa } from './es6_a.mjs';
console.log(aa(1,2));
// 输入后果
3两者差别
1. CommonJS 模块输入的是一个值的拷贝（依据数据类型分为深拷贝或浅拷贝），ES6 模块输入的是值的援用（任何数据类型）
CommonJS 模块输入的是值的拷贝，也就是说，一旦输入一个值，模块外部的变动就影响不到这个值。ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本动态剖析的时候，遇到模块加载命令import，就会生成一个只读援用。等到脚本真正执行时，再依据这个只读援用，到被加载的那个模块外面去取值。换句话说，ES6 的import有点像 Unix 零碎的“符号连贯”，原始值变了，import加载的值也会跟着变。因而，ES6 模块是动静援用，并且不会缓存值，模块外面的变量绑定其所在的模块。
2. CommonJS 模块是运行时加载，ES6 模块是编译时输入接口
3. ES6 Module中导入的数据为const，不容许从新赋值；而CommonJS中导入的数据容许从新赋值
参考1
发表回复