摘要：在方法裝飾器的編寫(xiě)上，由于裝飾器的行為相似，因此我們可以編寫(xiě)一個(gè)抽象函數(shù)，用來(lái)生成不同請(qǐng)求方法的不同裝飾器。文章博客地址關(guān)于路由管理的幾種自動(dòng)化方法

我們平時(shí)在使用express寫(xiě)代碼的過(guò)程中，會(huì)根據(jù)類別，將路由分為多個(gè)不同的文件，然后在項(xiàng)目的入口文件（例如app.js）中將其依次掛載，例如：

const index = require("./routes/index")
const user = require("./routes/user")
// ...其他路由文件

app.use("/", index)
app.use("/user", user)
// ...掛載其他路由

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

我們的項(xiàng)目目錄主要是這樣的：

├─routes
  ├─index.js
  ├─user.js
  ├─sub
    ├─index.js
    ├─a.js
├─app.js

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

// 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

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

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

根據(jù)這種思路，我們主要處理的就是路由路徑這個(gè)部分。在這個(gè)部分我們有兩種處理方式，一種是根據(jù)路徑和文件名自動(dòng)生成路由的共通路徑前綴，路由文件只編寫(xiě)剩余不共通部分的路徑；還有一種則是路徑完全由路由文件自己來(lái)管理，在掛載時(shí)直接掛載到根路徑"/"上。

我們通過(guò)掃描項(xiàng)目目錄，可以將文件在項(xiàng)目中的路徑轉(zhuǎn)化為express的路由路徑模式，自動(dòng)生成路由前綴，例如路由文件routes/sub/a.js就會(huì)為轉(zhuǎn)化成路由前綴/sub/a，路由文件a.js中只要編寫(xiě)/sub/a后面的路徑部分即可。

項(xiàng)目目錄為：

├─routes
  ├─index.js
  ├─user.js
  ├─sub
    ├─index.js
    ├─a.js
├─app.js
├─helper.js

主要的實(shí)現(xiàn)代碼為：

// helper.js
const fs = require("fs")
const path = require("path")

/**
 * 將文件名修正為前綴
 *
 * @param {String} filename
 * @returns {String}
 */
function transform (filename) {
  return filename.slice(0, filename.lastIndexOf("."))
    // 分隔符轉(zhuǎn)換
    .replace(//g, "/")
    // index去除
    .replace("/index", "/")
    // 路徑頭部/修正
    .replace(/^[/]*/, "/")
    // 路徑尾部/去除
    .replace(/[/]*$/, "")
}

/**
 * 文件路徑轉(zhuǎn)模塊名（去.js后綴）
 *
 * @param {any} rootDir 模塊入口
 * @param {any} excludeFile 要排除的入口文件
 * @returns
 */
exports.scanDirModules = function scanDirModules (rootDir, excludeFile) {
  if (!excludeFile) {
    // 默認(rèn)入口文件為目錄下的 index.js
    excludeFile = path.join(rootDir, "index.js")
  }
  // 模塊集合
  const modules = {}
  // 獲取目錄下的第一級(jí)子文件為路由文件隊(duì)列
  let filenames = fs.readdirSync(rootDir)
  while (filenames.length) {
    // 路由文件相對(duì)路徑
    const relativeFilePath = filenames.shift()
    // 路由文件絕對(duì)路徑
    const absFilePath = path.join(rootDir, relativeFilePath)
    // 排除入口文件
    if (absFilePath === excludeFile) {
      continue
    }
    if (fs.statSync(absFilePath).isDirectory()) {
      // 是文件夾的情況下，讀取子目錄文件，添加到路由文件隊(duì)列中
      const subFiles = fs.readdirSync(absFilePath).map(v => path.join(absFilePath.replace(rootDir, ""), v))
      filenames = filenames.concat(subFiles)
    } else {
      // 是文件的情況下，將文件路徑轉(zhuǎn)化為路由前綴，添加路由前綴和路由模塊到模塊集合中
      const prefix = transform(relativeFilePath)
      modules[prefix] = require(absFilePath)
    }
  }
  return modules
}

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

const scanResult = scanDirModules(__dirname, __filename)
for (const prefix in scanResult) {
  if (scanResult.hasOwnProperty(prefix)) {
    router.use(prefix, scanResult[prefix])
  }
}

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

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

這樣就完成了路由前綴的自動(dòng)生成和路由自動(dòng)掛載了。

效果展示：

我們將routes/sub/a.js的內(nèi)容定為：

// routes/sub/a.js
const express = require("express")
const router = express.Router()

router.get("/", function (req, res) {
  res.send("sub/a/")
})

module.exports = router

掛載效果：

訪問(wèn)結(jié)果：

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

后者可以使用自定義導(dǎo)出對(duì)象和掛載方式的方法來(lái)解決，但是前者我暫時(shí)沒(méi)有什么好的解決方法，因此我們來(lái)看一下之前提到的另一種自動(dòng)化方法。

這種方法的掃描思路和前一種方法相似，不同之處在于，在編寫(xiě)路由文件的時(shí)候，我們需要寫(xiě)完整路由的路徑，例如：

// 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

掃描部分的代碼修改為：

exports.scanDirModulesWithoutPrefix = function scanDirModulesWithoutPrefix (rootDir, excludeFile) {
  if (!excludeFile) {
    // 默認(rèn)入口文件為目錄下的 index.js
    excludeFile = path.join(rootDir, "index.js")
  }
  const modules = []
  let filenames = fs.readdirSync(rootDir)
  while (filenames.length) {
    // 路由文件相對(duì)路徑
    const relativeFilePath = filenames.shift()
    // 路由文件絕對(duì)路徑
    const absFilePath = path.join(rootDir, relativeFilePath)
    // 排除入口文件
    if (absFilePath === excludeFile) {
      continue
    }
    if (fs.statSync(absFilePath).isDirectory()) {
      // 是文件夾的情況下，讀取子目錄文件，添加到路由文件隊(duì)列中
      const subFiles = fs.readdirSync(absFilePath).map(v => path.join(absFilePath.replace(rootDir, ""), v))
      filenames = filenames.concat(subFiles)
    } else {
      // 是文件的情況下，將模塊添加到模塊數(shù)組中
      modules.push(require(absFilePath))
    }
  }
  return modules
}

路由入口文件修改為：

// 獲取 routes 目錄下所有路由模塊，并掛載到一個(gè)路由上
const routeModules = scanDirModulesWithoutPrefix(__dirname, __filename)
routeModules.forEach(routeModule => {
  router.use(routeModule)
})

掛載效果：

這種方法可以明確的看到路由的完整路徑，在閱讀代碼時(shí)不會(huì)出現(xiàn)因?yàn)閷蛹?jí)過(guò)深而導(dǎo)致出現(xiàn)閱讀困難的情況，但是明顯的缺點(diǎn)就是需要編寫(xiě)大量的路徑相關(guān)代碼，路徑重用性又太低。

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

