我們平時在使用express寫代碼的過程中，會根據類別，將路由分為多個不同的文件，然后在項目的入口文件（例如app.js）中將其依次掛載，例如：
1

2

3

4

5

6

7

const index = require('./routes/index')

const user = require('./routes/user')

// ...其他路由文件

?

app.use('/', index)

app.use('/user', user)

// ...掛載其他路由

但是當路由文件過多時，這樣寫會多出很多重復性的代碼，而且當我添加一個新的路由模塊時，除了編寫路由文件本身，還需要到app.js入口文件中將新路由文件掛載上去，不夠靈活，因此，我們需要想一些辦法來管理我們的路由，使其能夠自動化，免除頻繁修改入口文件的操作。

管理思路
我們的項目目錄主要是這樣的：

1

2

3

4

5

6

7

├─routes

??├─index.js

??├─user.js

??├─sub

????├─index.js

????├─a.js

├─app.js

首先，我們來看一下，express的路由管理主要由三部分組成，路由方法（method）、路由路徑（path）和路由處理器（handle），一般情況下，路由方法和路由處理器是由路由文件自己來管理，在一個路由文件中，我們經常使用這樣的寫法：

1

2

3

4

5

6

7

8

9

10

// routes/user.js

const express = require('express')

const router = express.Router()

?

// 路由的方法，處理器和部分路徑

router.get('/', function (req, res, next) {

??res.send('respond with a resource')

})

?

module.exports = router

然后在入口文件中添加上共通的路由前綴：

1

app.use('/user', require('./routes/user'))

根據這種思路，我們主要處理的就是路由路徑這個部分。在這個部分我們有兩種處理方式，一種是根據路徑和文件名自動生成路由的共通路徑前綴，路由文件只編寫剩余不共通部分的路徑；還有一種則是路徑完全由路由文件自己來管理，在掛載時直接掛載到根路徑'/'上。

管理實例
自動生成前綴
我們通過掃描項目目錄，可以將文件在項目中的路徑轉化為express的路由路徑模式，自動生成路由前綴，例如路由文件routes/sub/a.js就會為轉化成路由前綴/sub/a，路由文件a.js中只要編寫/sub/a后面的路徑部分即可。

項目目錄為：

1

2

3

4

5

6

7

8

├─routes

??├─index.js

??├─user.js

??├─sub

????├─index.js

????├─a.js

├─app.js

├─helper.js

主要的實現代碼為：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

// helper.js

const fs = require('fs')

const path = require('path')

?

/**

?* 將文件名修正為前綴

?*

?* @param {String} filename

?* @returns {String}

?*/

function transform (filename) {

??return filename.slice(0, filename.lastIndexOf('.'))

????// 分隔符轉換

????.replace(/\\/g, '/')

????// index去除

????.replace('/index', '/')

????// 路徑頭部/修正

????.replace(/^[/]*/, '/')

????// 路徑尾部/去除

????.replace(/[/]*$/, '')

}

?

/**

?* 文件路徑轉模塊名（去.js后綴）

?*

?* @param {any} rootDir 模塊入口

?* @param {any} excludeFile 要排除的入口文件

?* @returns

?*/

exports.scanDirModules = function scanDirModules (rootDir, excludeFile) {

??if (!excludeFile) {

????// 默認入口文件為目錄下的 index.js

????excludeFile = path.join(rootDir, 'index.js')

??}

??// 模塊集合

??const modules = {}

??// 獲取目錄下的第一級子文件為路由文件隊列

??let filenames = fs.readdirSync(rootDir)

??while (filenames.length) {

????// 路由文件相對路徑

????const relativeFilePath = filenames.shift()

????// 路由文件絕對路徑

????const absFilePath = path.join(rootDir, relativeFilePath)

????// 排除入口文件

????if (absFilePath === excludeFile) {

??????continue

????}

????if (fs.statSync(absFilePath).isDirectory()) {

??????// 是文件夾的情況下，讀取子目錄文件，添加到路由文件隊列中

??????const subFiles = fs.readdirSync(absFilePath).map(v => path.join(absFilePath.replace(rootDir, ''), v))

??????filenames = filenames.concat(subFiles)

????} else {

??????// 是文件的情況下，將文件路徑轉化為路由前綴，添加路由前綴和路由模塊到模塊集合中

??????const prefix = transform(relativeFilePath)

??????modules[prefix] = require(absFilePath)

????}

??}

??return modules

}

然后，在路由目錄的入口index文件下，加入這么一段代碼（scanDirModules方法需要從之前編寫的helper.js文件中引入）：

1

2

3

4

5

6

const scanResult = scanDirModules(__dirname, __filename)

for (const prefix in scanResult) {

??if (scanResult.hasOwnProperty(prefix)) {

????router.use(prefix, scanResult[prefix])

??}

}

在app.js入口文件中只需要將所有路由相關代碼改成一句：

1

app.use('/', require('./routes'))

這樣就完成了路由前綴的自動生成和路由自動掛載了。

效果展示：

我們將routes/sub/a.js的內容定為：

1

2

3

4

5

6

7

8

9

// routes/sub/a.js

const express = require('express')

const router = express.Router()

?

router.get('/', function (req, res) {

??res.send('sub/a/')

})

?

module.exports = router

掛載效果：



訪問結果：



這種自動生成前綴的方法，在路由目錄層級不深時，可以起到很好的作用，但是當目錄層級較多時，就會暴露出缺點：閱讀代碼時路由路徑不明確，不能直觀地看到完整路徑，而且生成前綴的靈活性不高。

后者可以使用自定義導出對象和掛載方式的方法來解決，但是前者我暫時沒有什么好的解決方法，因此我們來看一下之前提到的另一種自動化方法。

直接掛載到根路徑
這種方法的掃描思路和前一種方法相似，不同之處在于，在編寫路由文件的時候，我們需要寫完整路由的路徑，例如：

1

2

3

4

5

6

7

8

9

// routes/sub/a.js

const express = require('express')

const router = express.Router()

?

router.get('/sub/a', function (req, res) {

??res.send('sub/a/')

})

?

module.exports = router

掃描部分的代碼修改為：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

exports.scanDirModulesWithoutPrefix = function scanDirModulesWithoutPrefix (rootDir, excludeFile) {

??if (!excludeFile) {

????// 默認入口文件為目錄下的 index.js

????excludeFile = path.join(rootDir, 'index.js')

??}

??const modules = []

??let filenames = fs.readdirSync(rootDir)

??while (filenames.length) {

????// 路由文件相對路徑

????const relativeFilePath = filenames.shift()

????// 路由文件絕對路徑

????const absFilePath = path.join(rootDir, relativeFilePath)

????// 排除入口文件

????if (absFilePath === excludeFile) {

??????continue

????}

????if (fs.statSync(absFilePath).isDirectory()) {

??????// 是文件夾的情況下，讀取子目錄文件，添加到路由文件隊列中

??????const subFiles = fs.readdirSync(absFilePath).map(v => path.join(absFilePath.replace(rootDir, ''), v))

??????filenames = filenames.concat(subFiles)

????} else {

??????// 是文件的情況下，將模塊添加到模塊數組中

??????modules.push(require(absFilePath))

????}

??}

??return modules

}

路由入口文件修改為：

1

2

3

4

5

// 獲取 routes 目錄下所有路由模塊，并掛載到一個路由上

const routeModules = scanDirModulesWithoutPrefix(__dirname, __filename)

routeModules.forEach(routeModule => {

??router.use(routeModule)

})

掛載效果：



這種方法可以明確的看到路由的完整路徑，在閱讀代碼時不會出現因為層級過深而導致出現閱讀困難的情況，但是明顯的缺點就是需要編寫大量的路徑相關代碼，路徑重用性又太低。

那么有沒有一種方法，既能保證共通路徑的重用性，又能保證代碼的可閱讀性呢？

有，我們可以用JavaScript的裝飾器（Decorator）來進行路由的管理。

裝飾器實現路由管理
裝飾器的思路來自于Java的MVC框架Spring MVC，在Spring MVC中，路由的編寫方式是這樣的：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

// 類上的 RequestMapping 注解用來設置共通的路徑前綴

@Controller

@RequestMapping("/")

