ES6模块之export和import详解

Stella981
• 阅读 853

文章转载自:https://blog.csdn.net/qq\_28506819/article/details/75733601

ES6中的模块即使一个包含JS代码的文件,在这个模块中所有的变量都是对其他模块不可见的,除非我们导出它。ES6的模块系统大致分为导出(export)和导入(import)两个模块。

1、模块导出(export)

你可以 导出所有的最外层 函数以及 varletconst声明的变量。

ES6模块只支持静态导入和导出,你只可以在模块的最外层作用域使用 importexport,不可在条件语句中使用,也不能在函数作用域中使用 import。所有导出的标识符一定要在源代码中明确地导出它们的名称,你不能通过编写代码遍历一个数组然后用数据驱动的方式导出一堆名称。如下导出是错误的。

[javascript]  view plain copy

function squre() {};  
if(true) {  
    export {squre};  
}  

ES6的导出分为名字导出和默认导出

1、名字导出(name export)

名字导出可以在模块中导出多个声明。

[javascript]  view plain copy

//------ lib.js ------  
export const sqrt = Math.sqrt;  
export function square(x) {  
    return x * x;  
}  
export function add (x, y) {  
    return x + y;  
}  
  
//------ main.js ------  
import { square, add } from 'lib';  
console.log(square(10)); //100  
console.log(add(2,4));  //6  

这样导入的变量名必须和导出的名称一致。以上对于每一个要导出的变量都加了export,我们也可以直接导出一个列表,例如上面的lib.js可以改写成:

[javascript]  view plain copy

 

//------ lib.js ------  
const sqrt = Math.sqrt;  
function square(x) {  
    return x * x;  
}  
function add (x, y) {  
    return x + y;  
}  
export {sqrt, square, add}  

export列表可以在模块文件最外层作用域的每一处声明,不一定非要把它放在模块文件的末尾。

也可以直接导入整个模块,此时的main.js模块将变成这样。

[javascript]  view plain copy

 

//------ main.js ------  
import * as lib from 'lib';  
console.log(lib.square(10)); //100  
console.log(lib.add(2,4));  //6 

2、默认导出(default export)

一个模块只能有一个默认导出,对于默认导出,导入的名称可以和导出的名称不一致,这对于导出匿名函数或类非常有用。

[javascript]  view plain copy

//------ myFunc.js ------  
export default function() {...};  
  
//------ main.js ------  
import myFunc from 'myFunc';  
myFunc();  

注意这里默认导出不需要用{}。

当然也可以使用混合的导出。

[javascript]  view plain copy

//------ lib.js ------  
export default function() {...};  
export function each() {...};  
  
//------ main.js ------  
import _,{ each } from 'lib';

2、重命名export和import

为了解决导出命名冲突的问题,ES6为你提供了重命名的方法解决这个问题,当你在导入名称时可以这样做:

[javascript]  view plain copy

// 这两个模块都会导出以`flip`命名的东西。  
// 要同时导入两者,我们至少要将其中一个的名称改掉。  
import {flip as flipOmelet} from "eggs.js";  
import {flip as flipHouse} from "real-estate.js";

同样,当你在导出的时候也可以重命名。你可能会想用两个不同的名称导出相同的值,这样的情况偶尔也会遇到:

[javascript]  view plain copy

function v1() { ... }  
function v2() { ... }  
  
export {  
  v1 as streamV1,  
  v2 as streamV2,  
  v2 as streamLatestVersion  
};  

对于默认导出,只是导出了一个特殊的名字叫 default,你也可以就直接用他的名字,把它当做命名导出来用,下面两种写法是等价的:

[javascript]  view plain copy

 

import { default as foo } from 'lib';  
import foo from 'lib';

也可以把名称as为default来默认导出:

[javascript]  view plain copy

//------ module1.js ------  
export default 123;  
  
//------ module2.js ------  
const D = 123;  
export { D as default };

3、作为中转模块导出

有时候为了避免上层模块导入太多的模块,我们可能使用底层模块作为中转,直接导出另一个模块的内容如下:

[javascript]  view plain copy

//------ myFunc.js ------  
export default function() {...};  
  
//------ lib.js ------  
export * from 'myFunc';  
export function each() {...};  
  
//------ main.js ------  
import myFunc,{ each } from 'lib';

这样main.js只需导入lib模块即可,虽然myFunc模块从lib模块导出,但是lib却不能使用myFunc模块的内容

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
待兔 待兔
2年前
export ,export default 和 import 区别 以及用法
首先要知道export,import,exportdefault是什么ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口import用于在一个模块中加载另一个含有export接口的模块。也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过impor
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
ES6 模块化(Module)export和import详解
ES6模块化(Module)export和import详解ES6在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。ES6模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS和AMD模块,都只能
Stella981 Stella981
2年前
Python之time模块的时间戳、时间字符串格式化与转换
Python处理时间和时间戳的内置模块就有time,和datetime两个,本文先说time模块。关于时间戳的几个概念时间戳,根据1970年1月1日00:00:00开始按秒计算的偏移量。时间元组(struct_time),包含9个元素。 time.struct_time(tm_y
Wesley13 Wesley13
2年前
ES6模块化与常用功能
目前开发环境已经普及使用,如vue,react等,但浏览器环境却支持不好,所以需要开发环境编译,下面介绍下开发环境的使用和常用语法:一,ES6模块化1,模块化的基本语法ES6的模块自动采用严格模式,不管你有没有在模块头部加上"usestrict";。模块功能主要由两个命令构成:export和import(注意有无defaul
Wesley13 Wesley13
2年前
ES6特性
7.import与export的复合写法//如果在一个模块中,先输入后输出同一个模块,import语句和export语句可以写一起export{varName,varAge}from'./xx.js'//等同于import{varName,varAge}from'./xx.js'
Stella981 Stella981
2年前
Noark入门之异步事件
引入异步事件主要是为了各模块的解耦,每当完成一个动作时,向系统发布一个事件,由关心的模块自己监听处理,可选择同步处理,异步处理,延迟处理。何时发布事件,当其他模块关心此动作时<br比如获得道具时,任务系统模块要判定完成进度,BI模块需要上报等等都可以监听此事件,已达模块解耦0x00事件源一个实现xyz.noark.core.event
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这