你可能會用到的一個路由介面卡

謙龍發表於2019-02-16
原文網址 : https://flycode.co/archives/83704
路由

前言

此時狀態有點像上學時寫作文，開篇總是"拉"不出來，憋的難受。

原文地址

原始碼地址

憋的難受

從背景出發

前後端分離後，前端童鞋會需要處理一些node層的工作，比如模板渲染、介面轉發、部分業務邏輯等，比較常用的框架有koa、koa-router等。

現在我們需要實現這樣一個需求：

  1. 使用者訪問/fe的時候，頁面展示hello fe
  2. 使用者訪問/backend的時候，頁面展示hello backend

你是不是在想，這需求俺根本不用koa、koa-router，原生的node模組就可以搞定。

const http = require('http')
const url = require('url')
const PORT = 3000

http.createServer((req, res) => {
  let { pathname } = url.parse(req.url)
  let str = 'hello'

  if (pathname === '/fe') {
    str += ' fe'
  } else if (pathname === '/backend') {
    str += ' backend'
  }

  res.end(str)
}).listen(PORT, () => {
  console.log(`app start at: ${PORT}`)
})


複製程式碼

確實是，對於很簡單的需求，用上框架似乎有點浪費，但是對於以上的實現，也有缺點存在，比如

  1. 需要我們自己去解析路徑。
  2. 路徑的解析和邏輯的書寫耦合在一塊。如果未來有更多更復雜的需求需要實現，那就gg了。

所以接下來我們來試試用koa和koa-router怎麼實現

app.js

const Koa = require('koa')
const KoaRouter = require('koa-router')

const app = new Koa()
const router = new KoaRouter()
const PORT = 3000

router.get('/fe', (ctx) => {
  ctx.body = 'hello fe'
})

router.get('/backend', (ctx) => {
  ctx.body = 'hello backend'
})

app.use(router.routes())
app.use(router.allowedMethods())

app.listen(PORT, () => {
  console.log(`app start at: ${PORT}`)
})


複製程式碼

通過上面的處理，路徑的解析倒是給koa-router處理了，但是整體的寫法還是有些問題。

  1. 匿名函式的寫法沒有辦法複用
  2. 路由配置和邏輯處理在一個檔案中，沒有分離，專案一大起來，同樣是件麻煩事。

接下來我們再優化一下,先看一下整體的目錄結構

├──app.js // 應用入口
├──controller // 邏輯處理,分模組
│   ├──hello.js
│   ├──aaaaa.js
├──middleware // 中介軟體統一註冊
│   ├──index.js
├──routes // 路由配置,可以分模組配置
│   ├──index.js
├──views // 模板配置，分頁面或模組處理，在這個例子中用不上
│   ├──index.html

複製程式碼

預覽一下每個檔案的邏輯

app.js 應用的路口

const Koa = require('koa')
const middleware = require('./middleware')
const app = new Koa()
const PORT = 3000

middleware(app)

app.listen(PORT, () => {
  console.log(`app start at: ${PORT}`)
})

複製程式碼

routes/index.js 路由配置中心

const KoaRouter = require('koa-router')
const router = new KoaRouter()
const koaCompose = require('koa-compose')
const hello = require('../controller/hello')

module.exports = () => {
  router.get('/fe', hello.fe)
  router.get('/backend', hello.backend)

  return koaCompose([ router.routes(), router.allowedMethods() ])
}

複製程式碼

controller/hello.js hello 模組的邏輯

module.exports = {
  fe (ctx) {
    ctx.body = 'hello fe'
  },
  backend (ctx) {
    ctx.body = 'hello backend'
  }
}

複製程式碼

middleware/index.js 中介軟體統一註冊

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

module.exports = (app) => {
  app.use(routes())
}
複製程式碼

寫到這裡你可能心裡有個疑問？

你可能會用到的一個路由介面卡

