JS 미들웨어 디자인 모델 에 대한 심도 있 는 연구 와 사례 분석
3993 단어 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 로 돌아 가기 전에
실행
실행
실행
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상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,javascript 대상 입문 강좌,JavaScript 오류 및 디 버 깅 기술 요약,JavaScript 데이터 구조 와 알고리즘 기술 총화과JavaScript 스 트 리밍 알고리즘 및 기술 총화.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.