有，我們可以用JavaScript的裝飾器（Decorator）來(lái)進(jìn)行路由的管理。

裝飾器的思路來(lái)自于Java的MVC框架Spring MVC，在Spring MVC中，路由的編寫(xiě)方式是這樣的：

// 類上的 RequestMapping 注解用來(lái)設(shè)置共通的路徑前綴
@Controller
@RequestMapping("/")
public class SampleController {

  // 方法上的 RequestMapping 注解用來(lái)設(shè)置剩余路徑和路由方法
  @RequestMapping("/", method=RequestMethod.GET)
  public String index() {
    return "Hello World!";
  }

  // GetMapping 注解相當(dāng)于已經(jīng)指定了GET訪問(wèn)方法的 RequestMapping
  @GetMapping("/1")
  public String index1() {
    return "Hello World!1";
  }
}

在ES6之后，在js中編寫(xiě)類已經(jīng)變得非常容易，我們也可以仿照 Spring MVC 的路由方式來(lái)管理express中的路由。

關(guān)于JavaScript的裝飾器，可以參考這兩篇文章：

探尋 ECMAScript 中的裝飾器 Decorator

JS 裝飾器（Decorator）場(chǎng)景實(shí)戰(zhàn)

在進(jìn)行實(shí)現(xiàn)之前，我們先簡(jiǎn)單整理一下實(shí)現(xiàn)的思路。我的思路是，為了閱讀方便，每一個(gè)路由文件包括一個(gè)類（Controller），每個(gè)類上有兩種裝飾器。

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

而第二種裝飾器則是添加到類中的方法上的，用來(lái)將方法綁定到一個(gè)指定的HTTP請(qǐng)求方法和路由路徑上。

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

除了編寫(xiě)裝飾器本身之外，我們還需要一個(gè)注冊(cè)函數(shù)，用來(lái)指定需要綁定的express對(duì)象和需要掃描的路由目錄。

為了使用裝飾器這個(gè)特性，我們需要使用一些babel插件：

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

編寫(xiě).babelrc文件：

{
  "presets": [
    "env"
  ],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

在app.js中注冊(cè)babel-register：

require("babel-register")

注冊(cè)函數(shù)的功能較為簡(jiǎn)單，因此我們先來(lái)編寫(xiě)注冊(cè)函數(shù)：

let app = null

/**
 * 掃描并引入目錄下的模塊
 *
 * @private
 * @param {string} routesDir 路由目錄
 */
function scanDirModules (routesDir) {
  if (!fs.existsSync(routesDir)) {
    return
  }
  let filenames = fs.readdirSync(routesDir)
  while (filenames.length) {
    // 路由文件相對(duì)路徑
    const relativeFilePath = filenames.shift()
    // 路由文件絕對(duì)路徑
    const absFilePath = path.join(routesDir, relativeFilePath)
    if (fs.statSync(absFilePath).isDirectory()) {
      // 是文件夾的情況下，讀取子目錄文件，添加到路由文件隊(duì)列中
      const subFiles = fs.readdirSync(absFilePath).map(v => path.join(absFilePath.replace(routesDir, ""), v))
      filenames = filenames.concat(subFiles)
    } else {
      // require路由文件
      require(absFilePath)
    }
  }
}

/**
 * 注冊(cè)express服務(wù)器
 *
 * @param {Object} options 注冊(cè)選項(xiàng)
 * @param {express.Application} options.app express服務(wù)器對(duì)象
 * @param {string|Array} options.routesDir 要掃描的路由目錄
 */
function register (options) {
  app = options.app
  // 支持掃描多個(gè)路由目錄
  const routesDirs = typeof options.routesDir === "string" ? [options.routesDir] : options.routesDir
  routesDirs.forEach(dir => {
    scanDirModules(dir)
  })
}

通過(guò)獲取express的app對(duì)象，將其注冊(cè)到文件的頂級(jí)變量app，可以讓其余的裝飾器函數(shù)訪問(wèn)到app對(duì)象從而完成路由注冊(cè)。

routesDir可以是字符串也可以是字符串的數(shù)組，代表了需要掃描的路由目錄，將其轉(zhuǎn)化為字符串?dāng)?shù)組后依次進(jìn)行掃描。

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

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

