js中的export、import、export default等导入导出全解

您所在的位置：网站首页 › 将文件夹里的文件名字全部导出 › js中的export、import、export default等导入导出全解

js中的export、import、export default等导入导出全解

2024-07-11 04:36| 来源: 网络整理| 查看: 265

前端因为规范不同，所以不同的环境会有不同的导入导出方法，因为经常弄混所以特地记一下方便以后查阅记忆，本笔记都是自己总结或查阅资料得出，如有错误请帮忙指出。

因为前端的导入导出主要分为commonjs和ES6modules两种标准，其中commonjs主要用于node环境，而ES6modules主要用于浏览器环境，但是ES6modules是兼容commonjs标准的，所以这就很容易让人弄混，本文也将从两个标准来进行讲解

一、commonJS

学过node的我相信对commonJS规范一定不陌生，在这里不多赘述其他仅讲解导入导出。commonJS的导入导出分别是require和module.exports。

1.require

require是一个全局性方法，它的作用就是用于加载模块用的，使用该方法后会有个返回值，所以需要定义一个变量来接受，如下所示：

const { ipcRenderer } = require("electron"); 2.module.exports

在commonJS规范中每个文件就是一个模块，每个模块内部，有一个变量module代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

let a = 123; let b = [1,2,3]; module.exports.a = a; module.exports.b = b;

在上面的例子中我就将a和b都挂载到了module.exports这个对象上，这两个变量将会随着module.exports这个对象一起导出。假设我上面的例子是文件demo.js文件中的语句

const demoExportObj = require('./demo.js'); console.log(demoExportObj.a); // 123 console.log(demoExportObj.b); // [1,2,3]

那么demoExportObj这个对象其实就是demo.js文件中的module.exports对象，因为a和b都挂载到了module.exports这个对象上，所以demoExportObj这个对象就可以拿到a和b的值。

3.exports

exports这玩意原本的目的是为了方便用户使用的，它的作用就是接受module.exports这个对象。其实相当于下面这段代码

const exports = module.exports;

反正我倒是没觉得有多方便，而且因为这个变量常常会和export弄混，某种意义来上说实属鸡肋，但是你用熟练了还是比较好用的。这里需要注意一点export本质上就是就是一个变量接受了module.exports这个对象，实际的导出值还是module.exports。所以下面这种写法是不被允许的，这个时候本来a被挂载到了exports上，而因为浅拷贝的关系这个时候a就相当于挂载到了module.exports上。而这个时候重新对module.exports赋值就会让实际导出的值为当前这个值，反倒是之前的exports因为指向问题而无法导出。

let a = 123; let b = [1,2,3]; exports.a = a; module.exports = b;

所以一定一定要注意这两个的关系，切记这两者的关系不要弄混。

二、ES6modules

ES6modules的导入导出依靠的是import和export,注意这里的是export而不是commonJS中的exports，注意区分。

1.export和export default

export可以导出一个变量也可以导出一个方法文件也是不在话下，不过export与module.exports之间是有很大的区别的，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。export有两种模块导出方式：命名式导出（名称导出）和默认导出（定义式导出），命名式导出每个模块可以多个，而默认导出每个模块仅一个。

命名式导出模块可以通过export前缀关键词声明导出对象，导出对象可以是多个。这些导出对象用名称进行区分，称之为命名式导出,同时导出时还可以使用as设置一个别名。例如以下例子所示： // 写法一 export const a = 1; // 写法二 const b = 2; export {b}; // 写法三 export let c = ()=>{}; // 写法四 let d = ()=>{}; export {d}; // 写法五 let e = ()=>{}; export {e as fun}; //变量在前，名称在后！！！默认导出默认导出使用的是export default,它表示的是默认导出，使用时不需要使用花括号来进行包裹或者说不需要使用比那里，在一个文件或模块中，export、import可以有多个，export default仅有一个。 // 可为匿名函数 export default () => {} // 也可非匿名 let b = function () { console.log(123); } export default b

上面的非匿名函数默认导出切记不能写成下面这种形式

export default let c = () => {}

这是因为默认导出不支持使用关键字来定义一个变量，但是可以使用function来定义一个函数。

2.import

import也是一个命令，它和require方法最大的区别就是：import命令在编译时就会将需要导入的文件或者变量函数等导进来，而require是在运行时加载的，有点类似于懒加载。之所以先讲导出再讲导入是因为import与export息息相关，export和export default导出的值import的接收方式是不一样的

命名式导出使用命令是导出，那么你必须使用导出时所对应好的变量名来接收否则报错，同时接收的值必须是在大括号内，因为只有这样才是解构，否则也会报错。例如： // 导出文件a.js export const a = 1; const b = 2; export {b}; export let c = ()=>{}; // 导入文件b.js import { a } from "./a.js"; import b from "./a.js"; //错误写法，运行时会提示没有使用export default导出 import { c as fun } from "./a.js"; //导出时也可以使用as定义别名 console.log(a, b); console.log(fun); 默认导出导入默认导出的值时，最大的特点就是不用添加大括号，同时定义的变量名也不用一一对应。 export default () => { } import a from "./a.js"; console.log(a); 3.import()

注意一下这里的import()是一个方法，它和import的区别就是import是静态加载import()是动态加载，import命令能够接受什么参数，import()函数就能接受什么参数。我想大家应该在vue的router里面用过或者看到过这样的写法：

{ path: "/Order", name: "Order", component: () => import("@/views/Order.vue"), }

这种就是利用了import()方法动态加载的特性完成了路由的懒加载。

4.* as xxx from

这种写法一般是为了将多个导出对象放在一个对象中方便使用，一般有一下几种用法

第一种 // a.js export function a(){ console.log(123) } export function b(){ console.log(456) } //b.js import * as fnc from './a.js' fnc .a() // 123 fnc .b() // 456 第二种 // a.js let a = 1; let b = 2; let c = 3; let d = 4; export { a, b, c, d } //b.js import * as info from "./a.js"; console.log(info.a); // 1 第三种 // a.js let a = 1; let b = 2; let c = 3; let d = 4; export default { a, b, c, d } //b.js import * as info from "./a.js"; console.log(info.default.a); // 1

到这里前端的导入导出就全部讲完了，因本人水平有限，如有遗漏或错误欢迎指出。若本篇文章对诸君略有价值我将不胜荣幸。

【本文地址】

js中的export、import、export default等导入导出全解

js中的export、import、export default等导入导出全解

今日新闻

推荐新闻