黄金搭档 -- JS 装饰器(Decorator)与Node.js路由

2019-05-15 admin

很多面对象语言中都有装饰器(Decorator)函数的概念,Javascript语言的ES7标准中也提及了Decorator,个人认为装饰器是和async/await一样让人兴奋的的变化。正如其“装饰器”的叫法所表达的,他可以对一些对象进行装饰包装然后返回一个被包装过的对象,可以装饰的对象包括:类,属性,方法等。 Node.js目前已经支持了async/await语法,但decorator还需要babel插件支持,具体的配置不在叙述。(截至发稿时间2018-12-29) 下面是引用的关于decorator语法的一个示例:

@testable
class Person {
  @readonly
  @nonenumerable
  name() { return `${this.first} ${this.last}` }
}

从上面代码中,我们一眼就能看出,Person类是可测试的,而name方法是只读和不可枚举的。

关于 Decorator 的详细介绍参见下面两篇文章:

  1. 阮一峰《ECMAScript 6 入门》 – Decorator
  2. 知乎 – 《Decorators in ES7》

期望效果

关于Node.js中的路由,大家应该都很熟悉了,无论是在自己写的http/https服务中,还是在ExpressKoa等框架中。我们要为路由提供请求的URL和其他需要的GETPOST等参数,随后路由需要根据这些数据来执行相应的代码。 关于Decorator和路由的结合我们这次希望写出类似下面的代码:

@Controller('/tags')
export default class TagRouter {
  @Get(':/id')
  @Login
  @admin(['developer', 'adminWebsite'])
  @require(['phone', 'password'])
  @Log
  async getTagDetail(ctx, next) {
    //...
  }
}

关于这段代码的解释: 第一行,通过Controller装饰TagRouter类,为类下的路由函数添加统一路径前缀/tags。 第二行,创建并导出TagRouter类。 第三行,通过装饰器为getTagDetail方法添加路径和请求方法。 第四行,通过装饰器限制发起请求需要用户登录。 第五行,通过装饰器限制发起请求的用户必须拥有开发者或者网站管理员权限。 第六行,通过装饰器检查请求参数必须包含phonepassword字段。 第七行,通过装饰器为请求打印log。 第八行,路由真正执行的方法。

这样不仅简化、规范化了路由的写法,减少了代码的冗余和错误,还使代码含义一目了然,无需注释也能通俗易懂,便于维护、交接等事宜。

具体实现

下面就着手写一个关于movies的路由具体实例,示例采用koa2 + koa-router为基础组织代码。

文件路径:/server/routers/movies.js

import mongoose from 'mongoose';

import { Controller, Get, Log } from '../decorator/router';
import { getAllMovies, getSingleMovie, getRelativeMovies } from '../service/movie';

@Controller('/movies')
export default class MovieRouter {
  @Get('/all')
  @Log
  async getMovieList(ctx, next) {
    const type = ctx.query.type;
    const year = ctx.query.year;

    const movies = await getAllMovies(type, year);

    ctx.body = {
      data: movies,
      success: true,
    };
  }

  @Get('/detail/:id')
  @Log
  async getMovieDetail(ctx, next) {
    const id = ctx.params.id;
    const movie = await getSingleMovie(id);
    const relativeMovies = await getRelativeMovies(movie);

    ctx.body = {
      data: {
        movie,
        relativeMovies,
      },
      success: true,
    }
  }
}

代码中Controller为路由添加统一前缀,Get指定请求方法和路径,Log打印日志,参考上面的预期示例。

关于mongodb以及获取数据的代码这里就不贴出了,毕竟只是示例而已,大家可以根据自己的资源,自行修改为自己的逻辑。

重点我们看一下,GET /movies/all以及GET /movies//detail/:id这两个路由的装饰器实现。

文件路径:/server/decorator/router.js

import KoaRouter from 'koa-router';
import { resolve } from 'path';
import glob from 'glob'; // 使用shell模式匹配文件

export class Route {
  constructor(app, routesPath) {
    this.app = app;
    this.router = new KoaRouter();
    this.routesPath = routesPath;
  }

  init = () => {
    const {app, router, routesPath} = this;
    glob.sync(resolve(routesPath, './*.js')).forEach(require);
    // 具体处理逻辑
    app.use(router.routes());
    app.use(router.allowedMethods());
  }
};

  • 首先,导出一个Route类,提供给外部使用,Route类的构造函数接收两个参数approutesPathapp即为koa2实例,routesPath为路由文件路径,如上面movies.jsroutesPath/server/routers/
  • 然后,提供一个初始化函数init,初始化逻辑中。引用所有routesPath下的路由,并use路由实例。

这样的话我们就可以在外部这样调用Route类:

import {Route} from '../decorator/router';
import {resolve} from 'path';

export const router = (app) => {
  const routesPath = resolve(__dirname, '../routes');
  const instance = new Route(app, routesPath);

  instance.init();
}

好了,基本框架搭好了,来看具体逻辑的实现。

先补充完init方法:

