一、按照組織方式劃分模塊

文件模塊：是我們上一章節(jié)說過的，就是一個(gè)獨(dú)立的.js文件。

目錄模塊：是我們可以將多個(gè)獨(dú)立的.js文件統(tǒng)一存放在一個(gè)目錄下，也就是放到一個(gè)文件夾中。

二、目錄模塊的加載邏輯

三、模塊的加載邏輯

注：package.json 是目錄模塊的描述文件

 不以路徑導(dǎo)入的模塊，會(huì)一直尋找node_moudules，一層層尋找。尋找不到就報(bào)錯(cuò)。

四、示例1

在dir01目錄下新建3個(gè)js文件，分別是a.js、b.js、c.js。三個(gè)文件當(dāng)中呢，函數(shù)名都是info，輸出的內(nèi)容呢是對(duì)應(yīng)的文件名稱。 

a.js文件

b.js文件 

c.js文件 

app.js文件 

運(yùn)行結(jié)果（以路徑開頭引入）

報(bào)錯(cuò)：不能查找到該路徑這個(gè)模塊。原因：我們?cè)撃夸浵掠腥齻€(gè)js文件，而它不知道你要調(diào)用哪個(gè)文件，所以會(huì)報(bào)錯(cuò)。解決方法：將目錄模塊進(jìn)行調(diào)用文件指定。

我們通過，加入index.js文件后，發(fā)現(xiàn)不報(bào)錯(cuò)了，輸出了index.js，這就說明我們指定的調(diào)用文件成功了，那么由此可以看出，我們默認(rèn)調(diào)用的是index.js文件。 如果沒有該文件將報(bào)錯(cuò)，那么我們?nèi)绾胃某烧{(diào)用其他三個(gè)文件呢？

將默認(rèn)調(diào)用的index.js刪除，我們新建一個(gè)package.json文件，然后使用"main"屬性指定一個(gè)模塊的文件名字就可以啦。注：這里輸出的undefined是我們function沒有寫return語句，默認(rèn)返回的是undefined。

 我們?cè)谌齻€(gè)文件模塊中，任意拿出一個(gè)，比如說a.js，我們可以再a.js文件中引入其他兩個(gè)文件模塊，并打印，可以看到如上圖的結(jié)果。

不以路徑開頭引入

就是require引入的時(shí)候，是直接寫一個(gè)目錄文件夾的名字，而不是路徑，那么我們需要把這個(gè)文件夾放在node_modules目錄下，否則會(huì)報(bào)錯(cuò)，我們執(zhí)行的時(shí)候會(huì)查找這個(gè)名字的目錄。

如下是示例可復(fù)制代碼 

a.js

//導(dǎo)入模塊b,c
const b = require(__dirname+'/b.js')
const c = require(__dirname+'/c.js')
function info () {
  console.log(b.info());
  console.log(c.info());
  console.log('a.js');
}
// 導(dǎo)出
module.exports = {
  info
}

b.js

function info () {
  console.log('b.js');
}
// 導(dǎo)出
module.exports = {
  info
}

 c.js

function info () {
  console.log('c.js');
}
// 導(dǎo)出
module.exports = {
  info
}

app.js

//引入目錄模塊
//默認(rèn)的目錄模塊的入口文件是 index.js
// const dir01 = require('./custom_module/dir01')
 
// console.log(dir01.info());
 
//不以路徑開頭的引入方式
const dir02 = require('dir02')
 
console.log(dir02.info());

package.json

{
  "main":"a.js"
}

node_moudules目錄下的dir02目錄下的index.js文件

路徑：node_moudules/dir02/index.js

function info () {
  console.log('dir02');
}
// 導(dǎo)出
module.exports = {
  info
}

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

最新評(píng)論