public class SampleController {

?

??// 方法上的 RequestMapping 注解用來設置剩余路徑和路由方法

??@RequestMapping("/", method=RequestMethod.GET)

??public String index() {

????return "Hello World!";

??}

?

??// GetMapping 注解相當于已經指定了GET訪問方法的 RequestMapping

??@GetMapping("/1")

??public String index1() {

????return "Hello World!1";

??}

}

在ES6之后，在js中編寫類已經變得非常容易，我們也可以仿照 Spring MVC 的路由方式來管理express中的路由。

思路整理
關于JavaScript的裝飾器，可以參考這兩篇文章：

探尋 ECMAScript 中的裝飾器 Decorator

JS 裝飾器（Decorator）場景實戰

在進行實現之前，我們先簡單整理一下實現的思路。我的思路是，為了閱讀方便，每一個路由文件包括一個類（Controller），每個類上有兩種裝飾器。

第一種裝飾器是在類上添加的，用來將這個類下面的所有方法綁定到一個共通的路由前綴上；

而第二種裝飾器則是添加到類中的方法上的，用來將方法綁定到一個指定的HTTP請求方法和路由路徑上。

這兩種裝飾器也都接收剩余的參數，作為需要綁定的中間件。

除了編寫裝飾器本身之外，我們還需要一個注冊函數，用來指定需要綁定的express對象和需要掃描的路由目錄。

準備工作
為了使用裝飾器這個特性，我們需要使用一些babel插件：

1

$ yarn add babel-register babel-preset-env babel-plugin-transform-decorators-legacy

編寫.babelrc文件：

1

2

3

4

5

6

7

8

{

??"presets": [

????"env"

??],

??"plugins": [

????"transform-decorators-legacy"

??]

}

在app.js中注冊babel-register：

1

require('babel-register')

注冊函數編寫
注冊函數的功能較為簡單，因此我們先來編寫注冊函數：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

let app = null

?

/**

?* 掃描并引入目錄下的模塊

?*

?* @private

?* @param {string} routesDir 路由目錄

?*/

function scanDirModules (routesDir) {

??if (!fs.existsSync(routesDir)) {

????return

??}

??let filenames = fs.readdirSync(routesDir)

??while (filenames.length) {

????// 路由文件相對路徑

????const relativeFilePath = filenames.shift()

????// 路由文件絕對路徑

????const absFilePath = path.join(routesDir, relativeFilePath)

????if (fs.statSync(absFilePath).isDirectory()) {

??????// 是文件夾的情況下，讀取子目錄文件，添加到路由文件隊列中

??????const subFiles = fs.readdirSync(absFilePath).map(v => path.join(absFilePath.replace(routesDir, ''), v))

??????filenames = filenames.concat(subFiles)

????} else {

??????// require路由文件

??????require(absFilePath)

????}

??}

}

?

/**

?* 注冊express服務器

?*

?* @param {Object} options 注冊選項

?* @param {express.Application} options.app express服務器對象

?* @param {string|Array} options.routesDir 要掃描的路由目錄

?*/

function register (options) {

??app = options.app

??// 支持掃描多個路由目錄

??const routesDirs = typeof options.routesDir === 'string' ? [options.routesDir] : options.routesDir

??routesDirs.forEach(dir => {

????scanDirModules(dir)

??})

}

通過獲取express的app對象，將其注冊到文件的頂級變量app，可以讓其余的裝飾器函數訪問到app對象從而完成路由注冊。

routesDir可以是字符串也可以是字符串的數組，代表了需要掃描的路由目錄，將其轉化為字符串數組后依次進行掃描。

scanDirModules方法與之前的掃描方法類似，只是這里只需要將路由文件require進來就行，不需要返回。

裝飾器編寫
裝飾器部分分為兩部分，裝飾類的路由裝飾器Router和其余裝飾方法的請求處理裝飾器（Get, Post, Put, Delete, All, Custom）。

在方法裝飾器的編寫上，由于裝飾器的行為相似，因此我們可以編寫一個抽象函數，用來生成不同HTTP請求方法的不同裝飾器。

抽象函數的具體代碼為：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