一個簡單的需求，被這麼一搞看起來複雜了太多，有必要這樣麼？

答案是：有必要，這樣的目錄結構或許不是最合理的，但是路由、控制器、view層等各司其職，各在其位。對於以後的擴充套件有很大的幫助。

不知道大家有沒有注意到路由配置這個地方

routes/index.js 路由配置中心

const KoaRouter = require('koa-router')
const router = new KoaRouter()
const koaCompose = require('koa-compose')
const hello = require('../controller/hello')

module.exports = () => {
  router.get('/fe', hello.fe)
  router.get('/backend', hello.backend)

  return koaCompose([ router.routes(), router.allowedMethods() ])
}

複製程式碼

每個路由對應一個控制器去處理，很分離，很常見啊！！！這似乎也是我們平時在前端寫vue-router或者react-router的常見配置模式。

但是當模組多起來的來時候，這個資料夾就會變成

const KoaRouter = require('koa-router')
const router = new KoaRouter()
const koaCompose = require('koa-compose')
// 下面你需要require各個模組的檔案進來
const hello = require('../controller/hello')
const a = require('../controller/a')
const c = require('../controller/c')

module.exports = () => {
  router.get('/fe', hello.fe)
  router.get('/backend', hello.backend)
  // 配置各個模組的路由以及控制器
  router.get('/a/a', a.a)
  router.post('/a/b', a.b)
  router.get('/a/c', a.c)
  router.get('/a/d', a.d)

  router.get('/c/a', c.c)
  router.post('/c/b', c.b)
  router.get('/c/c', c.c)
  router.get('/c/d', c.d)

  // ... 等等    
  return koaCompose([ router.routes(), router.allowedMethods() ])
}

複製程式碼

有沒有什麼辦法,可以讓我們不用手動引入一個個控制器，再手動的呼叫koa-router的get post等方法去註冊呢？

比如我們只需要做以下配置，就可以完成上面手動配置的功能。

routes/a.js

module.exports = [
  {
    path: '/a/a',
    controller: 'a.a'
  },
  {
    path: '/a/b',
    methods: 'post',
    controller: 'a.b'
  },
  {
    path: '/a/c',
    controller: 'a.c'
  },
  {
    path: '/a/d',
    controller: 'a.d'
  }
]

複製程式碼

routes/c.js

module.exports = [
  {
    path: '/c/a',
    controller: 'c.a'
  },
  {
    path: '/c/b',
    methods: 'post',
    controller: 'c.b'
  },
  {
    path: '/c/c',
    controller: 'c.c'
  },
  {
    path: '/c/d',
    controller: 'c.d'
  }
]

複製程式碼

然後使用pure-koa-router這個模組進行簡單的配置就ok了

const pureKoaRouter = require('pure-koa-router')
const routes = path.join(__dirname, '../routes') // 指定路由
const controllerDir = path.join(__dirname, '../controller') // 指定控制器的根目錄

app.use(pureKoaRouter({
  routes,
  controllerDir
}))

複製程式碼

這樣整個過程我們的關注點都放在路由配置上去，再也不用去手動require一堆的檔案了。

簡單介紹一下上面的配置

{
  path: '/c/b',
  methods: 'post',
  controller: 'c.b'
}

複製程式碼

path: 路徑配置，可以是字串/c/b,也可以是陣列[ '/c/b' ],當然也可以是正規表示式/\c\b/

methods: 指定請求的型別，可以是字串get或者陣列[ 'get', 'post' ]，預設是get方法,

controller: 匹配到路由的邏輯處理方法，c.b 表示controllerDir目錄下的c檔案匯出的b方法，a.b.c表示controllerDir目錄下的/a/b 路徑下的b檔案匯出的c方法

原始碼實現

接下來我們逐步分析一下實現邏輯

可以點選檢視原始碼

整體結構

module.exports = ({ routes = [], controllerDir = '', routerOptions = {} }) => {
  // xxx

  return koaCompose([ router.routes(), router.allowedMethods() ])
})

