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

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

exports和require()

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

下面通過例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行代碼聲明了一個(gè)add()函數(shù)用于實(shí)現(xiàn)加法功能，該函數(shù)有nl和n2兩個(gè)參數(shù)，在函數(shù)體中返回nl和n2相加的結(jié)果;第2行代碼使用expors對(duì)象向模塊外開放add()，其中等號(hào)左側(cè)的add表示expors對(duì)象的屬性名，等號(hào)右側(cè)的add是實(shí)現(xiàn)的add()數(shù)。

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

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

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

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

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

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

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