在方法裝飾器的編寫(xiě)上，由于裝飾器的行為相似，因此我們可以編寫(xiě)一個(gè)抽象函數(shù)，用來(lái)生成不同HTTP請(qǐng)求方法的不同裝飾器。

抽象函數(shù)的具體代碼為：

/**
 * 生成對(duì)應(yīng)HTTP請(qǐng)求方法的裝飾器
 *
 * @param {string} httpMethod 請(qǐng)求方法
 * @param {string|RegExp} pattern 請(qǐng)求路徑
 * @param {Array} middlewares 中間件數(shù)組
 * @returns {MethodDecorator}
 */
function generateMethodDecorator (httpMethod, pattern, middlewares) {
  return function (target, methodName, descriptor) {
    if (!target._routeMethods) {
      target._routeMethods = {}
    }
    // 為自定義方法生成對(duì)應(yīng)的方法存儲(chǔ)對(duì)象
    if (!target._routeMethods[httpMethod]) {
      target._routeMethods[httpMethod] = {}
    }
    target._routeMethods[httpMethod][pattern] = [...middlewares, target[methodName]]
    return descriptor
  }
}

這里的target表示類的原型對(duì)象，methodName則是需要裝飾的類方法的名稱，我們將類方法和它的前置中間件組成一個(gè)數(shù)組，存儲(chǔ)到類原型對(duì)象上的_routeMethods屬性中，以便類裝飾器調(diào)用。

要生成一個(gè)HTTP請(qǐng)求方法的裝飾器，只需要調(diào)用這個(gè)生成函數(shù)即可。

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

/**
 * GET 方法裝飾器
 *
 * @param {string|RegExp} pattern 路由路徑
 * @param {Array} middlewares 中間件數(shù)組
 * @returns {MethodDecorator}
 */
function Get (pattern, ...middlewares) {
  return generateMethodDecorator("get", pattern, middlewares)
}

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

/**
 * Router 類裝飾器，使用在 class 上，生成一個(gè)帶有共通前綴和中間件的路由
 *
 * @param {string|RegExp} prefix 路由前綴
 * @param {express.RouterOptions} routerOption 路由選項(xiàng)
 * @param {Array} middlewares 中間件數(shù)組
 * @returns {ClassDecorator}
 */
function Router (prefix, routerOption, ...middlewares) {
  // 判斷是否有路由選項(xiàng)，沒(méi)有則當(dāng)做中間件來(lái)使用
  if (typeof routerOption === "function") {
    middlewares.unshift(routerOption)
    routerOption = undefined
  }

  /**
   * 為類生成一個(gè) router,
   * 該裝飾器會(huì)在所有方法裝飾器執(zhí)行完后才執(zhí)行
   *
   * @param {Function} target 路由類對(duì)象
   */
  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是類對(duì)象，當(dāng)裝飾器對(duì)類進(jìn)行處理時(shí)，我們生成一個(gè)新的express路由對(duì)象，將放置在類對(duì)象原型上的_routeMethods屬性進(jìn)行遍歷，獲取到對(duì)應(yīng)的路由方法、路由路徑和路由處理函數(shù)，并掛載到這個(gè)路由對(duì)象上。

需要注意，類裝飾器的處理會(huì)放在方法裝飾器之后進(jìn)行，因此我們不能直接在方法裝飾器上進(jìn)行掛載，需要將其存儲(chǔ)起來(lái)，在類裝飾器上完成掛載工作。

我們的路由文件也需要進(jìn)行大幅度的改動(dòng)，將其轉(zhuǎn)化為下面類似的形式：

// routes/sub/a.js
// Router 和 Get 裝飾器從你的裝飾器文件中引入
@Router("/sub/a")
class SubAController {
  @Get("/")
  index (req, res, next) {
    res.send("sub/a/")
  }
}

module.exports = SubAController

用裝飾器編寫(xiě)路由的相關(guān)代碼我已經(jīng)多帶帶建立了一個(gè)github倉(cāng)庫(kù)，并發(fā)布成了一個(gè)npm包——express-derouter，歡迎各位star。

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

文章博客地址：關(guān)于 express 路由管理的幾種自動(dòng)化方法