複製程式碼

pure-koa-router接收

  1. routes
    1. 可以指定路由的檔案目錄，這樣pure-koa-router會去讀取該目錄下所有的檔案 (const routes = path.join(__dirname, '../routes'))
    2. 可以指定具體的檔案，這樣pure-koa-router讀取指定的檔案內容作為路由配置 const routes = path.join(__dirname, '../routes/tasks.js')
    3. 可以直接指定檔案匯出的內容 (const routes = require('../routes/index'))
  2. controllerDir、控制器的根目錄
  3. routerOptions new KoaRouter時候傳入的引數，具體可以看koa-router

這個包執行之後會返回經過koaCompose包裝後的中介軟體，以供koa例項新增。

引數適配

assert(Array.isArray(routes) || typeof routes === 'string', 'routes must be an Array or a String')
assert(fs.existsSync(controllerDir), 'controllerDir must be a file directory')

if (typeof routes === 'string') {
  routes = routes.replace('.js', '')

  if (fs.existsSync(`${routes}.js`) || fs.existsSync(routes)) {
    // 處理傳入的是檔案
    if (fs.existsSync(`${routes}.js`)) {
      routes = require(routes)
    // 處理傳入的目錄  
    } else if (fs.existsSync(routes)) {
      // 讀取目錄中的各個檔案併合並
      routes = fs.readdirSync(routes).reduce((result, fileName) => {
        return result.concat(require(nodePath.join(routes, fileName)))
      }, [])
    }
  } else {
    // routes如果是字串則必須是一個檔案或者目錄的路徑
    throw new Error('routes is not a file or a directory')
  }
}

複製程式碼

路由註冊

不管routes傳入的是檔案還是目錄，又或者是直接匯出的配置的內容最後的結構都是是這樣的

routes內容預覽

[
  // 最基礎的配置
  {
    path: '/test/a',
    methods: 'post',
    controller: 'test.index.a'
  },
  // 多路由對一個控制器
  {
    path: [ '/test/b', '/test/c' ],
    controller: 'test.index.a'
  },
  // 多路由對多控制器
  {
    path: [ '/test/d', '/test/e' ],
    controller: [ 'test.index.a', 'test.index.b' ]
  },
  // 單路由對對控制器
  {
    path: '/test/f',
    controller: [ 'test.index.a', 'test.index.b' ]
  },
  // 正則
  {
    path: /\/test\/\d/,
    controller: 'test.index.c'
  }
]


複製程式碼

主動註冊

let router = new KoaRouter(routerOptions)
let middleware

routes.forEach((routeConfig = {}) => {
  let { path, methods = [ 'get' ], controller } = routeConfig
  // 路由方法型別引數適配
  methods = (Array.isArray(methods) && methods) || [ methods ]
  // 控制器引數適配
  controller = (Array.isArray(controller) && controller) || [ controller ]

  middleware = controller.map((controller) => {
    // 'test.index.c' => [ 'test', 'index', 'c' ]
    let controllerPath = controller.split('.')
    // 方法名稱 c
    let controllerMethod = controllerPath.pop()

    try {
      // 讀取/test/index檔案的c方法
      controllerMethod = require(nodePath.join(controllerDir, controllerPath.join('/')))[ controllerMethod ]
    } catch (error) {
      throw error
    }
    // 對讀取到的controllerMethod進行引數判斷，必須是一個方法
    assert(typeof controllerMethod === 'function', 'koa middleware must be a function')

    return controllerMethod
  })
  // 最後使用router.register進行註冊
  router.register(path, methods, middleware)


複製程式碼

原始碼的實現過程基本就到這裡了。

結尾

pure-koa-router將路由配置和控制器分離開來，使我們將注意力放在路由配置和控制器的實現上。希望對您能有一點點幫助。

原文地址

原始碼地址

相關文章