es6中export、export default、import的理解

时间:2021-05-23 16:30:59

export 与 import 的使用

export 与import是es6中新增模块功能最主要的两个命令。我们要知道在es6中,实现了模块功能,而且相当简单,意在取代commonjs和AMD规范。成为一种模块化的通用解决方案。

其设计思想为尽量的静态化,我们可以理解为在加载之前就知道自己所需要依赖的是哪个文件,而非在运行的时候才知道依赖谁。es6的那模块不是对象,通过export输出指令,通过import输入。就目前来说 不用一些编译器的话 最新版的浏览器是不识别import这个关键字的

在es6模块中是自动采用严格模式的。具体条例我们可以参考阮一峰老师写的es6入门中的moule模块

最简单的使用:

  我是在vue-cli脚手架中进行验证,因为其环境支持es6的语法

  首先在src下面新建一个export文件夹 里面新建两个js 分别为a.js,b.js

  es6中export、export default、import的理解

  a.js里面最简单的代码:

1
export var a = 'my name is xiaoming';

  然后一定要在hello模板中import该js,这里的路径是我自己配置的一些模板,新建的vue-cli中应该是hello模板

1
2
import {a} from '../../export/a.js';
console.log(a)

  from后面的路径要写对 然后不能写到app.vue或者main.js中因为是入口文件 里面import都是各种依赖包

其中{}是一定要有的

 export多个文件

1
2
var a='my name is xiaoming',b='my name is xiaohong';
export {a,b}

  然后import

1
2
import {a,b,} from '../../export/a.js';
console.log(a,b)

 如果不想暴露变量的名称:使用as可以重命名关键字

1
2
var a='my name is xiaoming',b='my name is xiaohong';
export {a as x, b as y}

export default 的用法

export 之后加上default意指默认接口的意思,在一个文件里面默认的只能有一个 其区别就是{} 在export中 引入需要用{}来盛放

1
2
var a='my name is xiaoming'
export default a;
1
import a from '../../export/a.js';

要是多个变量

1
2
var a='my name is xiaoming',b='this is a bird';
export default {<br>  a,b<br>};

在需要使用的js中

1
import anyoneword from '../../export/a.js'<br>console.log(anyoneword)//一个对象里面包含a,b两个变量。

是不是发现和vue组件很像。 

总结 其中export和export default最大的区别就是export不限变量数 可以一直写,而export default  只输出一次 而且 export出的变量想要使用必须使用{}来盛放,而export default 不需要 只要import任意一个名字来接收对象即可。 

export default可以跟在非匿名函数之前,也可以跟在匿名函数之前,同时也可以是一个对象之前。

import

import  '**' from 'vue'直接寻找的是依赖包里的文件

如果import '**' from './vue' 表示是同级文件下的js。