export和export default

2022-08-04 04:00:10 阅读：124 来源： 互联网

概述

在ES6之前，社区制定了一些模块加载方案，最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。ES6在语言标准的层面上，实现了模块功能，而且实现的相当简单，完全可以取代CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

在ES6中，export和export default都可以用于导出常量、文件、函数、模块等。
export命令

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其它模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法直接获取。如果外部要获取模块内部的某个变量，就必须使用export关键字输出该变量。

例如：
```
// a.js
export var str = '内容'
export var number = 0
export function message(sth){
	return sth
}
```
或
```
//a.js
var str = '内容'
var number = 0
function message(sth){
    return sth
}
export {str,number,message}
```
通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。
```
//a.js
var str = '内容'
var number = 0
function message(sth){
    return sth
}
export {
	str as newname1,
    number as newname2,
    message as newname3
}
```
上面代码使用as关键字，重命名了变量str、number、message的对外接口。

export default命令

export default命令用于指定模块的默认输出。一个模块只能有一个默认输出，因此，export default命令只能使用一次。所以，import命令后面不用加大括号。

一个文件内有且只能有一个export default

//a.js
const str = '内容'
export default str

//在另一个文件中的导入方式
//b.js
import strFile from 'a'
//导入的时候没有{}
//本质上，a.js文件的export default输出一个叫做default的变量，然后系统允许你引入的时候为它去任意名字

import命令

使用export命令定义了模块的对外接口后，其它JS文件就可以通过import命令加载这个模块。
```
//b.js
import {str,number,message} fron './a'
//也可以分开写两次，导入的时候带花括号，将每个变量函数名写清楚
```
上面代码的import命令，用于加载a.js文件，引入后就可以在b.js中使用a.js文件中的变量、函数、类等。import命令接受一对大括号，里面指定要从其它模块导入的变量名。大括号里面的变量名，必须与被导入模块对外接口的名称相同。

如果想为输入的变量重新去一个名字，import命令要使用as关键字，将输入的变量重命名。
```
//b.js
import {
    str as newname1,
    number as newname2,
    message as newname3
} from './a'
```
import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉JavaScript引擎该模块的位置。
```
//import引入一个依赖包，不需要相对路径
import axios from 'axios'
//import引入一个自己写的js文件，是需要相对路径的
import AppService from './appService'
```
简述区别
- export与export default均可用于导出常量、函数、文件、模块等
- 在一个文件或模块中，export、import可以有多个，export default有且仅有一个
- 通过export方式导出，在导入时要加{}，export default则不需要，并可以起任意名称
- 输出单个值，使用export default
- 输出多个值，使用export
- export default与普通的export不要同时使用

标签：模块,default,js,export,str,import
来源： https://www.cnblogs.com/shallow-dreamer/p/16549325.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

export和export default