js系列四十九:模块导入导出

1 import

首先需要知道的一个常识是,每一个文件都是一个单独的模块,通过 import 指令.
可以在当前模块中引入其他模块.
观察项目 index.js 中的代码

import React from "react";
import ReactDOM from "react-dom";
import './index.css';
import App from "./App";

我们发现文件中大量使用 了 import 指令.如果把 index.js 看成是项目的入口文件,那么这些由 import 指令加载的模块,则都是项目所需要的模块.

以 import React from “react” 为例分析一下具体的使用规则.

• import 表示引入/加载一个模块
• react 可以理解为这个模块的名字, 他是 react 模块在创建时对外提供的所有接口组成的对象,因此在代码中可以使用他来访问 react 模块提供模块的接口,例如 React.Component.正因为此处是一个对象,因为可以使用解构的形式来直接获取某个特定的接口,代码如下:

import React, { Component } from "react";

大括号中接口的名字,必须与对外提供的接口名字相同,在某些必要的场合,当我们想要给接口换一个名字时,可以通过 as 来搞定.

import React, { Compoent as otherName } from "react";

1 from 表示模块来自哪里

import App from "./App.js";
// 通过都会省略
import App from "./App"

2 export

一个模块需要有向外提供接口等能力
可以在同一个模块中多次引用 export 命令对外提供多个接口.
在项目的 src 目录下创建一个 moudle01.js 文件.

export const name1 = "TOM";
export const name2 = "jake";

当在其他模块(index.js)引入该模块时, 如果仅仅只是引入其中的某个接口,那么可以这样做:

import { name1 } from "./moudle01";

但是如果需要引入该模块中所有的对外接口,那么一种方式是在大括号中将所有的名称都列出来, 另外一种方式就是使用通配符 与 as 配合使用.

import * as moudle01 from "./moudle01";

// 那么就有
name1 = moudle01.name1;
name2 = moudl101.name2;

还通过 export default 来对外提供接口, 这种情况下, 对外接口通常是一个对象.

const name1 = "TOM";
const name2 = "Jake";

export default {
	name1,
	name2
}

因此,在引入模块时代码的写法上直接需要做一个调整.例如,当模块中 有 export default 命令抛出的接口时,那么引入模块就可以直接这样写:

import moudle01 from "./moudle01";

此时的moudle01就是 export default 抛出的对象.
我们接着看一个新的例子,在 src下,

class Person {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
	getName() {
		return this.name;
	}
}
export default Person;

在其他模块中使用时.

import Person from "./moudle02";
const p1 = new Person("Tom", 20);
console.log(p1.getName());

需要注意的是,一个模块中只允许出现一次 export default 命令, 不过可以同时拥有多个 export default. 创建新模块 moudle03.js

export function fn() {
	console.log("this is a function named fn");
}

export function bar() {
	console.log("hello everybody");
}

class Person {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
	getName() {
		return this .name;
	}
}
export default Person;

当模块引入这个新模块时,可以这样写.

import Person,  { fn } from "./moudle03";
// 当然也可以全部利用,实践中通常不会这样写
import * as moudle03 from "./moudle03";

// moudle03 的 内容如下
moudle03 = {
	fn: fn,
	bar: bar,
	default: default
}