JavaScript 中的模块是可重复使用的代码段,可以从一个程序导出并导入到另一个程序中使用。
export导出模块
在创建 JavaScript
模块时,export
关键字可以用于从模块中导出函数、对象、或原始值,以便其他程序可以通过 import
语句使用它们。
语法:
使用 export
关键字一共有两种模块导出方式,分别是:
- 命名式导出(名称导出),每个模块可以有任意个。
- 默认导出(定义式导出),每个模块仅一个 。
使用命名式导出
模块可以通过 export
前缀关键词声明导出对象,导出对象可以是多个。这些导出对象用名称进行区分,称之为命名式导出。例如:
// 导出早前定义的函数
export { myFunc };
// 导出一个常量
export const a = Math.sqrt(10);
我们可以使用 *
和 from
关键字来实现的模块的继承,例如:
export * from 'base_module';
模块导出时,可以指定模块的导出成员。导出成员可以认为是类中的公有成员,而非导出成员可以认为是类中的私有成员,例如:
var name = '侠课岛';
var age = '3';
export {name, age};
有时候为了避免重名,在模块导出时我们可以使用 as
关键字对导出成员进行重命名,例如上面的导出可以像下面这样写,将模块 name
重命名为 n
:
export {name as n, age}
注意 export
在导出接口的时候,必须与模块内部的变量具有一一对应的关系。例如像下面这样,导出一个数值或者一个值为数字的变量没有什么意义,也不可能在 import
导入的时候有一个变量与之对应。模块中最好在末尾用一个 export
导出所有的接口,就像上面那些例子一样。
export 7;
var a = 10;
export a;
使用默认导出
默认导出也被称做定义式导出。命名式导出可以导出多个值,但在 import
引用时,也要使用相同的名称来引用相应的值。
而默认导出只导出一个单一值,这个输出可以是一个函数、类或其它类型的值,这样在模块 import
导入时也会更方便引用。
例如默认导出一个函数:
export default function() {};
或者默认导出一个类:
export default class(){};
默认导出可以理解为另一种形式的命名导出,默认导出可以认为是使用了 default
名称的命名导出。例如下面两种导出方式是一样的:
// 方式一
const name = 'xkd';
export default name;
// 方式二
export { name as default };
示例:
假设下面这个模块为 myModule.js
模块,我们可以使用下列代码来导出模块中的函数或对象等:
function add(a, b) {
return a + b;
}
const sum = Math.PI + Math.SQRT2;
var user = {
options:{
name:'xkd',
age:3
},
show:function(){
console.log('打印show()函数');
}
}
export { add, sum, user};
然后我们可以在另一个模块中(例如test.js),像下面这样引用:
import {add, sum, user} from './myModule.js';
user.options = {
name = 'summer',
age = 18
};
user.show(); // 调用show函数
console.log(add(2, 5)); // 7
使用默认导出的方式导出一个模块可以通过export default
:
export default function (a, b) {
return a + b;
}
在另一个模块中,我们可以像下面这样引用,相对名称导出来说使用更为简单:
import add from 'myModule';
console.log(add(3, 7)); // 10
import导入模块
import
关键字用于从已导出的模块、脚本中导入函数、对象或原始值。import
模块导入与 export
模块导出功能相对应,也存在两种模块导入方式:命名式导入和默认导入。
在使用时需要注意,import
语句必须放在文件的前面,且前面不允许有其他逻辑代码,这和其他所有编程语言的导入风格一致。
使用命名导入
我们可以通过指定名称将导入成员插入到当作用域中。可以导入单个成员或多个成员。
示例:
导入单个成员:
import {myMember} from "./myModule";
导入多个成员:
import {add, sum, user} from "./myModule";
注意,import
关键字后面花括号 {}
里面的变量要与 export
后面的变量一一对应
如果我们想要导入模块中的全部属性和方法,还可以通过 *
符号来导入。当导入模块全部导出内容时,就是将导出模块所有的导出绑定内容,插入到当前模块的作用域中。
示例:
import * as myModule from "./myModule";
使用默认导入
在模块导出时,可能使用的是默认导出,所以在导入时可以使用 import
指令导入这些默认值。
示例:
最简单的方式是直接导入默认值:
import defaultName from "./myModule";
由于默认导入时变量名是自行定义的,因此没有别名一说。如果希望同时导入某个模块的默认导出和基本导出,可以像下面的写:
import myDefault, {add, sum, user} from "./myModule";