使用中间件模式,让代码和 ExpressJS, ReduxJS 一样容易扩展

2016-12-23 14:20:41 +08:00
 unbug

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

MiddlewareJS 已发布到 GitHub

Readme

Apply middleweare to an object.

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:

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.

API

.use(methodName, ...middlewares)

Apply middleware to the target object. If the first argument is a middleware object, the rest arguments must be middleware objects.

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 applyMiddleware = new ApplyMiddleware(p);
 applyMiddleware.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 applyMiddleware = new ApplyMiddleware(p);
applyMiddleware.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 CuePointMiddleware {
  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 applyMiddleware = new ApplyMiddleware(p);
 applyMiddleware.use(new PersonMiddleware())
 p.walk(3);
 p.speak('hi');
1655 次点击
所在节点    前端开发
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/329670

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX