Javascript模块导入导出详解

下面是Javascript模块导入导出详解的完整攻略。

什么是Javascript模块

Javascript模块是Javascript中的一种代码组织方式，它将代码分割成更小的、更易于维护的模块，每个模块都有自己的作用域和功能。模块可以包含变量、函数、类等，通过模块的方式来导入和导出这些内容，可以实现模块化开发的效果。

模块的导出

Javascript模块的导出可以使用export关键字，可以使用如下的写法导出一个或多个内容：

//导出一个变量
export const name = "John";

//导出多个变量和函数
export const age = 20;
export function sayHello() {
  console.log("Hello!");
}

默认导出

使用export default可以导出一个默认的内容，每个模块只能有一个默认导出。在导入时，使用import语句导入默认内容，不需要使用花括号。

//导出默认内容
const data = {
  name: "John",
  age: 20
};
export default data;

//在另一个模块中导入默认内容
import data from "./data.js";
console.log(data.name); //输出 "John"

重命名导出

可以使用as关键字将导出的内容重命名，导出后的变量名与导出的变量名不一样。如果两个变量名相同，则需要使用重命名导入，在导入时使用新的变量名。

//重命名导出
const name = "John";
export { name as firstName };

//重命名导入
import { firstName as name } from "./name.js";
console.log(name); //输出 "John"

模块的导入

Javascript模块的导入可以使用import关键字，可以使用如下的写法导入一个或多个内容：

//导入一个变量
import { name } from "./name.js";

//导入多个变量和函数
import { name, age, sayHello } from "./user.js";

默认导入

在导入默认的内容时，需要将导入的变量名写在花括号外，并且名称可以任意命名。

//导入默认内容
import data from "./data.js";
console.log(data.name); //输出 "John"

命名导入

在导入变量时，需要将变量名写在花括号内，变量名必须与导出的变量名相同。

//导入变量和函数
import { name, age, sayHello } from "./user.js";
console.log(name); //输出 "John"
sayHello(); //输出 "Hello!"

示例

下面是两个示例，分别展示了如何使用export和import。

示例1：导出变量和函数

//导出变量和函数
export const name = "John";
export const age = 20;
export function sayHello() {
  console.log("Hello!");
}

//导入变量和函数
import { name, age, sayHello } from "./user.js";
console.log(name); //输出 "John"
console.log(age); //输出 20
sayHello(); //输出 "Hello!"

示例2：默认导出和命名导出

//默认导出
const data = {
  name: "John",
  age: 20
};
export default data;

//命名导出
export const job = "Developer";

//导入默认内容和命名导出
import userData, {job} from "./user.js";
console.log(userData.name); //输出 "John"
console.log(job); //输出 "Developer"

以上就是Javascript模块导入导出的详解攻略，希望能够对你有所帮助。