export和import

355 阅读1分钟
export和import是用来导出和导入模块的

通常一个js文件就是一个模块,每个模块有独立的作用域,也就是a.js文件定义的变量b.js文件是无法访问获取的,要想访问获取到就需要先导出。

常量、函数、数组、对象等类型均可以导出:

// orange.js
var orange1 = '01';
var orange2 = { hello: '02' };
var orange3 = [ '03' ];
var orange4 = function () {
    return '04'
}
export { 
    orange1, 
    orange2, 
    orange3, 
    orange4 
};

也可以这样导出:

// orange.js
export var orange1 = '01';
export var orange2 = { hello: '02' };
export var orange3 = [ '03' ];
export function orange4() { 
    return '04';
};

模块导出后,则在有需要文件中使用import导入,就可以在该文件中使用上述模块的变量了。

// index.js
import { orange1, orange2, orange3, orange4 } from './orange.js';
console.log(orange1); // 01

如果觉得不方便,也可以使用export default来导出默认的模块,可以自定义名称。

// orange.js
export default { 
    orange1: '01';
    orange2: { hello: '02' };
    orange3: [ '03' ];
    orange4: function () {
        return '04'
    }
};
// index.js
import orange from './orange.js';
console.log(orange.orange1); // 01