当前位置：首页 > news >正文

ECMAScript6中的模块：export导出、import导入

news 来源：原创 2024/9/22 1:21:10

1、模块概述

早期的 JavaScript 程序很小，通常被用来执行独立的脚本任务，在 Web 页面中需要的地方提供一定的交互。随着 Web 应用程序变得越来越复杂，有必要考虑提供一种将 JavaScript 程序拆分为可按需导入的单独模块的机制，这就是模块化编程。模块化编程就是将一个复杂的程序根据一定的规则封装成一个或多个文件，并组合在一起。使用这种方式，可以将代码分解到多个文件中，每个文件都称为一个模块。一个模块通常是一个类或者多个函数组成的方法库。

每个文件本身就是一个模块，在文件中定义的变量、函数和类对于该文件都是私有的，需要将它们显示导出。另外，一个模块导出的内容只是显示导入它们的模块中才可以使用。ECMAScript 6 为 JavaScript 提供了 export、import 关键字，用于导出和导入模块。

2、export 导出模块

为了获得模块的功能，首先需要把它们导出来。要从 ES6 模块中导出变量、函数或类，需要使用 export 语句。最简单的方法是将 export 语句放在想要导出的项前面。

【实例】创建一个模块 module.js，模块中定义一个变量、一个函数和一个类，并使用 export 语句进行导出。

//1、导出：变量
export var name = "张三";//2、导出：函数
export function sum(m, n) {return m + n;
}//3、导出：类
export class Person {constructor(name, position, year) {this.name = name;this.position = position;this.year = year;}show() {return "姓名：" + this.name + "\n职位：" + this.position + "\n工作年限：" + this.year;}
}

如果不想使用多个 export 关键字进行导出，可以先正常定义变量、函数和类，然后在模块末尾使用一个 export 语句声明想要导出的内容。这种语法要求在一对大括号中给出一个使用逗号分隔的标识符列表。

【实例】将上述代码进行修改，在模块末尾使用一个 export 语句进行导出。

//1、定义：变量
var name = "张三";//2、定义：函数
function sum(m, n){ return m + n;
}//3、定义：类
class Person{constructor(name, position, year) {this.name = name;this.position = position;this.year = year;}show(){return "姓名：" + this.name + "\n职位：" + this.position + "\n工作年限：" + this.year;}
}//使用 export 语句导出：变量、函数、类
export {name, sum, Person};

在使用 export 语句进行导出时，可以使用 as 关键字对导出的标识符进行重命名。

【实例】将上述代码进行修改，使用 as 关键字对导出的标识符进行重命名。

//使用 export 语句导出时，并使用 as 关键字对导出的标识符进行重命名
export {name as n, sum as s, Person as p};

在有些情况下，如果只想导出模块中的一个函数或类，可以使用默认导出的形式，即 export default 语句。

【实例】使用 export default 语句，只导出模块中的 sum() 函数。

// 方式一：使用 export default 语句，只导出模块中的 sum() 函数
export default sum;

使用 export 语句只能导出已经命名的变量、函数或类。而使用 export default 语句的默认导出则可以导出任意表达式，包括匿名函数。

【实例】使用 export default 语句和匿名函数的形式，导出匿名函数。

// 方式二：使用 export default 语句和匿名函数的形式，导出匿名函数
export default function(m, n){ return m + n;
}

说明：

一个模块只能有一个默认导出，因此 export default 在一个模块中只能使用一次。

3、import 导入模块

如果想在模块外面使用模块中的一些功能，就需要进行导入。导入其他模块导出的内容需要使用 import 语句来实现。

【实例】使用 import 语句入到 module.js 模块导出的内容。

import {name, sum, Person} from './module.js';

在使用 import 语句进行导入时，也可以使用 as 关键字对导入的标识符进行重命名。

import {name as n, sum as s, Person as p} from './module.js';

可以使用通配符“*”将每一个模块功能导入到一个模块功能对象上。

import * as obj from './module.js';

如果导入默认导出的内容，可以使用 default 关键字并提供别名进行导入，也可以直接使用自定义的标识符作为默认导出的别名进行导入。

import {default as exam} from './module.js';

或者：

import exam from './module.js';

4、基于 Vue3.0 综合实例

在企业项目中，通常会使用 Vue 作为前端开发框架。以下是一个基于 Vue3.0 的综合实例，实现员工模块的开发。

（1）创建 staff.js 文件，实现员工API模块功能，并导出方法。

import request from '@/utils/request.js';//获取员工信息
export function getStaffInfoById(staffId) {return request({url: `/staff/getStaffInfoById/${staffId}`,method: 'GET'});
}//新增或保存员工信息
export function saveOrUpdateStaff(staffInfo) {return request({url: '/staff/saveOrUpdateStaff',method: 'POST',data: staffInfo});
}//删除员工信息
export function deleteStaff(staffId) {return request({url: `/staff/deleteStaff/${staffId}`,method: 'POST'});
}

（2）创建 StaffInfo.Vue 文件，编写一个单文件组件，实现获取员工信息。

<template><!-- 忽略：组件的HTML内容 -->
</template><script>
// 导入模块：将 staff.js 中的所需要的函数导入到该组件中
import { getStaffInfoById, saveOrUpdateStaff, deleteStaff } from '@/api/staff.js';
import { getDepartmentList } from '@/api/department.js';
import { getPositionList } from '@/api/position.js';export default {data: function () {return {staffId: 0,staffInfo: {},}},created() {this.staffId = this.$route.query.staffId || 0; //获取路由中传递的员工IDthis.getStaffInfo(this.staffId); //页面绑定员工信息},methods: {//页面绑定员工信息bindStaffInfo: function (staffId) {//调用导入的函数getStaffInfoById(staffId).then(function (data) {this.staffInfo = data;}.bind(this));},//删除员工信息deleteStaff: function (staffId) {if (!confirm("确定删除该记录吗？")) {return;}//调用导入的函数deleteStaff(staffId).then(function (result) {if (result) {alert("删除成功");}}.bind(this));}}
}
</script>