/**

?* 生成對應HTTP請求方法的裝飾器

?*

?* @param {string} httpMethod 請求方法

?* @param {string|RegExp} pattern 請求路徑

?* @param {Array} middlewares 中間件數組

?* @returns {MethodDecorator}

?*/

function generateMethodDecorator (httpMethod, pattern, middlewares) {

??return function (target, methodName, descriptor) {

????if (!target._routeMethods) {

??????target._routeMethods = {}

????}

????// 為自定義方法生成對應的方法存儲對象

????if (!target._routeMethods[httpMethod]) {

??????target._routeMethods[httpMethod] = {}

????}

????target._routeMethods[httpMethod][pattern] = [...middlewares, target[methodName]]

????return descriptor

??}

}

這里的target表示類的原型對象，methodName則是需要裝飾的類方法的名稱，我們將類方法和它的前置中間件組成一個數組，存儲到類原型對象上的_routeMethods屬性中，以便類裝飾器調用。

要生成一個HTTP請求方法的裝飾器，只需要調用這個生成函數即可。

例如生成一個GET方法的裝飾器，則只需要：

1

2

3

4

5

6

7

8

9

10

/**

?* GET 方法裝飾器

?*

?* @param {string|RegExp} pattern 路由路徑

?* @param {Array} middlewares 中間件數組

?* @returns {MethodDecorator}

?*/

function Get (pattern, ...middlewares) {

??return generateMethodDecorator('get', pattern, middlewares)

}

路由裝飾器（類裝飾器）的代碼為：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

/**

?* Router 類裝飾器，使用在 class 上，生成一個帶有共通前綴和中間件的路由

?*

?* @param {string|RegExp} prefix 路由前綴

?* @param {express.RouterOptions} routerOption 路由選項

?* @param {Array} middlewares 中間件數組

?* @returns {ClassDecorator}

?*/

function Router (prefix, routerOption, ...middlewares) {

??// 判斷是否有路由選項，沒有則當做中間件來使用

??if (typeof routerOption === 'function') {

????middlewares.unshift(routerOption)

????routerOption = undefined

??}

?

??/**

???* 為類生成一個 router,

???* 該裝飾器會在所有方法裝飾器執行完后才執行

???*

???* @param {Function} target 路由類對象

???*/

??return function (target) {

????const router = express.Router(routerOption)

????const _routeMethods = target.prototype._routeMethods

????// 遍歷掛載路由

????for (const method in _routeMethods) {

??????if (_routeMethods.hasOwnProperty(method)) {

????????const methods = _routeMethods[method]

????????for (const path in methods) {

??????????if (methods.hasOwnProperty(path)) {

????????????router[method](path, ...methods[path])

??????????}

????????}

??????}

????}

????delete target.prototype._routeMethods

????app.use(prefix, ...middlewares, router)

??}

}

這里的target是類對象，當裝飾器對類進行處理時，我們生成一個新的express路由對象，將放置在類對象原型上的_routeMethods屬性進行遍歷，獲取到對應的路由方法、路由路徑和路由處理函數，并掛載到這個路由對象上。

需要注意，類裝飾器的處理會放在方法裝飾器之后進行，因此我們不能直接在方法裝飾器上進行掛載，需要將其存儲起來，在類裝飾器上完成掛載工作。

編寫路由文件
我們的路由文件也需要進行大幅度的改動，將其轉化為下面類似的形式：

1

2

3

4

5

6

7

8

9

10

11

// routes/sub/a.js

// Router 和 Get 裝飾器從你的裝飾器文件中引入

@Router('/sub/a')

class SubAController {

??@Get('/')

??index (req, res, next) {

????res.send('sub/a/')

??}

}

?

module.exports = SubAController

掛載效果


用裝飾器編寫路由的相關代碼我已經單獨建立了一個github倉庫，并發布成了一個npm包——express-derouter，歡迎各位star。

總結
以上就是我最近所思考的有關于express路由管理自動化的幾種方法，其中裝飾器掛載的方式由于js自身原因，在還原Spring MVC的其他功能上有所限制，如果你對更加強大的功能有要求的話，可以看看TypeScript基于express的一個MVC框架——nest，相信它應該更能滿足你的需求。