Question

任何人都可以给我教程此功能的工作原理，但我无法理解此功能的工作原理。 this.go函数实际如何工作。任何帮助，将不胜感激。谢谢

var Middleware = function() {};

Middleware.prototype.use = function(fn) {
  var self = this;

  this.go = (function(stack) {
    return function(next) {
      stack.call(self, function() {
        fn.call(self, next.bind(self));
      });
    }.bind(this);
  })(this.go);
};

Middleware.prototype.go = function(next) {
  next();
};

用法

var middleware = new Middleware();

middleware.use(function(next) {
  var self = this;
  setTimeout(function() {
    self.hook1 = true;
    console.log('a')
    next();
  }, 10);
});

middleware.use(function(next) {
  var self = this;
  setTimeout(function() {
    self.hook2 = true;
    console.log('b')
    next();
  }, 10);
});

var start = new Date();
middleware.go(function() {
  console.log(this.hook1); // true
  console.log(this.hook2); // true
  console.log(new Date() - start); // around 20
});

Answer 1

此代码的目的似乎是建立一系列功能，然后依次运行这些功能。

go方法的工作是运行一些代码。如果您从未调用过use，那么go将立即运行指定的代码，而不会带来任何麻烦。

通过use方法，您可以插入要运行的其他步骤。调用use时，原始的go方法将替换为新方法。该新方法将调用旧的go方法，然后调用您的自定义方法。如果多次调用use，则会建立一系列功能。这些函数将按照传递给它们使用的顺序进行调用。当上一个函数调用next()时，下一个函数开始运行。

代码的许多复杂性来自确保this的值保持预期值。如果这不是必需条件，则可以像这样重写use：

Middleware.prototype.use = function(fn) {
  const oldGo = this.go;
  this.go = next => oldGo(() => fn(next))
}

解释功能中间件

1 个答案: