module.exports与exports,export与export default之间的关系和区别

对这几个概念一直云里雾里,今天复习巩固一下。

概念:module.exports和exports是属于commonJs规范,export和export default是ES6模块规范。


module.exports

一、commonJs:

exports = module.exports

1、对于要导出的属性,可以简单直接挂到exports对象上

exports.name = function() {

    console.log('My name is Lemmy Kilmister');

};

2、对于类,为了直接使导出的内容作为类的构造器可以让调用者使用new操作符创建实例对象,应该把构造函数挂到module.exports对象上,不要和导出属性值混在一起

module.exports = function(name, age) {

    this.name = name;

    this.age = age;

    this.about = function() {

        console.log(this.name +' is '+ this.age +' years old');

    };

};

var A = require('./a'); var a = newA();

module.exports 初始值为一个空对象 {}

exports 是指向的 module.exports 的引用

require() 返回的是 module.exports 而不是 exports

也就是: exports = module.exports = {},  exports和module.exports都指向一个引用地址{},如果exports.name = 'xxx',那module.exports = {name:'xxx'},引用对象改变,两者又是同时指向一个对象,所以都改变了。

二、ES6规范

                1:每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取。 一个模块就是一个单例,或者说就是一个对象;

    2:每一个模块内声明的变量都是局部变量, 不会污染全局作用域;

    3:模块内部的变量或者函数可以通过export导出;

    4:一个模块可以导入别的模块

es6有多种写法:

(1)、export { xx, xx}与import {xx, xx} from '../../xxx.js'

export {}

(2)、在export接口的时候, 我们可以使用 XX as YY, 把导出的接口名字改了, 比如: fn1(实际export) as SayHi(别名) , 把这些接口名字改成不看文档就知道干什么的:在引用文件这样用 import  {SayHi} from '../../xx.js';

export 函数 as 别名

(3)、这种方式是直接在export的地方定义导出的函数,或者变量:export const foo = xxx; 引用 import { foo } from '../../xx'

export const xxx = xx

(4)、这种导出的方式不需要知道变量的名字, 相当于是匿名的, 直接把开发的接口给export;

  如果一个js模块文件就只有一个功能, 那么就可以使用export default导出;export default xxx; import xxxxx from '../../xxx.js'


ps: ES6的import和export提供相当多导入以及导出的语法;

import的时候可以使用通配符*导入外部的模块:

import * as obj  from"./lib";

console.log(obj);

你可能感兴趣的:(module.exports与exports,export与export default之间的关系和区别)