前言
在Spring中Controller長這樣
@Controller public class HelloController{ @RequestMapping("/hello") String hello() { return "Hello World"; } }
還有Python上的Flask框架
@app.route("/hello") def hello(): return "Hello World"
兩者都用decorator來控制路由,這樣寫的好處是更簡潔、更優雅、更清晰。
反觀Express或Koa上的路由
router.get('/hello', async ctx => { ctx.body = 'Hello World' })
完全差了一個檔次
JS從ES6開始就有Decorator了,只是瀏覽器和Node都還沒有支持。需要用babel-plugin-transform-decorators-legacy轉義。
Decorator基本原理
首先需要明確兩個概念:
Decorator基本原理:
@Controller class Hello{ } // 等同于 Controller(Hello)
Controller是個普通函數,target為修飾的類或方法
// Decorator不傳參 function Controller(target) { } // Decorator傳參 function Controller(params) { return function (target) { } }
如果Decorator是傳參的,即使params有默認值,在調用時必須帶上括號,即:
@Controller() class Hello{ }
如何在Koa中使用Decorator
我們可以對koa-router中間件進行包裝
先回顧一下koa-router基本使用方法:
var Koa = require('koa'); var Router = require('koa-router'); var app = new Koa(); var router = new Router(); router.get('/', async (ctx, next) => { // ctx.router available }); app .use(router.routes()) .use(router.allowedMethods());
再想象一下最終目標
@Controller({prefix: '/hello'}) class HelloController{ @Request({url: '/', method: RequestMethod.GET}) async hello(ctx) { ctx.body = 'Hello World' } }
類內部方法的裝飾器是優先執行的,我們需要對方法重新定義
function Request({url, method}) { return function (target, name, descriptor) { let fn = descriptor.value descriptor.value = (router) => { router[method](url, async(ctx, next) => { await fn(ctx, next) }) } } }
對RequestMethod進行格式統一
const RequestMethod = { GET: 'get', POST: 'post', PUT: 'put', DELETE: 'delete' }
Controller裝飾器需將Request方法添加到Router實例并返回Router實例
import KoaRouter from 'koa-router' function Controller({prefix}) { let router = new KoaRouter() if (prefix) { router.prefix(prefix) } return function (target) { let reqList = Object.getOwnPropertyDescriptors(target.prototype) for (let v in reqList) { // 排除類的構造方法 if (v !== 'constructor') { let fn = reqList[v].value fn(router) } } return router } }
至此,裝飾器基本功能就完成了,基本使用方法為:
import {Controller, Request, RequestMethod} from './decorator' @Controller({prefix: '/hello'}) export default class HelloController{ @Request({url: '/', method: RequestMethod.GET}) async hello(ctx) { ctx.body = 'Hello World' } }
在App實例中同路由一樣use即可。
總結
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com