關於 express 路由管理的幾種自動化方法

時間  2019-11-07
標籤 關於 express 路由 管理 幾種 自動化 方法 欄目 系統網絡 简体版
原文   原文鏈接

前言

咱們平時在使用express寫代碼的過程當中，會根據類別，將路由分爲多個不一樣的文件，而後在項目的入口文件（例如app.js）中將其依次掛載，例如：java

const index = require('./routes/index')
const user = require('./routes/user')
// ...其餘路由文件

app.use('/', index)
app.use('/user', user)
// ...掛載其餘路由

可是當路由文件過多時，這樣寫會多出不少重複性的代碼，並且當我添加一個新的路由模塊時，除了編寫路由文件自己，還須要到app.js入口文件中將新路由文件掛載上去，不夠靈活，所以，咱們須要想一些辦法來管理咱們的路由，使其可以自動化，免除頻繁修改入口文件的操做。git

管理思路

咱們的項目目錄主要是這樣的：github

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

首先，咱們來看一下，express的路由管理主要由三部分組成，路由方法（method）、路由路徑（path）和路由處理器（handle），通常狀況下，路由方法和路由處理器是由路由文件本身來管理，在一個路由文件中，咱們常用這樣的寫法：express

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

而後在入口文件中添加上共通的路由前綴：npm

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

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

管理實例

自動生成前綴

咱們經過掃描項目目錄，能夠將文件在項目中的路徑轉化爲express的路由路徑模式，自動生成路由前綴，例如路由文件routes/sub/a.js就會爲轉化成路由前綴/sub/a，路由文件a.js中只要編寫/sub/a後面的路徑部分便可。數組

項目目錄爲：bash

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

主要的實現代碼爲：服務器

// 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文件中引入）：babel

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

在app.js入口文件中只須要將全部路由相關代碼改爲一句：

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

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

效果展現：

咱們將routes/sub/a.js的內容定爲：

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

訪問結果：

訪問結果1

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

後者可使用自定義導出對象和掛載方式的方法來解決，可是前者我暫時沒有什麼好的解決方法，所以咱們來看一下以前提到的另外一種自動化方法。

直接掛載到根路徑

這種方法的掃描思路和前一種方法類似，不一樣之處在於，在編寫路由文件的時候，咱們須要寫完整路由的路徑，例如：

// 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) {
    // 默認入口文件爲目錄下的 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
}

路由入口文件修改成：

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

掛載效果：

路由掛載2

這種方法能夠明確的看到路由的完整路徑，在閱讀代碼時不會出現由於層級過深而致使出現閱讀困難的狀況，可是明顯的缺點就是須要編寫大量的路徑相關代碼，路徑重用性又過低。

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

有，咱們能夠用JavaScript的裝飾器（Decorator）來進行路由的管理。

裝飾器實現路由管理

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

// 類上的 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插件：

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

編寫.babelrc文件：

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

在app.js中註冊babel-register：

require('babel-register')

註冊函數編寫

註冊函數的功能較爲簡單，所以咱們先來編寫註冊函數：

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<string>} 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請求方法的不一樣裝飾器。

抽象函數的具體代碼爲：

/**
 * 生成對應HTTP請求方法的裝飾器
 *
 * @param {string} httpMethod 請求方法
 * @param {string|RegExp} pattern 請求路徑
 * @param {Array<Function>} 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方法的裝飾器，則只須要：

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

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

/**
 * Router 類裝飾器，使用在 class 上，生成一個帶有共通前綴和中間件的路由
 *
 * @param {string|RegExp} prefix 路由前綴
 * @param {express.RouterOptions} routerOption 路由選項
 * @param {Array<Function>} 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屬性進行遍歷，獲取到對應的路由方法、路由路徑和路由處理函數，並掛載到這個路由對象上。

須要注意，類裝飾器的處理會放在方法裝飾器以後進行，所以咱們不能直接在方法裝飾器上進行掛載，須要將其存儲起來，在類裝飾器上完成掛載工做。

編寫路由文件

咱們的路由文件也須要進行大幅度的改動，將其轉化爲下面相似的形式：

// 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，相信它應該更能知足你的需求。

文章博客地址：關於 express 路由管理的幾種自動化方法

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程