搞懂ES6的import export

最新推荐文章于 2024-09-19 22:05:41 发布

转载最新推荐文章于 2024-09-19 22:05:41 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/imgss/p/10401389.html

文章标签：

#javascript #前端 #ViewUI

本文详细解析了JavaScript中import与export的多种使用方式，包括如何正确地导出和导入模块对象，以及解决命名冲突的方法。

引言

说来惭愧，这两个关键字几乎天天在写，但是自己写的模块export出去的对象，import居然拿不到，也是没谁了?。痛定思痛，还是写篇博客加深一下记忆。

import的方式

import有以下几种使用方式：


import a from './module.js'

import {a} from './module.js'

import deflt, {a} from './module.js'

import * as a from './module.js'

export的几种方式

export const a = 1 //export后面是一个表达式

export function b(){} //export后面是一个函数声明语句

export default {c: 1} //export default

export default 后面不能跟赋值表达式

import到底import了谁

其实就是个连线题。一个模块export的对象有两种，一种是通过export default导出的，另一种是通过export导出的。通过export default导出的可以用以下方式接收：


import defaultObj from 'module'

通过export导出的对象有以下两种接收方式：

// 导出
export const a = 1;


// 导入时

// 方式一
import * as md from 'module'

// md 拿到了所有用export方式导出的对象，这些对象都作为md的属性

md.a // 1

// 方式2，直接对*解构
import {a} from 'module'

搞两年前端了，这还没搞清楚，有点说不过去了。。

使用 as 重命名

有时候，模块里的变量名和本地的变量名可能会出现命名冲突，这时可以使用 as 关键字起个别名。可以给默认导出的default变量，导出的某一个模块变量，或者给*这个命名空间直接命名

import * as name from "module-name";
import defaultExport, * as name from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";