프 록 시가 뭐야?

다른 블 로 그 를 방문 해 영양 가 있 는 글 을 공유 하 는 것 이다.
프 록 시가 뭐야?
일반적으로 자 바스 크 립 트 언어 를 이야기 할 때 우리 가 토론 하 는 것 은 ES6 표준 이 제공 하 는 새로운 특성 이 고 본 논문 도 예외 가 아니다.우 리 는 자 바스 크 립 트 에이전트 와 그들의 역할 에 대해 토론 할 것 이다. 그러나 우리 가 깊이 연구 하기 전에 프 록 시의 정의 가 무엇 인지 살 펴 보 자.
MDN 의 정 의 는 프 록 시 대상 은 기본 동작 을 정의 하 는 사용자 정의 행위 (예 를 들 어 속성 찾기, 할당, 매 거 진, 함수 호출 등) 입 니 다.
다시 말 하면 우 리 는 대리 대상 이 우리 의 목표 대상 의 포장 기 라 고 할 수 있다. 우 리 는 그 속성 을 조작 하고 그것 에 대한 직접적인 접근 을 막 을 수 있다.너 는 그것들 을 실제 코드 에 응용 하 는 것 이 매우 어렵 다 는 것 을 알 게 될 것 이다. 나 는 너 에 게 이 개념 을 자세히 읽 으 라 고 격려 한다. 그것 은 너의 관점 을 바 꿀 수 있다.
술어
handler
함정 (traps) 을 포함 하 는 자리 표시 자 대상 입 니 다.
traps
속성 접근 방법 을 제공 합 니 다.이것 은 운영 체제 에서 포획 기의 개념 과 유사 하 다.
target
에이전트 가상 화 대상.(대리 대상 이 포장 하고 조작 하 는 실제 대상)
본 논문 에서 저 는 get 과 set 함정 에 간단 한 사례 를 제공 할 것 입 니 다. 마지막 으로 API 와 같은 복잡 한 기능 을 어떻게 사용 하 는 지 볼 것 입 니 다.
문법 과 용례

let p = new Proxy(target, handler);

목표 와 처리 프로그램 을 Proxy 구조 함수 에 전달 하면 proxy 대상 을 만 듭 니 다.이제 그것 을 어떻게 이용 하 는 지 보 자.프 록 시의 장점 을 더 잘 알 기 위해 서 는 우선 코드 가 없 는 코드 를 만들어 야 합 니 다.
상상 해 보 세 요. 저 희 는 몇 가지 속성 을 가 진 사용자 대상 이 있 습 니 다. 만약 속성 이 존재 한다 면 저 희 는 사용자 정 보 를 인쇄 하고 싶 습 니 다. 존재 하지 않 으 면 이상 을 던 집 니 다.프 록 시 대상 을 사용 하지 않 을 때 속성 값 이 존재 하 는 지 판단 하 는 코드 도 사용자 정 보 를 인쇄 하 는 함수, 즉 printUser 에 놓 여 있 습 니 다. (이것 은 우리 가 원 하 는 것 이 아 닙 니 다) 다음 demo 와 같 습 니 다.

let user = {
    name: 'John',
    surname: 'Doe'
};

let printUser = (property) => {
    let value = user[property];
    if (!value) {
        throw new Error(`The property [${property}] does not exist`);
    } else {
        console.log(`The user ${property} is ${value}`);
    }
}

printUser('name'); //   : 'The user name is John'
printUser('email'); //     : The property [email] does not exist

get
위의 코드 를 보면 조건 과 이상 을 다른 곳 으로 옮 기 고 printUser 에 서 는 사용자 정 보 를 표시 하 는 실제 논리 에 만 관심 을 가 지 는 것 이 좋 습 니 다.이것 은 우리 가 대리 대상 을 사용 할 수 있 는 곳 입 니 다. 이 예 를 업데이트 합 시다.

let user = {
    name: 'John',
    surname: 'Doe'
};

let proxy = new Proxy(user, {
    get(target, property) {
        let value = target[property];
        if (!value) {
            throw new Error(`The property [${property}] does not exist`);
        }
        return value;
    }
});

let printUser = (property) => {
    console.log(`The user ${property} is ${proxy[property]}`);
};

printUser('name'); //   ： 'The user name is John'
printUser('email'); //     : The property [email] does not exist

위의 예 에서 우 리 는 user 대상 을 포장 하고 get 방법 을 설정 했다.이 방법 은 차단 기 를 충당 하여 값 을 되 돌려 주기 전에 속성 값 을 먼저 검사 하고 존재 하지 않 으 면 이상 을 던 집 니 다.
출력 은 첫 번 째 상황 과 같 지만 이때 printUser 함 수 는 논리 에 전념 하고 메시지 만 처리 합 니 다.
set
에이전트 가 유용 할 수 있 는 또 다른 예 는 속성 값 검증 입 니 다.이런 상황 에서 우 리 는 set 방법 을 사용 하고 그 중에서 검증 해 야 한다.예 를 들 어 우리 가 목표 유형 을 확보 해 야 할 때 이것 은 매우 유용 한 갈고리 이다.실제 사용 을 살 펴 보 자.

