CommonJS的导入
const sum = require('./add.js') console.log(sum(2,3)) // 5
模块加载机制,如果一个模块是第一次被加载,那么会执行该模块并导出内容,如果该模块被执行过,那么这个模块的代码不会再被执行,而是直接导出上次执行的结果。
require可以接受表达式,动态制定模块路径
CommonJS的导出
在CommonJs中每个文件都是一个模块,模块的作用域是属于自身的,而一个模块向外暴露的唯一方式是导出,在CommonJs中导出的是module.exports对象
下面两种写法实质上是一样的
module.exports = { name: 'calculater', add: function(a, b) { return a + b; } };
等同于
exports.name = 'calculater'; exports.add = function(a, b) { return a + b; };
其内在机制是将exports指向了module.exports,而module.exports在初始化时是一个空对象。我们可以简单地理解为,CommonJS在每个模块的首部默认添加了以下代码:
var module = { exports: {}, }; var exports = module.exports;
那么上面的2个代码就可以看成:
var module = { exports: {}, }; var exports = module.exports; // 上面的代码可以看成是CommonJS在每个模块的首部默认添加的 module.exports = { name: 'calculater', add: function(a, b) { return a + b; } };
var module = { exports: {}, }; var exports = module.exports; // 上面的代码可以看成是CommonJS在每个模块的首部默认添加的 exports.name = 'calculater'; exports.add = function(a, b) { return a + b; };
因此,为exports.add赋值相当于在module.exports对象上添加了一个add属性
因此,为exports.name赋值相当于在module.exports对象上添加了一个name属性
注意点一:不要直接给exports赋值,否则会导致其失效。 如:
exports = { name: 'calculater' };
上面代码中,由于对exports进行了赋值操作,使其指向了新的对象{name: ‘calculater’},module.exports却仍然是原来的空对象,因此name属性并不会被导出。
注意点二:不要把module.exports与exports混用。
exports.add = function(a, b) { return a + b; }; module.exports = { name: 'calculater' };
上面的代码先通过exports导出了add属性,相当于module.exports = { add: function(){…}}然后将module.exports重新赋值为另外一个对象。这会导致原本拥有add属性的对象丢失了,最后导出的只有name。
注意点三:导出语句不代表模块的末尾
module.exports = { name: 'lcylcy' }; console.log('end');
module.exports或exports后面的代码依旧会照常执行。比如上面的console会在控制台上打出“end”,但在实际使用中,为了提高可读性,不建议采取上面的写法,而是应该将module.exports及exports语句放在模块的末尾。
ES6 Module
es6也是将每一个文件当做模块,每个模块拥有自身的作用域,导入导出语句是import export,会自动开启use strict控制严格模式。
ES6 Module的导入
//命名式 需要有大括号 import { add } from './add.js' // 默认导入 等同于 import { default as myAdd } from './add.js' import myAdd from './add.js' //混合导入(add是export default导出的,name是export导出的) //这里的add必须写在大括号前面,而不能顺序颠倒,否则会提示语法错误。 import add, {name} from './add.js' //全部导入 import * as add from './add.js'
ES6 Module的导出
//写法1 const add = function(a,b) {return a+b} export { add } //写法2 export { add: function (a,b) {return a+b} } //默认导出1 export default function(a,b) {return a+b} //默认导出2 export default { name: 'calculator', add: function(a, b) { return a + b; } }; //默认导出3 export default 'This is calculator.js'; // 默认导出4 export default class {...}