jQuery 소스 코드 분석 시리즈 (33): AJAX 의 사전 필터 와 요청 배포 기

10204 단어 jquery
jQuery 1.5 이후 AJAX 모듈 은 AJAX 요청 을 관리 하고 확장 하 는 세 가지 새로운 방법 을 제공 했다. 각각:
1. 선행 필터 jQuery. ajax Prefilter
2. 배포 기 jQuery. ajax Transport 요청,
3. 형식 변환기 ajax Convert
원본 구조:
jQuery.extend({

    /**
     *      
     * @type {[type]}
     */
    ajaxPrefilter: addToPrefiltersOrTransports(prefilters),

    /**
     *      
     * @type {[type]}
     */
    ajaxTransport: addToPrefiltersOrTransports(transports),

    
     ...........................
});

이 두 가지 방법 은 개인 적 인 방법 으로 addToPrefilter s OrTransports 가 curry 수단 을 통 해 구 조 된 것 으로 각각 prefilter s 와 transports 의 인용 을 유지 한 것 임 을 알 수 있다.
 
이 구 조 를 간단하게 모 의 해 보 겠 습 니 다.
var prefilters = 2;

var addToPrefiltersOrTransports = function(prefilters) {
    return function(b) {
        return prefilters + b;
    }
}

var ajaxPrefilter = addToPrefiltersOrTransports(prefilters)

ajaxPrefilter(1) //3

이 를 통 해 알 수 있 듯 이 ajax Prefilter 는 addToPrefilter OrTransports 반환 함수 의 인용 을 유 지 했 습 니 다. 이것 이 바로 폐쇄 적 인 기법 입 니 다. 이것 도 JS 개발 자 들 이 모두 파악 해 야 할 것 입 니 다.
좋 은 점 은 여러 개의 인 자 를 합병 하 는 것 이다. 물론 인용 대 가 를 유지 하 는 것 은 약간의 성능 소모 이기 때문이다.
 
물론 jQuery 는 전달 하 는 간단 한 유형 처리 가 아니 라 전달 할 수 있 는 인용 형식의 리 턴 함수 이기 때문에 ajax Prefilter 방법 에 대해 폐쇄 구 조 를 넣 으 려 면 처리 가 필요 합 니 다.
prefilter 프로세서 채 우기
var prefilters = {};

var addToPrefiltersOrTransports = function(structure) {

    return function(func) {
        structure['*'] = func;
    }
}

var ajaxPrefilter = addToPrefiltersOrTransports(prefilters)


ajaxPrefilter(function(options){
    return {
        send:function(){

        },
        callback:function(){

        }
    }
})

사실은 대응 하 는 방법 으로 함수 의 형식 을 prefilter s 나 transports 에 대응 하 는 처리 포장 대상 에 채 우 는 것 이다.
사용 할 때 직접 실행 하고 모든 함수 가 각자 의 인용 을 유지 하고 있 습 니 다.
이런 서법 의 장점 은 자연히 유연 하고 유지 하기 쉬 우 며 코드 의 양 을 줄 이 는 것 이다
그리고 우리 가 자주 사용 하 는 jQuery 의 코드 는 매우 간결 하 다. 예 를 들 어 여러 가지 방법 을 합 쳐 만 드 는 등 이다.
jQuery.each([
        "tabIndex",
        "readOnly",
        "maxLength",
        "contentEditable"
    ], function() {
        jQuery.propFix[this.toLowerCase()] = this;
    });

 
그래서 이때 prefilter 의 구 조 는 바로...
prefilters = {
        '*': function() {
            return {
                send: function() {

                },
                callback: function() {

                }
            }
        }
    }

 
복귀 포 인 트 는 ajax Prefilter 와 ajax Transport 를 도입 하 는 역할 은 무엇 입 니까?
사전 필터 와 요청 배포 기 가 실 행 될 때 내부 변수 prefilter s 와 transports 를 옮 겨 다 닙 니 다. 이 두 변 수 는 jQuery 로 딩 이 끝 난 후 바로 초기 화 됩 니 다. 패 킷 을 닫 는 방법 으로 이 두 대상 을 채 웁 니 다.
 
