你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
unbug

使用中间件模式,让代码和 ExpressJS, ReduxJS 一样容易扩展 3个回复 专栏 @ 开源

unbug 发布于 7 月前

ExpressJS 和 ReduxJS 的易扩展性正是得益于应用了中间件的设计模式。如果想在自己平日的项目里使用,可以试试 js-middleware 这个中间件模块,它能使任意对象中间件化,用好中间件能有效解藕代码也易于维护。

js-middleware

Powerful Javascript Middleware Pattern implementation, apply middleweares to any object.
A painless solution to make codes as scalable and maintainable as ReduxJS and ExpressJS.

Links

Overview

Middleware functions are functions that have access to the target function and it's arguments,
and the target object and the next middleware function in the target function cycle.
The next middleware function is commonly denoted by a variable named next.

Middleware functions can perform the following tasks:
- Execute any code. - Make changes to the function's arguments. - End the target function. - Call the next middleware in the stack.

If the current middleware function does not end the target function cycle, it must call next() to pass control to the next middleware function. Otherwise, the target function will be left hanging.

Get started

  1. window.MiddlewareManager is available for browsers by include dist/middleware.min.js file in your HTML.
  <script src="middleware.min.js"></script>
  1. Or install the package
npm install --save js-middleware

and import it in your files

import {MiddlewareManager} from 'js-middleware';

Usages

Basic

We define a Person class.

// the target object
class Person {
  // the target function
  walk(step) {
    this.step = step;
  }

  speak(word) {
    this.word = word;
  }
 }

Then we define a middleware function to print log.

 // middleware for walk function
 const logger = target => next => (...args) => {
    console.log(`walk start, steps: ${args[0]}.`);
    const result = next(...args);
    console.log(`walk end.`);
    return result;
  }

Now we apply the log function as a middleware to a Person instance.

 // apply middleware to target object
 const p = new Person();
 const middlewareManager = new MiddlewareManager(p);
 middlewareManager.use('walk', walk);
 p.walk(3);

Whenever a Person instance call it's walk method, we'll see logs from the looger middleware.

Middleware object

We can also apply a middleware object to a target object. Middleware object is an object that contains function's name as same as the target object's function name.
Function's name start or end with "_" will not be able to apply middleware.

const PersonMiddleware {
  walk: target => next => step => {
    console.log(`walk start, steps: step.`);
    const result = next(step);
    console.log(`walk end.`);
    return result;
  },
  speak: target => next => word => {
    word = 'this is a middleware trying to say: ' + word;
    return next(word);
  }
}

 // apply middleware to target object
 const p = new Person();
 const middlewareManager = new MiddlewareManager(p);
 middlewareManager.use(PersonMiddleware);
 p.walk(3);
 p.speak('hi');

middlewareMethods

Or we can use middlewareMethods to define function names for middleweare target within a class.

class PersonMiddleware {
  constructor() {
    /**
     * Define function names for middleweare target.
     * @type {Array}
     */
    this.middlewareMethods = ['walk', 'speak'];
  }
  log(text) {
    console.log('Middleware log: ' + text);
  }
  walk(target) {
    return next => step => {
      this.log(`walk start, steps: step.`);
      const result = next(step);
      this.log(`walk end.`);
      return result;
    }
  }
  speak(target) {
    return next => word => {
      this.log('this is a middleware tring to say: ' + word);
      return next(word);
    }
  }
}

 // apply middleware to target object
 const p = new Person();
 const middlewareManager = new MiddlewareManager(p);
 middlewareManager.use(new PersonMiddleware())
 p.walk(3);
 p.speak('hi');

APIs

.use(methodName, ...middlewares)

Apply (register) middleware functions to the target function or apply (register) middleware objects.
If the first argument is a middleware object, the rest arguments must be middleware objects.
- {string|object} methodName String for target function name, object for a middleware object. - {...function} middlewares The middleware chain to be applied. - return {object} this

  • unbug

    你们觉得在运行时去除某个已经追加的中间件是不是很有必要?

    #1
  • unbug

    线已经发到 npm 啦,过来更新文档

    #2
  • unbug

    浏览器可以直接使用啦,仅2K

    #3
登录后回复,如无账号,请使用邀请码注册