React系列(五):NodeJS模块化操作

历史上,JavaScript一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如Ruby的require、Python的import,甚至就连CSS都有@import, 但是JavaScript任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。

es6中新增了两个命令export和importexport命令用于规定es6模块的对外接口,import 命令用于输入其他es6模块化提供的功能。 

一个es6模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个 变量, 就必须使用export关键字输出该变量。下面是一个JS文件,里面使用export命令输出变量。

编写单独的模块(a.js文件)

外部(main.js)使用此模块,需要先执行导入 import{变量名1[,变量名2,变量名3,…]} from ‘文件’

export 不只是能导出普通变量,还可以导出其他的数据类型(a.js)

外部使用此模块中导出的函数、对象(main.js)

也可以一次导入所有变量 import * as 标识符 from ‘文件’(main.js)

默认导出 export default (exportDefault .js)

export default指定默认导出,这在模块只有一个变量输出时非常常用;引用该模块时,用户不需要知道要引入的变量名称是什么,而是在引用位置给变量(函数、对象、类)指定名称

外部引用模块时可以为模块变量命名(main.js)

export default命令让加载模块变得更容易理解,如下代码:

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 模块通常是指编程语言所提供的代码组织机制,利用此机制可将程序拆解为独立且通用的代码单元。所谓模块化主要是解决代码分...
    MapleLeafFall阅读 1,207评论 0 0
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 3,678评论 2 27
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,288评论 19 139
  • ES6模块不是对象,而是export命令显示指定输出的代码,输入时也采用静态命令的形式。 上面是从fs模块里加载3...
    竹天亮阅读 7,667评论 2 17
  • 花色漫眼欲流朱 缠缚枯树与天逐 只见新藤立斜阳 不闻脚下老泪哭
    thornmia阅读 243评论 0 0