ES6模塊化

CommonJS 規(guī)范

node.js 遵循了 CommonJS 的模塊化規(guī)范。其中：

• 導(dǎo)入其它模塊使用 require()方法
• 模塊對(duì)外共享成員使用 module.exports 對(duì)象

模塊化開(kāi)發(fā)好處

模塊化開(kāi)發(fā)的好處有很多，其中：

• 實(shí)現(xiàn)了在JS文件中引用其他文件
• 避免命名沖突的問(wèn)題
• 大家都遵守同樣的模塊化規(guī)范寫代碼，降低了溝通的成本，極大方便了各個(gè)模塊之間的相互調(diào)用
• 只需關(guān)心當(dāng)前模塊本身的功能開(kāi)發(fā)，需要其他模塊的支持時(shí)，在模塊內(nèi)調(diào)用目標(biāo)模塊即可

模塊化規(guī)范劃分

在 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ī)范給開(kāi)發(fā)者增加了學(xué)習(xí)的難度與開(kāi)發(fā)的成本。因此，官方的 ES6 模塊化規(guī)范誕生了！

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

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

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

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)出多次
//必須定義的時(shí)候就導(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('重要的事情說(shuō)三遍!');
}

Promise對(duì)象

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

使用語(yǔ)法

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

注意點(diǎn):

• new Promise()
• 必須傳入一個(gè)函數(shù)作為Promise的參數(shù)，這個(gè)函數(shù)在 new Promise的時(shí)候就會(huì)執(zhí)行
• 函數(shù)有 resolve 和 reject 兩個(gè)形參
• 函數(shù)就相當(dāng)于一個(gè)容器，可以將異步任務(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方法接收以個(gè)函數(shù)類型的參數(shù)，只處理成功
• then方法接收兩個(gè)函數(shù)類型的參數(shù)，分別用于接收 resolve 的值 和 reject 的值
• then方法也可以只接收一個(gè)參數(shù)，表示只接收 resolve 的值，失敗的結(jié)果可以通過(guò)鏈?zhǔn)秸{(diào)用catch方法捕獲

Promise中的同步異步

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

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

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)
????})

注意：未來(lái)很多模塊支持Promise對(duì)象開(kāi)發(fā)，就是返回的是一個(gè)Promise對(duì)象； 如 axios

到此這篇關(guān)于Node.js中ES6模塊化及Promise對(duì)象的文章就介紹到這了,更多相關(guān)Node.js ES6模塊 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論