export，export default，exports - 导入导出方法总结
为什么使用模块化？
在JavaScript中，模块化是一种管理代码的方法，它可以将代码分割为不同的模块或文件，并通过特定的方式来管理它们之间的依赖关系和导出关系，使得代码的结构更加清晰、易于维护和扩展。
模块化类别：
-
IIFE 模式：使用立即执行函数表达式（IIFE）来创建私有作用域，从而避免命名冲突。这种方式也称为模块模式，它使用一个匿名函数来封装模块，并返回一个公共接口。
-
CommonJS 模块化：CommonJS 是一个 JavaScript 模块化的标准，它使用 require() 导入模块，exports 导出模块，使得模块可以在不同的环境中使用。Node.js 采用了 CommonJS 标准来实现模块化。
-
AMD 模块化：AMD (Asynchronous Module Definition) 是另一个 JavaScript 模块化的标准，它支持异步加载模块，使用 define() 来定义模块，使用 require() 来加载模块。
-
ES6 模块化：ES6 引入了原生的模块化系统，可以使用 import 和 export 语句导入和导出模块。它提供了静态分析功能，可以在编译时进行优化，使得模块加载更快。
1.export.default的使用方法
特点：
- export.default向外暴露的成员，可以使用任意变量来接收
- 在一个模块中，export default只允许向外暴露一次
- 在一个模块中，可以同时使用export default 和export 向外暴露成员
//export default-默认导出
const m = 100;
export default m;
//导入
import m from './file'; //可以改变变量名，如：import a from './file';
//export defult const m = 100;// 不可以这样写
//导出
let a = 100;
let b = {};
let c = ()=>{}
export default {
a,b,c
}
//导入
import module from './file';
console.log( module.a, module.b, module.c );
2.export的使用用法
特点：
- 注意：在一个模块中，export 可以向外暴露多个
- 注意；使用export导出的成员，必须严格按照导出时候的名称，不能自定义，来使用 {} 按需接收
- 注意；使用export导出的成员，如果要换个名称，可以使用 as 起别名
'use strict';
//导出变量
export const a = '100';
//导出方法
export const dogSay = function(){
console.log('wang wang');
}
//导出函数
export function catSay(){
console.log('miao miao');
}
//导入- export导出的是多个，需要解构取值
import { a as b, dogSay, catSay } from './file';
//或 import * as utils from './file'
//导出
const str = "export的内容";
const year = 2019;
function message(sth) {
return sth;
}
export { str, year, message }
//导入
import {str, year, message} from './file';
//或：import * as utils from './file';
3.export和export.default混合导出
//导出
const author = "不要秃头啊";
export const age = "18";
export default author;
//导入
import author, { age } from "./name";
console.log(author, "author");
console.log(age, "age");
4.module.exports的使用方法
特点：
- exports 是 module.exports 的一个引用，即 exports = module.exports
- module.exports 和 exports 不要同时使用，指向会有问题
//导出
module.exports = { checkIDCIP };
//导入
const { checkIDCIP } = require('./utils'); //或者 import { checkIDCIP } from './utils';
exports的使用
// person.js --- 导出
var name = 'Tom';
var age = 18;
exports.getName = function() {
return name;
}
exports.getAge = function() {
return age;
}
// main.js --- 导入
var person = require('./person'); //或 import person from './person'
console.log(person.getName()); // 'Tom'
console.log(person.getAge()); // 18
5.CommonJS和ES6 Module的区别总结
一、区别：
-
CommonJS 模块是运行时加载，ES6 模块是在静态编译期间就确定模块的依赖。
-
两者的模块导入导出语法不同，CommonJS是module.exports，exports导出，require导入；ES6则是export导出，import导入。
-
ES6在编译期间会将所有import提升到顶部，CommonJS不会提升require。
-
CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段。
-
CommonJS导出的是一个值拷贝，会对加载结果进行缓存，一旦内部再修改这个值，则不会同步到外部。ES6 Module是对模块的引⽤,即ES6 Module只存只读，不能改变其值，具体点就是指针指向不能变，类似const 。
-
import的接⼝是read-only（只读状态），不能修改其变量值。 即不能修改其变量的指针指向，但可以改变变量内部指针指向。可以对commonJS对重新赋值（改变指针指向），但是对ES6 Module赋值会编译报错。
-
两者的循环导入的实现原理不同，CommonJS是当模块遇到循环加载时，返回的是当前已经执行的部分的值，而不是代码全部执行后的值，两者可能会有差异。所以，输入变量的时候，必须非常小心。ES6 模块是动态引用，如果使用import从一个模块加载变量（即import foo from 'foo'），那些变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。
-
CommonJS中顶层的this指向这个模块本身，而ES6中顶层this指向undefined。
//es6中
var fun = () => {
mistypedVaraible = 17; //报错，mistypedVaraible is not defined
};
export default fun;
//commonJS中，默认不使用严格模式，可以自定义是否使用严格模式
exports.fun = () => {
mistypedVaraible = 17; //没有调用严格模式，不会报错
};
二、共同点：
1.CommonJS和ES6 Module都可以对引⼊的对象进⾏赋值，即对对象内部属性的值进⾏改变
