export、export default以及module.exports、exports之间的区别

export、export default属于ES6模块规范 引入方式import .. from '..';

module.exports、exports属于Commonjs规范 引入方式 const xx = require('..');

ES6模块规范导出的内容 用require的方式引入 也是可以获取到数据的 同理Commonjs写法 用import方式也是可以获取到数据的。

1.export写法

// router.js
export const routes = [
    {path: '/', name: 'Home', component: Home},
    { path: '/pdpData', name: 'PdpData', component: PdpData },
    { path: '/lddData', name: 'LddData', component: LddData }
]

export const filterArr = function (arr, data) {
    ...
    你要写的逻辑
}

export function expression () {
    ...
    你要写的逻辑
}

let name = 'lee';
let age = 24;
let sex = 1;
export {name, age, sex}

引入方式：

import {routes, filterArr, expression, name, age, sex} from './router.js' // 都引入
import {filterArr} from './router.js' // 只引入一个内容filterArr方法


// 或

const content = require('./router.js');
console.log(content.routes);
console.log(content.filterArr);
console.log(content.name); // lee

注意：这里在上一个页面 export输出的是什么变量 这个页面 就只能引入什么变量 例如 修改成import {data} from './router.js'是不可以的 router.js中没有data这个变量 所以读不到这个数据

如果想实现上面一行注意中的 用data代替routes 修改变量 则参考如下写法

import {routes as data} from './router.js'

如果想用一个变量值 承接router.js中的所有数据对象 写法

import * as myModule from './router'
console.log('myModule', myModule.name, myModule.age, myModule.sex, myModule.expression); // 获取router.js中的内容

2.export default （默认导出）

（1）默认导出单个方法或者变量

// module "my-module.js"

export default function cube(x) {
  return x * x * x;
}

引入方式：

import cube from './my-module.js';
console.log(cube(3)); // 27

（2）导出多条变量数据

let dataArr = [1, 2, 3];
let info = {
    name: 'lee',
    age: 24
}
export default {
    dataArr,
    info
}

引入方式：

import content from './module-info.js';
console.log(content.info); // {name: 'lee', age: 24}
console.log(content.dataArr); // [1, 2, 3]


// 或

const content = require('./module-info.js');
console.log(content.default.info); // {name: 'lee', age: 24}
console.log(content.default.dataArr); // [1, 2, 3]

export default导出的数据 用import导入 只能使用 import data from './module-info.js'方式 不可以使用import {info, dataArr} from './module-info.js'方式导入数据 这样获取到的是undefined

同理

export导出的数据 用import导入 只能使用import {info, dataArr} from './module-info.js'方式 不可以使用import data from './module-info.js'方式导入数据 这样获取到的也是undefined

 

3.module.exports和exports

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

exports和module.exports之间的关系就相当于 let exports = module.exports; exports是module.exports的引用 它们指向堆空间的同一个地址

console.log(module.exports === exports); // true

异同

我们优先应使用module.exports去导出一个模块的内容 上面我们看到 exports相当于module.exports的引用 所以exports的使用方法不可以直接赋值 直接赋值就会切断 exports与module.exports之间的联系 如下图所示 

首先打印module.exports === exports返回的是true 证明它们之间恒等 然后我们又给exports重新赋值 不管给它赋值什么类型的数据 都会使module.exports与exports之间不再恒等 所以我们使用exports的时候 只能使用语法来向外暴露内部变量

module.exports也是同理 赋值前它与exports恒等 赋值后 不恒等 改变了指针指向的堆地址

module.exports使用方法

// testModule.js
const addNum = function () {
    // 处理逻辑
}

const arrData = [1, 2, 3];

const objInfo = {userName: 'test'}

// 导出方法1
module.exports = {
    addNum,
    arrData,
    objInfo
}

// 导出方法2
module.exports.addNum = addNum;
module.exports.arrData = arrData;
module.exports.objInfo = objInfo;

exports使用方法

const addNum = function () {
    // 处理逻辑
}

const arrData = [1, 2, 3];

const objInfo = {userName: 'test'}

exports.addNum = addNum;
exports.arrData = arrData;
exports.objInfo = objInfo;

module.exports与exports的引入方法相同 如下

import data from './testModule.js'
或者
const data = require('./testModule.js');
// 通过data.addNum() data.arrData data.objInfo 调用

就记录到这里吧 有问题、争议以及不准确的地方可以评论区一起讨论学习