Node.js 如何找出循環(huán)依賴的文件？如何解決循環(huán)依賴問題？

Panda 發(fā)布于2019-08-23 12:33 / 1151人閱讀

摘要：本文重點是講解如何解決循環(huán)依賴這個問題。如何找到循環(huán)依賴的的文件上文的示例代碼很簡單，個文件，很容易找出循環(huán)依賴。如果有十幾個文件，手工去找循環(huán)依賴的文件，也是非常麻煩的。

本文重點是講解如何解決循環(huán)依賴這個問題。關(guān)心這個問題是如何產(chǎn)生的，可以自行谷歌。

如何重現(xiàn)這個問題

// a.js
const {sayB} = require("./b.js")

sayB()

function sayA () {
  console.log("say A")
}

module.exports = {
  sayA
}

// b.js
const {sayA} = require("./a.js")

sayA()

function sayB () {
  console.log("say B")
}

module.exports = {
  sayB
}

執(zhí)行下面的代碼

?  test git:(master) ? node a.js
/Users/dd/wj-gitlab/tools/test/b.js:3
sayA()
^

TypeError: sayA is not a function
    at Object. (/Users/dd/wj-gitlab/tools/test/b.js:3:1)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object. (/Users/dd/wj-gitlab/tools/test/a.js:1:78)
    at Module._compile (module.js:635:30)

sayA is not a function那么sayA是個什么呢，實際上它是 undefined

遇到這種問題時，你最好能意識到可能是循環(huán)依賴的問題，否則找問題可能事倍功半。

如何找到循環(huán)依賴的的文件

上文的示例代碼很簡單，2個文件，很容易找出循環(huán)依賴。如果有十幾個文件，手工去找循環(huán)依賴的文件，也是非常麻煩的。

下面推薦一個工具 madge, 它可以可視化的查看文件之間的依賴關(guān)系。

注意下圖1，以cli.js為起點，所有的箭頭都是向右展開的，這說明沒有循環(huán)依賴。如果有箭頭出現(xiàn)向左逆流，那么就可能是循環(huán)依賴的點。

圖2中，出現(xiàn)向左的箭頭，說明出現(xiàn)了循環(huán)依賴，說明要此處斷開循環(huán)。

【圖1】

【圖2】

如何解決循環(huán)依賴 方案1：先導出自身模塊

將module.exports放到文件頭部，先將自身模塊導出，然后再導入其他模塊。

來自：http://maples7.com/2016/08/17...

// a.js
module.exports = {
  sayA
}

const {sayB} = require("./b.js")

sayB()

function sayA () {
  console.log("say A")
}

// b.js
module.exports = {
  sayB
}

const {sayA} = require("./a.js")

console.log(typeof sayA)

sayA()

function sayB () {
  console.log("say A")
}

方案2：間接調(diào)用

通過引入一個event的消息傳遞，讓多個個模塊可以間接傳遞消息，多個模塊之間也可以通過發(fā)消息相互調(diào)用。

// a.js
require("./b.js")
const bus = require("./bus.js")

bus.on("sayA", sayA)

setTimeout(() => {
  bus.emit("sayB")
}, 0)

function sayA () {
  console.log("say A")
}

module.exports = {
  sayA
}

// b.js
const bus = require("./bus.js")

bus.on("sayB", sayB)

setTimeout(() => {
  bus.emit("sayA")
}, 0)

function sayB () {
  console.log("say B")
}

module.exports = {
  sayB
}

// bus.js
const EventEmitter = require("events")

class MyEmitter extends EventEmitter {}

module.exports = new MyEmitter()

總結(jié)

出現(xiàn)循環(huán)依賴，往往是代碼的結(jié)構(gòu)出現(xiàn)了問題。應(yīng)當主動去避免循環(huán)依賴這種問題，但是遇到這種問題，無法避免時，也要意識到是循環(huán)依賴導致的問題，并找方案解決。

最后給出一個有意思的問題，下面的代碼運行node a.js會輸出什么？為什么會這樣？

// a.js

var moduleB = require("./b.js")

setInterval(() => {
  console.log("setInterval A")
}, 500)

setTimeout(() => {
  console.log("setTimeout moduleA")
  moduleB.sayB()
}, 2000)

function sayA () {
  console.log("say A")
}

module.exports = {
  sayA
}

// b.js
var moduleA = require("./a.js")

setInterval(() => {
  console.log("setInterval B")
}, 500)

setTimeout(() => {
  console.log("setTimeout moduleB")
  moduleA.sayA()
}, 2000)

function sayB () {
  console.log("say B")
}

module.exports = {
  sayB
}