JS 미들웨어 디자인 모델 에 대한 심도 있 는 연구 와 사례 분석

본 논문 의 사례 는 JS 미들웨어 디자인 모델 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다. 구체 적 으로 는 다음 과 같 습 니 다.
중간 부품 은 보조 처리 기능 으로서 매우 광범 위 하 게 응용 된다. 예 를 들 어 express 중간 부품, redux 중간 부품, koa 중간 부품, 그러면 중간 부품 의 디자인 모델 은 도대체 어떤 것 일 까?중간 부품 의 사용 사례 를 결합 하여 중간 부품 의 디자인 사상 과 일반 실현 모델 을 연구 하고 정리 하 다.
redux 미들웨어 구현 모델 을 본 떠 다음 과 같은 예 를 보십시오.

function fn2(next){
  console.log('  2，     next  ')
  return action => {
    console.log('  2')
    next(action)
  }
}
function fn3(next){
  console.log('  3，     next  ')
  return action => {
    console.log('  3')
    next(action)
  }
}
function fn1(next){
  console.log('  1，     next  ')
  return action => {
    console.log('  1')
    getData().then( data => {
      next(action)
    })
  }
  
}
 
function getData(){
  return new Promise(resolve => {
    setTimeout( () => {
      resolve(true)
    },3000)
  })
}
const next = (action) => {
  console.log('action',action)
}
// compose([fn1,fn2,fn3])(next)
const mm = [fn1,fn2,fn3].reduce(function(a,b,currentIndex,arr){
  console.log("a",a)
  console.log("b",b)
  return function(...args){
    console.log('args',[...args][0].toString())
    return a(b(...args))
  }
})(next)(1)

운행 결과: 양파 링 모형 과 유사 하지만 안쪽 에서 바깥쪽으로, 바깥쪽 에서 안쪽 으로
3 을 실행 하고 개 조 된 next 이전 args action = > {를 되 돌려 줍 니 다.        console. log ('실행 3')        next(action)     } 2 를 실행 하고 개 조 된 next 로 돌아 가기 전에 1 을 실행 하고 개 조 된 next 로 돌아 가기 전에 1 을 실행 하고 2 를 실행 하 며 3 action 1 을 실행 합 니 다.
다음은 위의 인 스 턴 스 를 간소화 합 니 다.

function fn2(action){
  console.log('  2，     next  ')
  action+2
}
function fn3(action){
  console.log('  3，     next  ')
  action+1
}
function fn1(action){
  console.log('  1，     next  ')
  return action+1
  
}
 
function getData(){
  return new Promise(resolve => {
    setTimeout( () => {
      resolve(true)
    },3000)
  })
}
const next = (action) => {
  console.log('action',action)
}
// compose([fn1,fn2,fn3])(next)
const mm = [fn1,fn2,fn3].reduce(function(a,b,currentIndex,arr){
  console.log("a",a)
  console.log("b",b)
  return function(...args){
    console.log('args',[...args])
    return a(b(...args))
  }
})(1)

이때 의 중간 부품 은 처리 논리 일 뿐 초기 처리 논 리 를 전달 하지 않 았 기 때문에 중간 부품 은 단일 하고 운행 결과:
args [1] 실행 3, 개조 한 next 로 돌아 가기 전에 args [undefined] 실행 2, 개조 한 next 로 돌아 가기 전에 1, 개조 한 next 로 돌아 가기 전에
통용 논 리 를 추출 하고 본질 에 깊이 들 어가 면 중간 부품 은 최초 처리 논리 함 수 를 개조 하고 없 으 면 자신의 논리 만 집행 한다.
1. 위 에서 비교적 단일 한 것 은 자신의 논리 만 있 는 미들웨어 이다.
2. 논리 함수 next 를 초기 처리 하 는 미들웨어 가 있 습 니 다. next 를 받 아들 여 새로운 next 로 돌아 가 야 합 니 다.
관심 있 는 친 구 는 온라인 HTML / CSS / JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 운행 효 과 를 테스트 합 니 다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.