module.exports、exports和export、export default的区别,import和require的区别

100 篇文章 5 订阅

在vue及其他模块化开发中,经常会用到这些输出和引用的语句,那么,怎么在合适的时候用合适的语句呢,怎么区分它们呢?

一、理论区别
首先,module.exports和exports是属于 CommonJS 模块规范,export和export default是属于ES6语法。require属于 CommonJS 模块规范,import属于ES6语法。

一般情况:
module.exports和exports导出模块,用require引入模块。
export和export default导出模块,import导入模块。

1.module.exports、exports的区别
对于node执行的每一个js文件,都会自动创建一个module模块对象,如同一个封闭的函数一样,把一个函数封闭起来,外部怎样才能去引用呢?就是要这个模块主动暴露出来一个接口,即exports和module.exports,module对象会创建一个叫exports的属性,初始化的值是 {} module.exports = {};
exports只是module.exports的一个引用,当exports改变的时候,module.exports也会改变,但是当给module.export赋值的时候,exports不会改变。真正暴露出去的是module.exports对象!(即当给module.exports赋值后,exports所有的赋值均失效)
var func1 = function() {
   console.log("func1");
};
var func2 = function() {
   console.log("func2");
};
module.exports = {
   function1: func1
};
exports.function1 = func1;
exports.function2 = func2;
console.log(exports);
console.log(module.exports); //只有func1函数
1
2
3
4
5
6
7
8
9
10
11
12
13
exports只能点数据,不能等于;module.export能点能等于
exports只能使用.语法向外暴露内部变量 例 exports.xxx=xxx
module.exports既可以通过点语法,也可以直接赋值一个对象 例 module.exports.xxx=xxx
module.exports=xxx
2.export、export default的区别
export是es6引出的语法,用于导出模块中的变量,对象,函数,类。对应的导入关键字是import。

二者的区别有以下几点:

export default在一个模块中只能有一个,当然也可以没有。export在一个模块中可以有多个。
export default的对象、变量、函数、类,可以没有名字。export的必须有名字。
export default对应的import和export有所区别
3.import、require的区别
import是ES6语法,与export对应。但是很多浏览器还不支持,最终都会Es5 – 浏览器支持的CommonJS语法
require是CommonJS规范

require 是赋值过程并且是运行时才执行, import 是解构过程并且是编译时执行。require可以理解为一个全局方法。而import必须写在文件的顶部。

require的性能相对于import稍低,因为require是在运行时才引入模块并且还赋值给某个变量,而import只需要依据import中的接口在编译时引入指定模块所以性能稍高

import 语法比较灵活,可以导入模块中的所有导出内容或者部分导出内容

二、用法区别
1.四种暴露模块数据的方法
var func1 = function() {
  console.log("func1");
};
var func2 = function() {
   console.log("func2");
};
//1.module.exports
module.exports = {
   function1: func1
};
module.exports.function2 = func2;
//2.exports
exports.function1 = func1;
exports.function2 = func2;
//3.export
export const function1 = function() {
    console.log("func1");
};
export const function2 = function() {
    console.log("func2");
};
//4.export default { //类似 module.exports = {}
  function1: func1,
  function2: func2
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2.三种获取模块数据的方法
针对module.exports、exports、export三种暴露方式,以下任意一种方法都能获取到

//1.require
var functions = require("./fun.js"); //引入一个包含所有暴露属性的对象
console.log(functions)
functions.function1();
functions.function2();
//2.import
import {function1,function2} from './fun.js'; //单个引入暴露属性
function1()
function2()
//3.import
import * as functions from './fun'; //获取到一个包含所有暴露属性的对象
functions.function1();
functions.function2();
1
2
3
4
5
6
7
8
9
10
11
12
13
3.export default暴露和获取数据的方式,和module.exports的差别
export default暴露的是个default对象,一般用export default暴露,就用import获取

//暴露方式
var func1 = function() {
  console.log("func1");
};
var func2 = function() {
  console.log("func2");
};
export default { //类似 module.exports = {}
  function1: func1,
  function2: func2
}
//获取方式
import fun from './fun.js'
//import {function1} from './fun.js';//module.exports可以用,export default不能用
fun.function1();

var function1 = require("./fun.js");
function1.default.function1()

import * as functions from './fun';
functions.default.function1()
 

转自https://blog.csdn.net/qq_34664239/article/details/96474862

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值