一: export和import的一般用法
1:export变量
// ./module/example.js
export var firstName = 'roger';
export const lastName = 'waters';
export let dob = 1944;
// index.js
import {firstName, lastName, dob} from './module/example.js';
2:export要领
// ./module/example.js
//定义要领的时刻,就能够export
export function sum(a, b) {
return a + b;
}
function multiply(a, b) {
return a * b;
}
//也能够先定义,再export
export { multiply };
在别的文件内里import上面2个要领,是一样的
//./index.js
import {sum, multiply} from './module/example.js';
3:export重命名
有时刻你或许不想用一个变量,要领,类的底本的名字,而是想换一个别的名字。那末你能够运用 as
,而且在export和import的时刻都能够,比方:
// ./module/example.js
function sum(a, b) {
return a + b;
}
export {sum as add};
//./index.js
import {add} from './module/example.js';
4: import重命名
在第三点内里,我们看到了能够在export的时刻重命名变量。一样的结果,也能够在import的时刻做,依旧是用as:
// ./module/example.js
function sum(a, b) {
return a + b;
}
export {sum};
//./index.js
import {sum as add} from './module/example.js';
//此时在index.js内里能够被运用的要领是add(),而不是sum()
5:export default
我们能够给一个js module制订默许值,也就是这里的default。导出一个default和前面我们讲到的导出一个变量一样也是有三种体式格局:
1. 在定义的时刻export
//./module/example.js
export default function(a, b) {
return a + b;
}
//./index.js
import sum from './module/example.js';
export的能够是一个匿名函数,在导入的时刻,用恣意合理的名字代表默许导出,然则注重与非default变量的区分在于,这里没有花括号({})
2. 先定义再export
//./module/example.js
function sum(a, b) {
return a + b;
}
export default sum;
//./index.js
import sum from './module/example.js';
在import的时刻,依旧能够是恣意的合理的变量名,不肯定得是sum。
3. 运用 as
//./module/example.js
function sum(a, b) {
return a + b;
}
export {sum as default}
//./index.js
import sum from './module/example.js';
在import的时刻,依旧能够是恣意的合理的变量名,不肯定得是sum。
6:export default和其他变量一同
一个module能够export default的同时export其他变量,语法与只export个中一样没有区分;只是在import的时刻,default肯定要在非default前:
//./module/example.js
export var firstName = 'roger';
export const lastName = 'waters';
export let dob = 1944;
function sum(a, b) {
return a + b;
}
export {sum as default}
// ./index.js
//语法准确
import sum, {firstName, lastName, dob} from './module/example.js';
//error: 语法毛病
import {firstName, lastName, dob}, sum from './module/example.js';
7: import *
当我们想把一个module一切export的东西都一次性import的时刻,就能够运用 import * as
// ./module/example.js
export var firstName = 'roger';
export const lastName = 'waters';
export let dob = 1944;
function sum(a, b) {
return a + b;
}
export {sum as default}
//./index.js
import * as example from './module/example.js';
console.log(example.firstName);
console.log(example.lastName);
console.log(example.dob);
example.default(1, 2);
这里特别注重的是,这里的example.default就是我们export的default变量。
8:export import
我们能够把从别的module导入的变量作为本module的导出。比方下面的例子./mian.js从./idnex.js导入变量firstName, 而firstName底本是./index.js从./module/example.js导入的:
//./module/example.js
export var firstName = 'roger';
export const lastName = 'waters';
export let dob = 1944;
function sum(a, b) {
return a + b;
}
export {sum as default}
//./index.js
import {firstName} from './module/example.js';
export {firstName};
//./main.js
import {firstName} from './index.js'
在./index.js文件里的2行代码等同于下面的一行:
export {firstName} from './module/example';
这个时刻也能够运用 as:
export {firstName as nickName} from './module/example';
也能够运用 *
export * from './module/example';
export *的时刻,是不包括default的。假如我们想要包括default,得零丁导入和导出default:
//./module/example.js
export var firstName = 'roger';
export const lastName = 'waters';
export let dob = 1944;
function sum(a, b) {
return a + b;
}
export {sum as default}
//./index.js
export * from './module/example';
import sum from './module/example';
export {sum};
//./main.js
import {firstName, lastName, dob} from './index.js'
import {sum} from './index'
二:export和import的注重点能够的毛病
1:在没有default的情况下,不能export匿名函数
前面我们讲到能够在定义一个函数的时刻就export,然则这个函数不能是匿名函数,除非这个函数作为default导出。
2:export和import都只能用在module的最高层scope
不能在if..else,要领里,或许任何需要在runtime的时刻才肯定下来的情况下,运用export和import。