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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值