ajax Prefilter 와 ajax Transport 는 모두 inspectPrefilter OrTransports 를 통 해 구축 되 었 습 니 다.
prefilers 의 사전 필 터 는 보 내 기 를 요청 하기 전에 요청 파 라 메 터 를 설정 하 는 과정 에서 호출 되 었 습 니 다. prefilers 를 호출 하 는 것 은 함수 inspectPrefilers OrTransports 입 니 다.
교묘 하 게 transports 의 요청 배포 기 는 대부분의 매개 변수 설정 이 완 료 된 후에 도 함수 inspectPrefilter OrTransports 를 통 해 요청 형식 과 일치 하 는 요청 배포 기 를 가 져 옵 니 다.
function inspectPrefiltersOrTransports(structure, options, originalOptions, jqXHR) {

    var inspected = {},
        seekingTransport = (structure === transports);

    function inspect(dataType) {
        var selected;
        inspected[dataType] = true;
        jQuery.each(structure[dataType] || [], function(_, prefilterOrFactory) {
            var dataTypeOrTransport = prefilterOrFactory(options, originalOptions, jqXHR);
            if (typeof dataTypeOrTransport === "string" && !seekingTransport && !inspected[dataTypeOrTransport]) {
                options.dataTypes.unshift(dataTypeOrTransport);
                inspect(dataTypeOrTransport);
                return false;
            } else if (seekingTransport) {
                return !(selected = dataTypeOrTransport);
            }
        });
        return selected;
    }

    return inspect(options.dataTypes[0]) || !inspected["*"] && inspect("*");
}

structure [dataType] 배열 을 옮 겨 다 니 며 prefilter OrFactory 를 함수 배열 요소 로 실행 합 니 다. 이 함 수 를 되 돌려 주 는 결과 dataType OrTransport 가 문자열 이 고 prefilter 가 inspected 되 지 않 았 을 때 options. dataTypes 배열 의 머리 에 이 문자열 을 추가 하여 dataTypeOrTransport 로 계속 재 귀 합 니 다. (json / jsonp 를 사용 할 때 "script" 을 되 돌려 줍 니 다.transport 라면 dataType OrTransport 의 가짜 결 과 를 되 돌려 줍 니 다.
 
사전 필터 prefilter
쉽게 말 하면 일종 의 hack 방법 입 니 다. 다만 사건 의 그런 hack 가 쓴 기법 보다 더욱 뛰 어 납 니 다.
prefilter s 를 대상 으로 하 는 방법 은 사실 dataType 이 script, json, jsonp 로 처리 되 는 것 을 볼 수 있 습 니 다.
스 크 립 트 파일 을 동적 으로 불 러 올 때
$.ajax({
    type     : "GET",
    url      : "test.js",
    dataType : "script"
});

그래서 inspectPrefilter OrTransports 방법 에서 prefilter [script] 은 해당 하 는 처리 방법 을 찾 을 수 있 기 때문에 실 행 됩 니 다.
예 를 들 어 script 의 hack 는 캐 시 를 처리 하 는 특수 한 상황 과 crossDomain 을 강제로 추가 해 야 합 니 다.
script 의 사전 필 터 를 설정 하기 때문에 script 이 꼭 크로스 필드 를 의미 하 는 것 은 아 닙 니 다.
크로스 필드 가 비활성화 되 지 않 았 습 니 다. 강제 형식 은 GET 이 며, 전역 시간 이 적용 되 지 않 습 니 다.
jQuery.ajaxPrefilter("script", function(s) {
    if (s.cache === undefined) {
        s.cache = false;
    }
    if (s.crossDomain) {
        s.type = "GET";
    }
});

그래서 prefilter s 는 특정한 환경 에서 특정한 상황 에 대해 필요 한 호 환 처 리 를 하 는 것 이다.
 
배달 기 transports 요청
요청 배포 기 는 말 그대로 요청 을 보 냅 니 다. 그러면 바 텀 ajax 에서 요청 을 보 내 는 것 은 send 방법 입 니 다.
xhr.send();

그러나 jQuery 는 send 방법 을 분할 하여 대응 하 는 처 리 를 transports 에 넣 었 다.
그러면 transports 대상 도 jQuery. ajaxTransport 를 통 해 구축 되 는 것 과 유사 합 니 다.
예 를 들 어 script, send, abort 방법
transports 방법 되 돌리 기
transport = inspectPrefiltersOrTransports(transports, s, options, jqXHR);

좋은 웹페이지 즐겨찾기