es6环境中,export与import使用方法

es6环境下,一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。

初出茅庐 来个Demo(因为最近在学习Vue,所以请先构建好Vue项目)
在src目录下,新建common文件夹,新建profile.js,现在我们在profile.js里面加入以下代码

export var firstName = 'Michael';

export var lastName = 'Jackson';

export var year = 1958;

export const SuccMsgCode=0;
1
2
3
4
5
6
7
8
等价于

var firstName = 'Michael';

var lastName = 'Jackson';

var year = 1958;

const SuccMsgCode= 0;

export {firstName, lastName, year, SuccMsgCode};
1
2
3
4
5
6
7
8
9
es6会将,profile.js视为一个模块,所以如果希望外部能访问这三个变量,需要将其导出。但是应该优先考虑使用第二种写法。因为这样就可以在脚本尾部,一眼看清楚输出了哪些变量。

在src目录下的main.js文件中 中加入以下代码:

import {firstName, lastName, year, SuccMsgCode} from 'common/profile';

console.log('firstName\t' + firstName);

console.log('lastName\t' + lastName);

console.log('year\t' + year);

console.log('SuccMsgCode\t' + SuccMsgCode);
1
2
3
4
5
6
7
8
9
就会看到firstName,lastName,year, SuccMsgCode正常输出了,但是此种方法是作为变量导入导出的,所以名称必须一致。除非使用 as 命令指定新的名称,例如:

导入时指定别名

export {firstName, lastName, year, SuccMsgCode};

import {firstName, lastName, year, SuccMsgCode as SuccMsgCode1} from 'common/profile';

console.log('SuccMsgCode\t' + SuccMsgCode1);
1
2
3
4
5
我们看到SuccMsgCode1正常显示‘Hello World!’

或者,导出时指定别名

export {firstName, lastName, year, SuccMsgCode as SuccMsgCode2 };

import {firstName, lastName, year, SuccMsgCode2} from 'common/profile';

console.log('SuccMsgCode \t' + SuccMsgCode2);
1
2
3
4
5
我们看到SuccMsgCode 正常显示‘Hello World!’

还可以直接使用以下语法:

export { import1 as name1, import2 as name2, …, nameN } from …;
1
我们建议直接使用此种语法,方便又直观,一般不在import时做别名处理。

export 不仅能导出变量,还能导出函数和类
在profile.js中加入以下代码:

export function multiply (x, y) {
return x * y;
};
1
2
3
上面代码对外输出一个函数multiply。

在main.js 中加入以下代码:

import {multiply} from 'common/profile';

console.log('multiply\t' + multiply);
1
2
3
multiply函数被打印出来

如果将profile.js中的代码修改为:

export multiply = function (x, y) {
return x * y;
};
1
2
3
4
等价于

function multiply (x, y) {
return x * y;
};
export {multiply};
1
2
3
4
如果将export 修改为 export default 则之前的导入导出变量皆不能使用,因为export default只允许export出现一次,而且在使用导入时,不需要加{},代码如下

function multiply (x, y) {
return x * y;
};
export default {multiply};
import multiply from 'common/profile';
1
2
3
4
5
如果需要导出整个文件,可使用如下代码

export default {
data () {
return {
firstName: 'Michael'
};
},
methods: {
multiply (x, y) {
return x * y;
}
}
};
---------------------
作者:H5女王
来源:CSDN
原文:https://blog.csdn.net/H5_QueenStyle12/article/details/75428398
版权声明:本文为博主原创文章,转载请附上博文链接!

上一篇:multiply-strings


下一篇:python中numpy库内multiply()、dot()和 * 三种乘法运算的区别小计