导入模块

JavaScript 导入和导出模块免费看

export导出模块、import导入模块

2020-06-22侠课岛    基础入门       

前端/前端必修/JavaScript 基础知识梳理 10     0     1622

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"; 

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

10

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?