JavaScript模块导入导出
模块的概念,是在JS用于服务器端编程的时候才会出现。
开发中基本不会将所有的业务逻辑代码放在一个JS文件中,特别是在使用前端框架,进行组件化开发中时,会复用相应的组件。这时,就会用到模块导入/导出的方法了。
CommonJs、AMD、CMD、ES6都是用于模块化定义中使用的规范,其为了规范化模块的引入与处理模块之间的依赖关系以及解决命名冲突问题,并使用模块化方案来使复杂系统分解为代码结构更合理,可维护性更高的可管理的模块。
这里重点学习了CommonJs与ES6。
CommonJs
CommonJS是NodeJs服务器端模块的规范,根据这个规范,每个文件就是一个模块,有自己的作用域。
在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。
CommonJS规范规定,每个模块内部,module变量代表当前模块。
这个变量是一个对象,它的exports属性是对外的接口。加载某个模块,其实是加载该模块exports属性。
CommonJS规范通过require导入,module.exports与exports进行导出。
导出 CommonJs模块导出
CommonJS定义的模块分为: 模块标识(module)、模块定义(exports) 、模块引用(require)
module是代表当前模块的变量对象。对外接口是该对象的exports属性。即导入一个文件模块时加载该模块的exports属性。
require导入其他文件的模块(module.exports对象)。可将导入对象重新命名。
const `模块引用名` = require('文件路径')
nodejs中会把一个文件当做一个模块,就是module。直接log一个module可看到文件模块的结构。
Module {
id: '.',
path: 'D:\\workspace\\workspace-vue\\vue-test\\base_test\\moduleTest',
exports: {},
parent: null,
filename: 'D:\\workspace\\workspace-vue\\vue-test\\base_test\\moduleTest\\export1.js',
loaded: false,
children: [],
paths: [
'D:\\workspace\\workspace-vue\\vue-test\\base_test\\moduleTest\\node_modules',
'D:\\workspace\\workspace-vue\\vue-test\\base_test\\node_modules',
'D:\\workspace\\workspace-vue\\vue-test\\node_modules',
'D:\\workspace\\workspace-vue\\node_modules',
'D:\\workspace\\node_modules',
'D:\\node_modules'
]
}
重点关注 exports: {}, 文件模块的对外接口即导出默认是空对象。
示例1,默认module.exports 导出是空对象
export1.js
a1 = {
a_name: 'zhang',
age: 10
}
importTest.js
a1 = require("./export1.js")
console.log(a1);
输出是
{
}
默认的module.exports 是空对象。
示例2,设置module.exports值。导出一个对象。
export2.js
a2 = {
a_name