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