let user = new Proxy({}, {
    set(target, property, value) {
        if (property === 'name' && Object.prototype.toString.call(value) !== '[object String]') { //     string   
            throw new Error(`The value for [${property}] must be a string`);
        };
        target[property] = value;
    }
});

user.name = 1; //     : The value for [name] must be a string

이것들 은 상당히 간단 한 용례 입 니 다. 아래 장면 에서 proxy 는 모두 쓸모 가 있 습 니 다.

포맷

가치 와 유형 수정

데이터 바 인 딩

디 버 깅

...

이제 더 복잡 한 용례 를 만 들 때 가 되 었 다.
프 록 시 있 는 API - 더 복잡 한 예제
간단 한 용례 에서 의 지식 을 사용 하면 응용 프로그램 에서 사용 할 수 있 도록 API 포장 기 를 만 들 수 있 습 니 다.현재 get 와 post 요청 만 지원 하지만 쉽게 확장 할 수 있 습 니 다.코드 는 아래 와 같다.

const api = new Proxy({}, {
    get(target, key, context) {
        return target[key] || ['get', 'post'].reduce((acc, key) => {
            acc[key] = (config, data) => {

                if (!config && !config.url || config.url === '') throw new Error('Url cannot be empty.');
                let isPost = key === 'post';

                if (isPost && !data) throw new Error('Please provide data in JSON format when using POST request.');

                config.headers = isPost ? Object.assign(config.headers || {}, { 'content-type': 'application/json;chartset=utf8' }) :
                    config.headers;

                return new Promise((resolve, reject) => {
                    let xhr = new XMLHttpRequest();
                    xhr.open(key, config.url);
                    if (config.headers) {
                        Object.keys(config.headers).forEach((header) => {
                            xhr.setRequestHeader(header, config.headers[header]);
                        });
                    }
                    xhr.onload = () => (xhr.status === 200 ? resolve : reject)(xhr);
                    xhr.onerror = () => reject(xhr);
                    xhr.send(isPost ? JSON.stringify(data) : null);
                });
            };
            return acc;
        }, target)[key];
    },
    set() {
        throw new Error('API methods are readonly');
    },
    deleteProperty() {
        throw new Error('API methods cannot be deleted!');
    }
});

간단 한 실현 set 과 deleteProperty 에 대해 설명 합 시다.저 희 는 보호 단 계 를 추가 하여 누군가가 의외 이거 나 의도 치 않 게 모든 API 속성 에 새 값 을 설정 하려 고 시도 할 때마다 이상 을 던 질 수 있 도록 합 니 다.
속성 을 삭제 하려 고 시도 할 때마다 deleteProperty 방법 을 호출 합 니 다.Google 에이전트 (즉, 이 api) 에서 속성 을 삭제 할 수 있 는 사람 이 없 는 지 확인 할 수 있 습 니 다. 일반적으로 API 방법 을 잃 어 버 리 고 싶 지 않 기 때 문 입 니 다.get 여기 서 재 미 있 었 습 니 다. 몇 가지 일 을 했 습 니 다.target 은 빈 대상 입 니 다. get 방법 은 첫 번 째 사용 api 시 모든 방법 (예 를 들 어 현재 get 과 post 요청) 을 만 들 것 입 니 다. reduce 리 셋 에서 저 희 는 제 공 된 설정 에 따라 API 규범 에 필요 한 검증 과 검 사 를 수행 합 니 다.이 예제 에서 저 희 는 데 이 터 를 제공 하지 않 고 빈 URL 과 요청 을 할 수 없습니다.이 검사 들 은 확장 하고 수정 할 수 있 지만, 중요 한 것 은 우리 가 이 곳 에서 만 집중 적 으로 처리 할 수 있다 는 것 이다.reduce 첫 번 째 API 호출 때 만 완료 되 고 그 후에 전체 reduce 프로 세 스 를 건 너 뛰 며 get 기본 행동 만 수행 하고 속성 값, 즉 API 처리 프로그램 을 되 돌려 줍 니 다.모든 처리 프로그램 은 Promise 대상 을 되 돌려 주 고 요청 을 만 들 고 서 비 스 를 호출 합 니 다.
사용:

api.get({
    url: 'my-url'
}).then((xhr) => {
    alert('Success');
}, (xhr) => {
    alert('Fail');
});

delete api.get; //throw new Error('API methods cannot be deleted!'); 

결론.
데 이 터 를 더 제어 해 야 할 때 대 리 는 도움 이 될 수 있 습 니 다.제 어 된 규칙 에 따라 원본 데이터 에 대한 접근 을 확장 하거나 거부 하여 대상 을 감시 하고 정확 한 행 위 를 확보 할 수 있 습 니 다.