前端模塊化開發(fā)怎樣導(dǎo)入和導(dǎo)出模塊？

在模塊化開發(fā)中，一個JavaScript文件就是一個模塊，模塊內(nèi)部定義的變量和函數(shù)默認(rèn)情況下在外部無法得到。下面對Node.js模塊成員的導(dǎo)入出進(jìn)行詳細(xì)講解。

exports和require()

Node.js為開發(fā)者提供了一個簡單的模塊系統(tǒng)，其中exports是模塊公開的接口，require0用于從外部獲取一個模塊的接口，即獲取模塊的exports對象。若想在一個文件模塊中獲取其他文件模塊的內(nèi)容，首先需要使用 require0方法加載這個模塊，在被加載的模塊中使用exports或者module.exports對象對外開放的變量、函數(shù)等，require0函數(shù)的作用是加載文件并獲取該文件中的module.exports 對象接口。

下面通過例2-3來演示如何在Node.js中進(jìn)行模塊成員的導(dǎo)入和導(dǎo)出。

(1)創(chuàng)建C:code\kchapter02Wemo01 目錄，在該目錄下創(chuàng)建info.js文件作為被加載模塊，編寫如下代碼。

const add = (nl, n2) => nl + n2;
exports.add = add;

上述代碼中，第1行代碼聲明了一個add()函數(shù)用于實現(xiàn)加法功能，該函數(shù)有nl和n2兩個參數(shù)，在函數(shù)體中返回nl和n2相加的結(jié)果;第2行代碼使用expors對象向模塊外開放add()，其中等號左側(cè)的add表示expors對象的屬性名，等號右側(cè)的add是實現(xiàn)的add()數(shù)。

(2)在demo01目錄下新建b.js文件，實現(xiàn)在b.js模塊中導(dǎo)入fo.js模塊，編寫如下代碼。

const info = require('./info');  
//模塊導(dǎo)入時，模塊的后綴。js是可以省略的
console.log(info.add(10, 20));    // 30

上述代碼中，第l行代碼使用require0方法加載imfo.js模塊，因為info.js和b.js在同一個目錄下，所以使用相對路徑加"√"模塊在當(dāng)前目錄下。加載完畢后返回一個expors對象，在該對象中包含了所加載模塊對外開放的函數(shù)的值。

(3)打開命令行工具，切換到b，js文件所在的目錄，并輸入“node b.js”命令，b.js文件執(zhí)行結(jié)果如圖所示。

總結(jié)出Nodejs的模塊化開發(fā)的步驟，具體如下。

(l)通過expors對象對模塊內(nèi)部的成員進(jìn)行導(dǎo)出操作。

(2)通過require0方法對依賴的模塊進(jìn)行導(dǎo)入操作。