你真的搞懂ES6模块的导入导出规则了吗
前言
模块作为ES6规范的核心部分之一,在实际项目开发中经常会看到它的身影,那么我们是否真正了解它的相关规则呢,今天就带大家一起了解一下模块的导入导出规则
导入
ES6模块的导入(即import)大致分为:命名导入、命名空间导入、默认导入、空导入;那怎么知道用哪种方式来导入源模块呢?下面我们通过几个具体的场景看看
场景1:只想导入源模块的部分内容
假设a.js是以如下方式导出的
1 // a.js 2 export var num = 100 3 export var name = '王小明'
那么如果我们只需要a模块的num,就应该按下面的方式导入它
1 // b.js 2 import {num} from './a.js' 3 4 console.log(num) // 100
此处的模块导入利用了ES6的解构方式,相关知识大家如果感兴趣可以参考阮一峰老师的《变量的解构赋值》一章
场景2:不满意源模块所导出的变量或方法的名称,想要为它们另起名称
假设a.js中有一个名称如此晦涩的变量gddhauabsg
1 // a.js 2 export var gddhauabsg = 100
忍不住想要重命名这个变量的名称,但是又无权或不想修改源模块的话,那么不妨这么做
1 // b.js 2 // 如此,我们就可以在b.js中愉快的使用num了 3 import {gddhauabsg as num} from './a.js' 4 5 console.log(num) // 100
场景3:想要把源模块的所有导出都导入进来,但偏偏源模块不是以export default
方式导出的
假设a模块将每个变量都单独,且声明时立即导出
1 // a.js 2 export var num = 100 3 export var name = '王小明'
那么我们就要这样导入a的所有导出
1 // b.js 2 import * as moduleA from './a.js' 3 4 console.log(moduleA.num) // 100 5 console.log(moduleA.name) // '王小明'
解释一哈:*代表源模块(除去export default
)的所有导出的集合,该集合类似Object
类型,*就相当于{num: 100, name: '王小明'}
,所以在源模块没有使用export default
导出时,我们就可以使用上面的方式导入源模块的所有导出
场景4:源模块并没有对外暴露任何导出
a模块没有导出任何内容
1 // a.js 2 var arr = [1, 2, 3] 3 for (var i = 0;i < arr.length;i++) { 4 console.log(arr[i]) 5 }
那么b文件将a.js文件整个引入就好了
1 // b.js 2 // 此处会执行a.js的所有代码逻辑 3 import './a.js'
那么有些童鞋可能会有个疑问“这种导入方式的应用场景在哪?”,不知道大家是否听过'腻子脚本'这一概念,就是一些第三方脚本或工具,作用类似于补丁,用于兼容一些新特性或功能,在一般情况下,这些脚本或工具只需要自执行,并且通常都是在我们的业务代码之前引入
导出
ES6模块的导出方式大致有两种:命名导出、默认导出;对比模块的导入规则,导出要简单一些,下面我们还是通过场景来介绍
场景1:源模块怎样才能支持命名导入和命名空间导入?
1 // a.js 2 // 方式1:在源模块末尾集中导出(当导出较多时,推荐此方式,方便管理导出) 3 var num = 100 4 var name = '王小明' 5 var flag = true 6 7 export { 8 num, 9 name, 10 flag 11 } 12 13 // 方式2:声明时立即导出(当导出较少时,推荐此方式) 14 export var num = 100 15 export var name = '王小明' 16 export var flag = true
场景2:导出的内容前后名称需要不一致,那么我们可以尝试重命名
什么意思呢?如果源模块的开发者有下面这种想法时,就应该使用重命名导出:‘我想要提高代码的可读性且有较好的语义化,此时变量或方法的名称长度一定不会太短,类似getOrderInfoFromDatabaseByHttp这种命名,但又不想让使用我的模块的人觉得我的导出名称过长’,示例如下:
1 // a.js 2 // 名称真的好长 3 var getOrderInfoFromDatabaseByHttp = function () { 4 // ... 5 } 6 7 export { 8 // 如果没有重命名,机会导出下面这一大串 9 // getOrderInfoFromDatabaseByHttp 10 // 但如果使用了重命名,方法的名称就会变得很简洁,即getOrderInfo 11 getOrderInfoFromDatabaseByHttp as getOrderInfo 12 }
场景3:模块功能单一,并且只需要导出值,不需要具名
1 // version.js 2 export default 'v1.0.0' 3 4 // index.js 5 import version from './version.js'
上面的代码功能很简单,只是导出项目的版本号,所以我们应该使用默认导出,而没有必要像下面这样写:
1 // version.js 2 export var version = 'v1.0.0' 3 4 // index.js 5 import {version} from './version.js'
结语
以上就是ES6模块的一些导入导出场景的整理,内容不多,但却很实用,希望能够对大家有所帮助~
原文地址:https://kittyslave.github.io/2017/10/16/%E4%BD%A0%E7%9C%9F%E7%9A%84%E6%90%9E%E6%87%82ES6%E6%A8%A1%E5%9D%97%E7%9A%84%E5%AF%BC%E5%85%A5%E5%AF%BC%E5%87%BA%E8%A7%84%E5%88%99%E4%BA%86%E5%90%97/
转载于:https://www.cnblogs.com/sampapa/p/7773553.html
你真的搞懂ES6模块的导入导出规则了吗相关推荐
- ES6学习——一文搞懂ES6
ES6学习--一文搞懂ES6 es6介绍 ES全称EcmaScript,是脚本语言的规范,而平时经常编写的EcmaScript的一种实现,所以ES新特性其实就是指JavaScript的新特性. 为什么 ...
- inputstream重新赋值之前需要close吗_变量提升真的搞懂了吗?打脸的一道题
变量提升真的搞懂了吗?打脸的一道题 我们知道JS代码在执行之前,会做一系列的事情,其中就包括变量提升,原本以为把变量提升搞懂的我(因为这两天一直在研究变量提升,自我感觉已经很良好了,哈哈哈),拿到了一 ...
- 都2021年了,再不学ES6你就out了 —— 一文搞懂ES6
JS干货分享 -- 一文搞懂ES6 导语:ES6是什么?用来做什么? 1. let 与 const 2. 解构赋值 3. 模板字符串 4. ES6 函数(升级后更爽) 5. Class类 6. Map ...
- pycharm导入jieba包_3分钟带你搞懂Python模块、包的区别和使用
一.模块和包的定义 模块的定义:任何*.py 的文件都可以当作模块使用import 导入 包的定义:包含一个__init__.py和其他模块.其他子包的一个目录 实际项目中,所谓的包和模块分别代表什么 ...
- [源码解读]一文彻底搞懂Events模块
前言 为什么写这篇文章? 清楚的记得刚找node工作和面试官聊到了事件循环,然后面试官问事件是如何产生的?什么情况下产生事件... Events 在哪些场景应用到了? 之前封装了一个 RxJava 的 ...
- python 包和模块的区别_3分钟带你搞懂Python模块、包的区别和使用
一.模块和包的定义 模块的定义:任何*.py 的文件都可以当作模块使用import 导入 包的定义:包含一个__init__.py和其他模块.其他子包的一个目录 实际项目中,所谓的包和模块分别代表什么 ...
- 你真的搞懂了负数取模吗?
如果现在给你出下面这道面试题,你能答出来吗? -7 % 3 = ? 那这个呢? 7 % (-3) = ? 正整数的取模大家应该玩的很溜了,(什么,正数的都不会,那自己去谷歌吧,百度也行.) 对于负数呢 ...
- C/C++中的移位运算你真的搞懂了吗?一文看懂移位运算
移位运算,很多人都是知道,但是又没有完全懂.这是因为移位运算的规则还是稍微有点复杂.因为移位运算分有左移.右移,同时还得区分逻辑移位和算术移位,并且还需要考虑移位超出数据长度的情况. 1 概念区分 首 ...
- ES6学习笔记(四):教你轻松搞懂ES6的新增语法
文章目录 let const let.const.var的区别 解构赋值 数组解构 对象解构 箭头函数 剩余参数 总结 let ES6新增的用于声明变量的关键字 let声明的变量只在所处于的块级有效 ...
最新文章
- 《LeetCode力扣练习》第21题 合并两个有序链表 Java
- 处理本地能登陆mysql但navicat连接不上的问题
- etcd官方推荐的硬件配置
- 利用知名站点欺骗挂马
- WordPress 5.0禁用古滕堡编辑器的方法
- ‘sort’命令的14个有用的范例
- java高性能反射框架_终于有人把性能优化讲清楚了!阿里架构师推荐的Java性能权威指南可太强了...
- python xlsxwriter dict_Python玩转Excel神器xlsxwriter详解
- 金融业大数据应用场景
- wps页眉怎么设置不同页码_如何设置 页眉页脚和页码
- PBR 前言 颜色理论:色度、色域与色彩空间
- macos 获取root权限
- 软件构件技术期末复习
- 抖音种草品宣,抖音短视频种草是什么意思?
- 《美队3》没融入VR,罗素兄弟想在“妇联3”寻找机会
- chm editor 打包html,CHM Editor(反编译HTML帮助文件)
- 知乎问答:为什么现在又流行服务器端渲染html?
- Java图书管理系统,java课程实习
- 民工哥的十年故事续集:杭漂十年,今撤霸都!
- 技术不能抛开的飞鸽传书绿色版
热门文章
- 【Java从0到架构师】MyBatis - 多表查询_延迟加载
- ❤️20行Python代码❤️一键整理桌面、文件夹❤️世界都清净了❤️
- SQLSERVER查询数据库所有表名及行数
- 走进我的交易室06_交易
- mysql的设计模式_数据库设计中使用设计模式
- mysql未监控在3306_监控MySQL或Web服务是否正常
- vue修改代码同步页面_vue实现两个组件之间数据共享和修改操作
- php 二维数组根据键值合并二维数组_3分钟短文 | PHP 根据值移除数组元素,哪个方法最简单?...
- centos window系统安装django
- linux终端<Terminal>使用ping