文件路径:/server/decorator/router.js

  const pathPrefix = Symbol('pathPrefix');

  init = () => {
    const {app, router, routesPath} = this;
    glob.sync(resolve(routesPath, './*.js')).forEach(require);

    R.forEach( // R为'ramda'方法库,类似'lodash'
      ({target, method, path, callback}) => {
        const prefix = resolvePath(target[pathPrefix]);
        router[method](prefix + path, ...callback);
      }
    )(routeMap)

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

为了加载路由,需要一个路由列表routeMap,然后遍历routeMap,挂载路由,init工作就完成了。 下边的重点就是向routeMap中塞入数据,这里每个路由对象采用object的形式有四个key,分别为target, method, path, callback

target即为装饰器函数的target(这里主要为了获取路由路径的前缀),method为请求方法,path为请求路径,callback为请求执行的函数。

下边是设置路由路径前缀和塞入routeMap内容的装饰器函数:

export const Controller = path => (target, key, descriptor) => {
  target.prototype[pathPrefix] = path;
  return descriptor;
}

export const setRouter = method => path => (target, key, descriptor) => {
  routeMap.push({
    target,
    method,
    path: resolvePath(path),
    callback: changeToArr(target[key]),
  });
  return descriptor;
}
  • Controller就不多说了,就是挂载前缀路径到类的原型对象上,这里需要注意的是Controller作用于类,所以target是被修饰的类本身。
  • setRouter函数也很简单把接受到的路径格式化处理,把路由处理函数包装成数组,之后与targetmethod一起构造城对象塞入routeMap

这里有两个辅助函数,简单贴下代码看下:

import R from 'ramda'; // 类似'lodash'的方法库

// 如果路径是以/开头直接返回,否则补充/后返回
const resolvePath = R.unless(
  R.startsWith('/'),
  R.curryN(2, R.concat)('/'),
);

// 如果参数是函数直接返回,否则包装成数组返回
const changeToArr = R.unless(
  R.is(Array),
  R.of,
);

接下来是getpostputdelete方法的具体实现,其实就是调用setRouter就行了:

export const Get = setRouter('get');

export const Post = setRouter('post');

export const Put = setRouter('put');

export const Delete = setRouter('delete');

至此,主要的功能就全部实现了,接下来是一些辅助Decorator,大家可以参考和使用core-decorators.js,它是一个第三方模块,提供了几个常见的修饰器,通过它也可以更好地理解修饰器。

下面以Log为示例,实现一个辅助Decorator,其他Decorator大家自己发挥:

let logTimes = 0;

export const convert = middleware => (target, key, descriptor) => {
  target[key] = R.compose(
    R.concat(
      changeToArr(middleware)
    ),
    changeToArr,
  )(target[key]);

  return descriptor;
}

export const Log = convert(async (ctx, next) => {
  logTimes++;
  console.time(`${logTimes}: ${ctx.method} - ${ctx.url}`);
  await next();
  console.timeEnd(`${logTimes}: ${ctx.method} - ${ctx.url}`);
})

convert是一个辅助函数,首先把普通函数转换成数组,然后跟其他中间件函数合并。此辅助函数也可用于其他辅助Decorator。

好了,到此文章就结束了,大家多交流,本人github 下一篇:分享koa2源码解读

最后贴出关键的/server/decorator/router.js的完整代码

import R from 'ramda';
import KoaRouter from 'koa-router';
import glob from 'glob';
import {resolve} from 'path';

const pathPrefix = Symbol('pathPrefix')
const routeMap = [];
let logTimes = 0;

const resolvePath = R.unless(
  R.startsWith('/'),
  R.curryN(2, R.concat)('/'),
);

const changeToArr = R.unless(
  R.is(Array),
  R.of,
);

export class Route {
  constructor(app, routesPath) {
    this.app = app;
    this.router = new KoaRouter();
    this.routesPath = routesPath;
  }

  init = () => {
    const {app, router, routesPath} = this;
    glob.sync(resolve(routesPath, './*.js')).forEach(require);

    R.forEach(
      ({target, method, path, callback}) => {
        const prefix = resolvePath(target[pathPrefix]);
        router[method](prefix + path, ...callback);
      }
    )(routeMap)
    app.use(router.routes());
    app.use(router.allowedMethods());
  }
};

export const Controller = path => (target, key, descriptor) => {
  console.log(target);
  target.prototype[pathPrefix] = path;
  return descriptor;
}

export const setRouter = method => path => (target, key, descriptor) => {
  console.log('setRouter');
  routeMap.push({
    target,
    method,
    path: resolvePath(path),
    callback: changeToArr(target[key]),
  });
  return descriptor;
}

export const Get = setRouter('get');

export const Post = setRouter('post');

export const Put = setRouter('put');

export const Delete = setRouter('delete');

export const convert = middleware => (target, key, descriptor) => {
  target[key] = R.compose(
    R.concat(
      changeToArr(middleware)
    ),
    changeToArr,
  )(target[key]);

  return descriptor;
}

export const Log = convert(async (ctx, next) => {
  logTimes++;
  console.time(`${logTimes}: ${ctx.method} - ${ctx.url}`);
  await next();
  console.timeEnd(`${logTimes}: ${ctx.method} - ${ctx.url}`);
})

[转载]原文链接:https://segmentfault.com/a/1190000019188851

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65034.html

文章标题:黄金搭档 -- JS 装饰器(Decorator)与Node.js路由

相关文章
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"&gt...
2017-02-17
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
回到顶部