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
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。