為什么使用模塊化？

在JavaScript中，模塊化是一種管理代碼的方法，它可以將代碼分割為不同的模塊或文件，并通過特定的方式來管理它們之間的依賴關(guān)系和導(dǎo)出關(guān)系，使得代碼的結(jié)構(gòu)更加清晰、易于維護(hù)和擴(kuò)展。

模塊化類別：

• IIFE 模式：使用立即執(zhí)行函數(shù)表達(dá)式（IIFE）來創(chuàng)建私有作用域，從而避免命名沖突。這種方式也稱為模塊模式，它使用一個(gè)匿名函數(shù)來封裝模塊，并返回一個(gè)公共接口。

• CommonJS 模塊化：CommonJS 是一個(gè) JavaScript 模塊化的標(biāo)準(zhǔn)，它使用 require() 導(dǎo)入模塊，exports 導(dǎo)出模塊，使得模塊可以在不同的環(huán)境中使用。Node.js 采用了 CommonJS 標(biāo)準(zhǔn)來實(shí)現(xiàn)模塊化。

• AMD 模塊化：AMD (Asynchronous Module Definition) 是另一個(gè) JavaScript 模塊化的標(biāo)準(zhǔn)，它支持異步加載模塊，使用 define() 來定義模塊，使用 require() 來加載模塊。

• ES6 模塊化：ES6 引入了原生的模塊化系統(tǒng)，可以使用 import 和 export 語句導(dǎo)入和導(dǎo)出模塊。它提供了靜態(tài)分析功能，可以在編譯時(shí)進(jìn)行優(yōu)化，使得模塊加載更快。

1.export.default的使用方法

特點(diǎn)：

1. export.default向外暴露的成員，可以使用任意變量來接收
2. 在一個(gè)模塊中，export default只允許向外暴露一次
3. 在一個(gè)模塊中，可以同時(shí)使用export default 和export 向外暴露成員

//export default-默認(rèn)導(dǎo)出
const m = 100;
export default m; 

//導(dǎo)入
import m from './file'; //可以改變變量名，如：import a from './file';
//export defult const m = 100;// 不可以這樣寫

//導(dǎo)出
let a = 100;
let b = {};
let c = ()=>{}

export default {
  a,b,c
}

//導(dǎo)入
import module from './file';
console.log( module.a, module.b, module.c );

2.export的使用用法

特點(diǎn)：

1. 注意：在一個(gè)模塊中，export 可以向外暴露多個(gè)
2. 注意；使用export導(dǎo)出的成員，必須嚴(yán)格按照導(dǎo)出時(shí)候的名稱，不能自定義，來使用 {} 按需接收
3. 注意；使用export導(dǎo)出的成員，如果要換個(gè)名稱，可以使用 as 起別名

'use strict';
//導(dǎo)出變量
export const a = '100';  
 
 //導(dǎo)出方法
export const dogSay = function(){ 
    console.log('wang wang');
}

//導(dǎo)出函數(shù)
export function catSay(){
   console.log('miao miao'); 
}

//導(dǎo)入- export導(dǎo)出的是多個(gè)，需要解構(gòu)取值
import { a as b, dogSay, catSay } from './file';
//或 import * as utils from './file'

//導(dǎo)出
const str = "export的內(nèi)容";
const year = 2019;
function message(sth) {
  return sth;
}
export { str, year, message }

//導(dǎo)入
import {str, year, message} from './file';
//或：import * as utils from './file';

3.export和export.default混合導(dǎo)出

//導(dǎo)出
const author = "不要禿頭啊";

export const age = "18";
export default author;

//導(dǎo)入
import author, { age } from "./name";

console.log(author, "author");
console.log(age, "age");

4.module.exports的使用方法

特點(diǎn)：

1. exports 是 module.exports 的一個(gè)引用，即 exports = module.exports
2. module.exports 和 exports 不要同時(shí)使用，指向會(huì)有問題

//導(dǎo)出
module.exports = { checkIDCIP };

//導(dǎo)入
const { checkIDCIP } = require('./utils'); //或者 import { checkIDCIP } from './utils';

exports的使用

// person.js --- 導(dǎo)出
var name = 'Tom';
var age = 18;

exports.getName = function() {
    return name;
}

exports.getAge = function() {
    return age;
}

// main.js --- 導(dǎo)入
var person = require('./person'); //或 import person from './person'

console.log(person.getName()); // 'Tom'
console.log(person.getAge());  // 18

5.CommonJS和ES6 Module的區(qū)別總結(jié)

一、區(qū)別：

1. CommonJS 模塊是運(yùn)行時(shí)加載，ES6 模塊是在靜態(tài)編譯期間就確定模塊的依賴。

2. 兩者的模塊導(dǎo)入導(dǎo)出語法不同，CommonJS是module.exports，exports導(dǎo)出，require導(dǎo)入；ES6則是export導(dǎo)出，import導(dǎo)入。

3. ES6在編譯期間會(huì)將所有import提升到頂部，CommonJS不會(huì)提升require。

4. CommonJS 模塊的require()是同步加載模塊，ES6 模塊的import命令是異步加載，有一個(gè)獨(dú)立的模塊依賴的解析階段。

5. CommonJS導(dǎo)出的是一個(gè)值拷貝，會(huì)對(duì)加載結(jié)果進(jìn)行緩存，一旦內(nèi)部再修改這個(gè)值，則不會(huì)同步到外部。ES6 Module是對(duì)模塊的引?,即ES6 Module只存只讀，不能改變其值，具體點(diǎn)就是指針指向不能變，類似const 。

6. import的接?是read-only（只讀狀態(tài)），不能修改其變量值。 即不能修改其變量的指針指向，但可以改變變量?jī)?nèi)部指針指向。可以對(duì)commonJS對(duì)重新賦值（改變指針指向），但是對(duì)ES6 Module賦值會(huì)編譯報(bào)錯(cuò)。

7. 兩者的循環(huán)導(dǎo)入的實(shí)現(xiàn)原理不同，CommonJS是當(dāng)模塊遇到循環(huán)加載時(shí)，返回的是當(dāng)前已經(jīng)執(zhí)行的部分的值，而不是代碼全部執(zhí)行后的值，兩者可能會(huì)有差異。所以，輸入變量的時(shí)候，必須非常小心。ES6 模塊是動(dòng)態(tài)引用，如果使用import從一個(gè)模塊加載變量（即import foo from 'foo'），那些變量不會(huì)被緩存，而是成為一個(gè)指向被加載模塊的引用，需要開發(fā)者自己保證，真正取值的時(shí)候能夠取到值。

8. CommonJS中頂層的this指向這個(gè)模塊本身，而ES6中頂層this指向undefined。

//es6中
var fun = () => {
    mistypedVaraible = 17; //報(bào)錯(cuò)，mistypedVaraible is not defined
};
export default fun;

//commonJS中，默認(rèn)不使用嚴(yán)格模式，可以自定義是否使用嚴(yán)格模式
exports.fun = () => {
 mistypedVaraible = 17; //沒有調(diào)用嚴(yán)格模式，不會(huì)報(bào)錯(cuò)
};

二、共同點(diǎn)：

1.CommonJS和ES6 Module都可以對(duì)引?的對(duì)象進(jìn)?賦值，即對(duì)對(duì)象內(nèi)部屬性的值進(jìn)?改變

參考鏈接：Module 的加載實(shí)現(xiàn) - ECMAScript 6入門 (ruanyifeng.com)