视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001 知道1 知道21 知道41 知道61 知道81 知道101 知道121 知道141 知道161 知道181 知道201 知道221 知道241 知道261 知道281
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
详解exportdefault与require和exports,export区别与联系
2020-11-27 20:19:11 责编:小采
文档

还在为module.exports、exports、export和export default,import和require区别与联系发愁吗,这一篇基本就够了!

一、首先搞清楚一个基本问题:

module.exports和exports是属于CommonJS模块规范!(不清楚commonjs?大神请这边逛一逛commonjs规范)

export和export default是属于ES6语法(不清楚ES6?大神请这边逛一逛ES6模块)!

同样import和require分别属于ES6和CommonJS!

二、知道属于哪一块的语法了还有一个明确点:

module.exports和exports、export和export default都是导出模块;

import和require则是导入模块。

所以现在就不要弄混了,module.exports导出对应require导入,export导出对应import导入。

喂!等等,怎么才说到module.exports导出对应require导入,export导出对应import导入,那还有exports和export default呢!?那我们继续。

三、module.exports和exports的区别与联系

讲到这里就不得不稍微提一下模块化:

Node应用由模块组成,采用CommonJS模块规范。

根据这个规范,每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。

CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。

var x = 5;var addX = function (value) { return value + x;};module.exports.x = x;module.exports.addX = addX;

上面代码通过module.exports输出变量x和函数addX

require方法用于加载模块。

var example = require('./example.js');console.log(example.x); // 5console.log(example.addX(1)); // 6

看了刚刚这段commonjs规范上面的介绍可以知道以下区别与联系:

其实exports变量是指向module.exports,加载模块实际是加载该模块的module.exports。这等同在每个模块头部,有一行这样的命令。

var exports = module.exports;

于是我们可以直接在 exports 对象上添加方法,表示对外输出的接口,如同在module.exports上添加一样。注意,不能直接将exports变量指向一个值,因为这样等于切断了exports与module.exports的联系。

三、export和export default的区别与联系

模块功能主要由:exportimport构成export导出模块的对外接口,import命令导入其他模块暴露的接口。

export其实和export default就是写法上面有点差别,一个是导出一个个单独接口,一个是默认导出一个整体接口。使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。这里就有一个简单写法不用去知道有哪些具体的暴露接口名,就用export default命令,为模块指定默认输出。

export可以这样写

// testA.jsvar f = 'Miel';var name = 'Jack';var data= 1988;

export {f, name, data};

使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。

// main.js
import {f, name, data} from './testA';

export default可以这样写

// export-default.js
export default function () {
 console.log('foo');}
// 或者写成function foo() {
 console.log('foo');}
export default foo;
// import-default.js
import customName from './export-default';customName(); // 'foo'

下面比较一下export default和export 输出。

可以看到第一组是使用,语句不需要使用大括号;第二组使用,对应的语句需要使用大括号,一个模块只能有一个默认输出,所以只能使用一次。

四、import和require的区别与联系

看了上面其实已经清楚了,import和require是分别属于ES6和CommonJS的两种导入模块的语法而已。

下载本文
显示全文
专题