js 中间件的简单实现原理

1.基础版

我将复杂版的改变了下,该变成不同的方法名,不同的调用方法,但是只要next设置好,比较适合新手查看

class Middleware {
    constructor () {
        this.middleware = (next)=>{//console.log("this.middleware: "+next)
            /*this.middleware: () =>{
                console.log("use: "+fn.call(this, next));
                return fn.call(this, next)*/
            return next();
        }
    }

    run (fn) {
        // console.log(this)
        this.middleware(
            () => fn.call(this,"nihaoafddsf")
        )
    }

    use (fn) {
        const previousFn = this.middleware
        this.middleware=(next)=>{
            // console.log(next)
            /*() =>{
                console.log("fetch: "+fn.call(this, next));
                return fn.call(this, next)
            }*/
            previousFn.call(this, () =>{
                // console.log("use: "+fn.call(this, next));
                return fn.call(this, next)
            })
        }
    }
    fetch(fn){
        const previousFn = this.middleware
        this.middleware=(next)=>{
            // console.log(next)//() => fn.call(this,"nihaoafddsf")
            previousFn.call(this, () =>{
                console.log("fetch: "+fn)
                return fn.call(this, next)
            })
        }
    }
}

let bnm = new Middleware;
bnm.use(
    (next)=>{
        console.log(3)
        console.log(next)
        next()
    }
)
bnm.fetch((next)=>{
    console.log("nihaoa")
    next()
})

bnm.run(function (canshu) {
console.log(1)
    console.log(canshu)
})

工具

1.首先,在这里是使用了函数式编程,让函数赋值给变量.

2.巧妙利用了js class 和原型的this原理(当继承的函数被调用时，this 指向的是当前继承的对象，而不是继承的函数所在的原型对象。)

 

原理剖析

1.为什么可以形成链接

1.利用了工具2,原型的this,达成链表的原理.

当第一个use 调用的时候,他的previous 就是最原始的this.middleware

同时,将class 的this.middleware 改成自己的.

当第二个调用的时候,他的preious 就是第一个的this.middleware

同理,n个一样的设置

当最后一个调用完毕,此时的this.middleware指向的是最后一个设置的.

 

2.如何触发

它使用了run的方法,看起来真的像java的线程模块

启动的是最后一个绑定的this.middleware,如我前面所讲.

所以你会看到,当你点击的时候,它立刻出发到了fetch()方法,

 

3.如何触发到最开始

按我前面的讲法,应该是先触发最后一个,为什么他会触发第一个,是的,当我使用复杂版的时候,我也是很懵逼,搞不懂.然后就有了一开始,我将她变成多个不同的方法,对这些方法依次调用.这样总算扒开了它的三次链调,

更应该称之为递归,如果你在next() 方法之后,相应的填写一些的方法,它一样会执行.就像递归一样.但他又有链表的特性.真的神奇.

这就是他的链式调用利用,我前面讲的两点.

这样他返回到了第一次.

4.开始依次触发相应的,达成中间件的一次调用

 他开始调用

调用完成后返回到return

然后按照一开始来的路程原路返回.

 

2.进阶版,如何节省代码,才是我们的中级目标

js一些黑魔法,才是真正有意思的,

尤其在调试的时候,如果不熟悉,你就会以为他只运转了以次,其实,他已经运转了很多次了.

 

class Middleware {
  constructor () {
    this.i = 0;
    this.middleware = (next) => { console.log(next);return next()}
  }

  run (fn) {
    console.log(this)
    this.middleware(
      () => fn.call(this)
    )
  }

  use (fn) {
    const previousFn = this.middleware
    this.middleware = (next) =>
      previousFn.call(this, () =>{
            console.log(fn);
        return fn.call(this, next)
      })
  }
}

const instance = new Middleware()

instance.use(function (next) {
  setTimeout(() => {
    console.log('first')
    this.firstMiddlewareLoaded = true
    next()
  }, 500)
})

instance.use(function (next) {
  setTimeout(() => {
    console.log('second')
    this.secondMiddlewareLoaded = true
    next()
  }, 250)
})

instance.use(function (next) {
    console.log('third')
    this.ThirdMiddlewareLoaded = true
    next()
})
const start = new Date()
instance.run(function () {
  console.log('first middleware loaded:', this.firstMiddlewareLoaded)
  console.log('second middleware loaded:', this.secondMiddlewareLoaded)
  console.log('Third middleware loaded:', this.ThirdMiddlewareLoaded)
  console.log('time passed:', new Date() - start)
})

写法还是一样,就是它这里有些很多疑惑的问题.主要就是调用函数套两层的问题

 

外面套了两层,当使用call的时候,使用函数式编程,他就无法读取的到最内层所带的next()方法,

他这里使用了setimeout   ,因为程序立刻执行完毕,它没有next(),或者next没有执行到,他就是会立刻返回了.

但是计时器一到就立刻调用了.这就是原因.也是一些疑惑的问题