js export和export default 导出的区别

Posted BBinChina

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js export和export default 导出的区别相关的知识,希望对你有一定的参考价值。

实际开发中,经常会将js逻辑封装成独立的js文件,而采用export导出需要被使用的变量或函数。

而在调用时,通过import来导入我们封装的逻辑内容,即import 呼应 export。

js提供了 export 和 export default 两个关键字。

命名导出

export也叫named export(命名导出),它允许一个文件导出多个特性

// 导出单个特性

export const name1, name2, …, nameN;

export const name1 = …, name2 = …, …, nameN;

export function FunctionName(){…}

export class ClassName {…}

// 导出列表

export { name1, name2, …, nameN };

// 重命名导出

export { variable1 as name1, variable2 as name2, …, nameN };

// 解构导出并重命名(将myObject中的name2重命名为bar后,进行导出)

export const { name1, name2: bar } = myObject;

需要注意的是,使用命名导出的时候,导入的时候需要使用相同的名字

// 例如:

// 导出列表

import { name1, name2, …, nameN }

// 重命名导出

import { name1, name2, …, nameN }

// 解构导出并重命名

import { name1, bar }

默认导出

一个js模块只能有一个默认导出,因此在导入的时候可以随意命名。

// 导出时:

export default { name1, name2, …, nameN };

// 导入时:

import * from ‘./myModule’

import all from ‘./myModule’

// 使用时:

console.log(name1)

以上是关于js export和export default 导出的区别的主要内容,如果未能解决你的问题,请参考以下文章

vue中export和export default的使用

Node.js 和 ES6 中的 module.exports 与 export default

关于module.exports和export default两种不同方式暴露的文件的引用

关于module.exports和export default两种不同方式暴露的文件的引用

export、export default和import用法详解,这一篇就够了

export 和 export default 之间的区别和 import