1.0.10 • Published 5 years ago

@fvaa/monitor v1.0.10

Weekly downloads
18
License
MIT
Repository
github
Last release
5 years ago

@fvaa/monitor

通用的路由监听处理架构,它主要分两中模式:

  • hashchange 传统hash路由模式
  • popstate 基于html5路由模式

它能够快速为你创建路由监听,省去您的工作时间,同时保障质量和效率。

Usage

从npm下载模块:

npm i @fvaa/monitor

在代码中使用

import Monitor, { Request, Response } from '@fvaa/monitor';

// create instance
const createServer = Monitor({
  // prefix: '/api',
  event: 'hashchange'
});

// create server 
// and listen url redirection maps on start time.
createServer(
  async (req: Request, res: Response) => console.log(req, res)
).listen({
  '/': '/abc'
});

Monitor.options

  • prefix 指定当前路由前缀
  • event 您期望使用的监听事件名 hashchangepopstate 默认:hashchange
  • error 错误处理函数

错误处理函数可以这样这样写

// ts type: error?(e: Error, req: Request, res: Response): void
Monitor({
  error(err, req, res) {
    console.log(err, req, res);
  }
})

createServer

它用来处理请求变化时候的响应函数。它的参数即回调函数,每个回调函数必须是async函数。我们来看下它的ts定义:

export type AsyncRequestPromiseLike<T> = (req: Request, res: Response) => Promise<T>;
// ...
(...fns: Array<AsyncRequestPromiseLike<void>>) => MonitorContext

所以我们可以这样使用

createServer(
  async (req: Request, res: Response) => console.log(1, req, res),
  async (req: Request, res: Response) => console.log(2, req, res),
  async (req: Request, res: Response) => console.log(3, req, res),
  ...
)

listen

在初始化页面的时候,我们可以通过定义一个redirection map来转接路由地址:

createServer(...).listen({
  '/': '/abc',
  '/test': '/yyyyyy/123'
})

当我们当前的URL在/的时候,自动转换为/abc路由;当我们当前的URL在/test的时候,自动转换为/yyyyyy/123路由。

注意,此功能值在页面初始化时候有效。

Response

我们提供3中交互方法:

  • redirect(url:string) 为浏览器历史记录添加一条数据
  • replace(url:string) 替换当前浏览器历史记录为新记录
  • reload() 重载历史记录。
await res.redirect('/test');
await res.replace('/test');
await res.reload();

License

MIT

Copyright (c) 2018-present, yunjie (Evio) shen

1.0.10

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.0

5 years ago