摘要：前言今天閑來(lái)時(shí)看了看中的新標(biāo)準(zhǔn)之一，裝飾器。過(guò)程中忽覺(jué)它和中的注解有一些類(lèi)似之處，并且當(dāng)前版本的中已經(jīng)支持它了，所以，就動(dòng)手在一個(gè)應(yīng)用中嘗鮮初體驗(yàn)了一番。另外，由于裝飾器目前還是中的一個(gè)提案，其中具體細(xì)節(jié)可能還會(huì)更改。

今天閑來(lái)時(shí)看了看ES7中的新標(biāo)準(zhǔn)之一，裝飾器（Decorator）。過(guò)程中忽覺(jué)它和Java中的注解有一些類(lèi)似之處，并且當(dāng)前版本的TypeScript中已經(jīng)支持它了，所以，就動(dòng)手在一個(gè)Web應(yīng)用Demo中嘗鮮初體驗(yàn)了一番。

（裝飾器中文簡(jiǎn)介：這里）

最終效果：

// UserController.ts
"use strict"
import {router, log, validateQuery} from "./decorators"
import {IContext} from "koa"

export class UserController {
  @router({
    method: "get",
    path: "/user/login"
  })
  @validateQuery("username", "string")
  @log
  async login(ctx: IContext, next: Function) {
    ctx.body = "login!"
  }

  @router({
    method: "get",
    path: "/user/logout"
  })
  async logout(ctx: IContext, next: Function) {
    ctx.body = "logout!"
  }
}

由于我們需要一個(gè)集中存儲(chǔ)和掛載這些被裝飾的路由的地方。所以，我們先來(lái)給koa包個(gè)外殼：

// Cover.ts
"use strict"
import * as Koa from "koa"
const router = require("koa-router")()

class Cover {
  static __DecoratedRouters: Map<{target: any, method: string, path: string}, Function | Function[]> = new Map()
  private router: any
  private app: Koa

  constructor() {
    this.app = new Koa()
    this.router = router
    this.app.on("error", (err) => {
      if (err.status && err.status < 500) return
      console.error(err)
    })
  }

  registerRouters() {
    // ...
  }

  listen(port: number) {
    this.app.listen(port)
  }
}

export default Cover

其中，__DecoratedRouters是我們存儲(chǔ)被修飾后的路由的地方，而registerRouters則是真實(shí)掛載它們的方法。

現(xiàn)在實(shí)現(xiàn)下裝飾器，來(lái)把路由信息和處理函數(shù)保存起來(lái)：

// decorators.ts
"use strict"
import Cover from "./Cover"
import {IContext} from "koa"

export function router (config: {path: string, method: string}) {
  return (target: any, name: string, value: PropertyDescriptor) => {
    Cover.__DecoratedRouters({
      target: target,
      path: config.path,
      method: config.method
    }, target[name])
  }
}

感覺(jué)TypeScript中的類(lèi)型已經(jīng)把代碼解釋得差不多了...

最后實(shí)現(xiàn)一下把所有存起來(lái)的路由掛載上的方法，就大功告成了：

// Cover.ts
"use strict"
import * as Koa from "koa"
const router = require("koa-router")()

class Cover {
  // ...

  registerRouters() {
    for (let [config, controller] of Cover.__DecoratedRouters) {
      let controllers = Array.isArray(controller) ? controller : [controller]
      controllers.forEach((controller) => this.router[config.method](config.path, controller))
    }
    this.app.use(this.router.routes())
    this.app.use(this.router.allowedMethods())
  }

  // ...
}

export default Cover

// UserController.ts
"use strict"
import {router} from "./decorators"
import {IContext} from "koa"

export class UserController {
  @router({
    method: "get",
    path: "/user/login"
  })
  async login(ctx: IContext, next: Function) {
    ctx.body = "login!"
  }

  @router({
    method: "get",
    path: "/user/logout"
  })
  async logout(ctx: IContext, next: Function) {
    ctx.body = "logout!"
  }
}

用起來(lái)：

// app.ts
"use strict"
import Cover from "./Cover"
export * from "./UserController"

const app = new Cover()
app.registerRouters()

app.listen(3000)

寫(xiě)第三行代碼：export * from "./UserController" 的意圖為空?qǐng)?zhí)行一下該模塊內(nèi)的代碼（可否有更優(yōu)雅的辦法？）。

普通的koa中間件裝飾器則更為簡(jiǎn)單，不需額外的存儲(chǔ)掛載過(guò)程，直接定義就好，以下為兩個(gè)簡(jiǎn)單的中間件裝飾器：

// decorators.ts
"use strict"
import Cover from "./Cover"
import {IContext} from "koa"

export function validateQuery (name, type) {
  return (target: any, name: string, value: PropertyDescriptor) => {
    if (!Array.isArray(target[name])) target[name] = [target[name]]
    target[name].splice(target[name].length - 1, 0, validate)
  }

  async function validate (ctx: IContext, next: Function) {
    if (typeof ctx.query[name] !== type) ctx.throw(400, `${name}"s type should be ${type}"`)
    await next()
  }
}

export function log (target: any, name: string, value: PropertyDescriptor) {
  if (!Array.isArray(target[name])) target[name] = [target[name]]
  target[name].splice(target[name].length - 1, 0, middleware)

  async function middleware (ctx: IContext, next: Function) {
    let start = Date.now()
    ctx.state.log = {
      path: ctx.path
    }

    try {
      await next()
    } catch (err) {
      if (err.status && err.status < 500) {
        Object.assign(ctx.state.log, {
          time: Date.now() - start,
          status: err.status,
          message: err.message
        })
        console.log(ctx.state.log)
      }
      throw err
    }

    let onEnd = done.bind(ctx)

    ctx.res.once("finish", onEnd)
    ctx.res.once("close", onEnd)

    function done () {
      ctx.res.removeListener("finish", onEnd)
      ctx.res.removeListener("close", onEnd)

      Object.assign(ctx.state.log, {
        time: Date.now() - start,
        status: ctx.status
      })
      console.log(ctx.state.log)
    }
  }
}

裝飾上：

// UserController.ts
"use strict"
import {router, log, validateQuery} from "./decorators"
import {IContext} from "koa"

export class UserController {
  @router({
    method: "get",
    path: "/user/login"
  })
  @validateQuery("username", "string")
  @log
  async login(ctx: IContext, next: Function) {
    ctx.body = "login!"
  }

  // ...
}

一個(gè)需要注意的地方是，中間的經(jīng)過(guò)順序是由下至上的，故上面的例子中，會(huì)先進(jìn)入log中間件，然后是validateQuery。

以上例子僅是初體驗(yàn)時(shí)寫(xiě)的Demo代碼，部分地方可能略有粗糙。另外，由于裝飾器目前還是ES7中的一個(gè)提案，其中具體細(xì)節(jié)可能還會(huì)更改。個(gè)人感覺(jué)來(lái)說(shuō)，它的確可以幫助代碼在某種程度上更為簡(jiǎn)潔清晰。不過(guò)，由于它可以通過(guò)target參數(shù)直接取得被修飾類(lèi)本身，在TypeScript中可能還好，若在JavaScript里，如果大量混合使用各種第三方裝飾器，一個(gè)類(lèi)是否可能會(huì)被改的面目全非？最佳實(shí)踐可能還有待大家的一同探索。