在 ES6 模塊化規(guī)范誕生之前，JavaScript 社區(qū)已經(jīng)嘗試并提出了 AMD 、 CMD 、 CommonJS 等模塊化規(guī)范。但是，這些由社區(qū)提出的模塊化標(biāo)準(zhǔn)，還是存在一定的差異性與局限性、并不是瀏覽器與服務(wù)器通用的模塊化標(biāo)準(zhǔn)

AMD 和 CMD 適用于瀏覽器端的 Javascript 模塊化
CommonJS 適用于服務(wù)器端的 Javascript

模塊化太多的模塊化規(guī)范給開發(fā)者增加了學(xué)習(xí)的難度與開發(fā)的成本。因此，官方的 ES6 模塊化規(guī)范誕生了！

ES6模塊化開發(fā)注意點(diǎn)

node.js 中默認(rèn)僅支持 CommonJS 模塊化規(guī)范，若想基于 node.js 體驗(yàn)與學(xué)習(xí) ES6 的模塊化語法，需要按照如下兩個步驟進(jìn)行配置：

確保安裝了 v13.0.0 或更高版本的 node.js
在 package.json 的根節(jié)點(diǎn)中添加 "type": "module" 節(jié)點(diǎn)
配置之后，則只能使用ES6模塊化語法，不能再使用CommonJS語法了

ES6 導(dǎo)入導(dǎo)出

主模塊：

// //導(dǎo)入子模塊
// //方法1.默認(rèn)導(dǎo)入  不能解構(gòu)接收
// import obj from './02-子模塊.js'
// console.log(obj);
// //不能再接收位置直接解構(gòu)
//import { fn, num } from './02-子模塊.js'
//方法2.按需導(dǎo)入
// import { str, fn2 } from './02-子模塊.js'
// console.log(str);
// fn2
//import bbb from './02-子模塊.js'
//方法3.只導(dǎo)入 不接收 使用的是功能
import './02-子模塊.js'
//es6也有緩存機(jī)制

子模塊：

//導(dǎo)出內(nèi)容
//方法1.默認(rèn)導(dǎo)出一次  不允許導(dǎo)出多次
// const num = 123
// function fn() {
//   console.log('我是函數(shù)fn');
// }
// export default { fn, num }

//方法2.按需導(dǎo)出  可以導(dǎo)出多次
//必須定義的時候就導(dǎo)出
// export const str = 'abc'
// export function fn2() {
//   console.log('我是函數(shù)fn2');
// }

//方法3.不導(dǎo)出任何數(shù)據(jù)  讓別人使用自己的功能
for (let i = 0; i < 3; i++) {
  console.log('重要的事情說三遍!');
}

Promise對象

異步操作是 JavaScript 編程的麻煩事，麻煩到一直有人提出各種各樣的方案，試圖解決這個問題。早期使用回調(diào)函數(shù)處理異步編碼，但存在回調(diào)地獄的問題。ES6中，新增了Promise 對象，從此異步編程擺脫了回調(diào)函數(shù)的束縛。

使用語法

let?p?=?new?Promise((resolve,?reject)?=>?{
 ? ?//?...?some?code
????if?(/*?異步操作成功?*/)?{
????????resolve(value);
????}?else?{
????????reject(error);
????}
});

注意點(diǎn):

new Promise()
必須傳入一個函數(shù)作為Promise的參數(shù)，這個函數(shù)在 new Promise的時候就會執(zhí)行
函數(shù)有 resolve 和 reject 兩個形參
函數(shù)就相當(dāng)于一個容器，可以將異步任務(wù)放到這里
將異步任務(wù)成功的結(jié)果傳給 resolve 函數(shù)；將失敗的信息傳給 reject 函數(shù)

p.then(
????result?=>?{?/*?獲取成功的結(jié)果?*/?}
);
// 或者
p.then(
????result?=>?{?/*?獲取成功的結(jié)果?*/?},
????err?=>?{?/*?獲取失敗的結(jié)果?*/?}
);
// 或者
p.then(
????result?=>?{?/*?獲取成功的結(jié)果?*/?}
).catch(
    err?=>?{?/*?獲取失敗的結(jié)果?*/?}
);

注意點(diǎn):

then方法接收以個函數(shù)類型的參數(shù)，只處理成功
then方法接收兩個函數(shù)類型的參數(shù)，分別用于接收 resolve 的值和 reject 的值
then方法也可以只接收一個參數(shù)，表示只接收 resolve 的值，失敗的結(jié)果可以通過鏈?zhǔn)秸{(diào)用catch方法捕獲

Promise中的同步異步

new Promise 和 new 其他對象一樣，是同步任務(wù)。

獲取結(jié)果時（調(diào)用 resolve 觸發(fā) then方法時）是異步的。

Promise 封裝

// 封裝
function?myReadFile(filename)?{
????return?new?Promise((resolve,?reject)?=>?{
????????fs.readFile(filename,?'utf-8',?(err,?data)?=>?{
????????????err???reject(err)?:?resolve(data.length);
????????})
????});
}
// 調(diào)用
myReadFile('./files/a.txt')
????.then(a?=>?{
????????console.log(a);
????????return?myReadFile('./files/b.txt');
????})
????.then(b?=>?{
????????console.log(b);
????????return?myReadFile('./files/c.txt');
????})
????.then(c?=>?{
????????console.log(c)
????})

第三方then-fs解決回調(diào)地獄

// npm  i  then-fs
const?fs?=?require('then-fs');
fs.readFile('./files/a.txt',?'utf-8')
????.then(res1?=>?{
????????console.log(res1);
????????return?fs.readFile('./files/b.txt',?'utf-8')
????})
????.then(res2?=>?{
????????console.log(res2);
????????return?fs.readFile('./files/b.txt',?'utf-8')
????})
????.then(res3?=>?{
????????console.log(res3)
????})