JavaScript 시리즈 심층이해(31): 디자인 패턴의 프록시 패턴에 대한 자세한 설명_javascript 기술

소개

에이전트는 이름에서 알 수 있듯이 다른 사람이 일을 할 수 있도록 돕는 것입니다. GoF는 에이전시 모델을 다음과 같이 정의합니다.

프록시 모드(Proxy)는 다른 개체에 대한 프록시를 제공하여 이 개체에 대한 액세스를 제어합니다.

프록시 패턴을 사용하면 프록시 객체가 특정 객체에 대한 참조를 제어할 수 있습니다. 프록시는 파일, 리소스, 메모리의 개체 또는 복사하기 어려운 개체 등 거의 모든 개체가 될 수 있습니다.

텍스트

간단한 예를 들자면, 두두가 요거트 소녀에게 장미를 보내고 싶은데 연락처를 모르거나 당황해서 삼촌에게 장미꽃을 보내라고 맡기고 싶다면, 그 삼촌은 에이전트 (실제로는 꽤 괜찮습니다) 며느리에게 꽃 몇 송이를 공제할 수 있는데 어떻게 해야 할까요?

코드 복사 코드는 다음과 같습니다.

// 뷰티 객체를 먼저 선언
var girl = 함수(이름) {
This.name = 이름;
};

// 두두입니다
var dudu = 함수(여자) {
This.girl = 소녀;
This.sendGift = 기능(선물) {
Alert("안녕하세요 " girl.name ", dudu가 선물을 드립니다: " 선물);
}
};

//삼촌은 대리인입니다
var ProxyTom = 함수(소녀) {
This.girl = 소녀;
This.sendGift = 기능(선물) {
(new dudu(girl)).sendGift(gift); //두두에게 꽃 보내기
}
};

호출 방법은 매우 간단합니다.

코드 복사 코드는 다음과 같습니다.

var Proxy = new ProxyTom(new girl("요구르트 소녀"));
Proxy.sendGift("999송이 장미");

실전 전투

위 코드를 통해 모든 사람이 프록시 모드에 대해 매우 명확하다고 생각합니다. 연습해 보겠습니다. 간단한 재생 목록이 있고 단일 링크를 클릭하면(또는 모두 선택) 링크 아래에 비디오 음악이 표시되어야 합니다. 소개 및 재생 버튼을 클릭하시면 영상이 재생됩니다.

코드 복사 코드는 다음과 같습니다.

데이브 매튜스 동영상

모두 선택/역선택

1. Gravedigger


2. 저장해 주세요
> ;

3. Crush


4. 물을 마시지 마세요


5. 그대로 재미있습니다< ;/li>
   
6. 무엇을 말씀하시겠습니까
   

먼저 분석해 보겠습니다. 먼저 a 연결의 클릭 이벤트를 모니터링할 뿐만 아니라 "전체 선택/역선택"의 클릭 이벤트도 모니터링해야 합니다. 그런 다음 서버에 비디오 정보를 쿼리하도록 요청하고 이를 조합합니다. HTML 정보를 li 요소의 마지막 위치에 표시하면 효과는 다음과 같습니다.

그런 다음 재생 연결의 클릭 이벤트를 모니터링하고 클릭 후 재생을 시작하면 다음과 같습니다.

좋아요. jQuery 없이 선택기를 맞춤설정해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

var $ = 함수(id) {
document.getElementById(id) 반환;
};

Yahoo의 json 서비스는 콜백 매개변수를 제공하므로 데이터를 허용하기 위해 사용자 정의 콜백을 전달합니다.

코드 복사 코드는 다음과 같습니다.

var http = {
MakeRequest: 함수(ID, 콜백) {
      var url = 'http://query.yahooapis.com/v1/public/yql?q=',
sql = 'id가 IN ("%ID%")인 music.video.id에서 *를 선택하세요',
형식 = "형식=json",
             핸들러 = "콜백=" 콜백,
              script = document.createElement('script');

sql = sql.replace('%ID%', ids.join('","'));
               sql = encodeURIComponent(sql);

url = sql '&' 형식 '&' 핸들러;
               script.src = url;

document.body.appendChild(스크립트);
}
};

프록시 객체는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var 프록시 = {
ID: [],
지연: 50,
시간 초과: null,
콜백: null,
컨텍스트: null,
//재생 중에 콜백을 트리거하도록 요청 ID와 콜백을 설정합니다.
MakeRequest: 함수(id, 콜백, 컨텍스트) {

// 대기열에 추가 dd to the queue
This.ids.push(id);

this.callback = 콜백;
This.context = 컨텍스트;

// 시간 초과 설정
If (!this.timeout) {
This.timeout = setTimeout(function () {
                 Proxy.flush();
             }, this.delay);
}
},
// 요청을 트리거하고 프록시 책임을 사용하여 http.makeRequest
를 호출합니다. 플러시: 함수 () {
// Proxy.handler는 Yahoo를 요청할 때의 콜백
입니다.            http.makeRequest(this.ids, 'proxy.handler')
                            // 데이터 요청 후 Proxy.handler 메소드 실행 (또 다른 콜백 설정이 있습니다)
                             
​​​​ //시간 초과 및 대기열 지우기
This.timeout = null;
This.ids = [];

},
핸들러: 함수(데이터) {
var i, max;

// 단일 동영상에 대한 콜백 호출
If (parseInt(data.query.count, 10) === 1) {
             proxy.callback.call(proxy.context, data.query.results.Video);
             반품;
}

// 여러 동영상에 대한 콜백 호출
for (i = 0, max = data.query.results.Video.length; i              proxy.callback.call(proxy.context, data.query.results.Video[i]);
}
}
};

비디오 처리 모듈에는 주로 정보 획득, 정보 표시, 비디오 재생의 세 가지 하위 기능이 있습니다.

코드 복사 코드는 다음과 같습니다.

var 비디오 = {
    // 初始化播放器代码，开始播放
    getPlayer: 함수(id) {
        '' 반환
            '

이제 클릭 이벤트에 대한 코드를 처리할 수 있습니다. A 연결이 많기 때문에 각 연결이 이벤트를 바인딩하면 분명히 성능 문제가 발생하므로 이벤트를

요소에 바인딩합니다. 클릭은 연결입니다. 그렇다면 동영상 주소를 클릭한 다음 재생할 수 있다는 의미입니다.
코드 복사 코드는 다음과 같습니다.

$('vids').onclick = 기능 (e) {
var src, id;

e = e || window.event;
src = e.target || e.srcElement;

//연결되어 있지 않으면 프로세스가 진행되지 않습니다
If (src.nodeName.toUpperCase() !== "A") {
         반품;
}
//버블링 중지
If (typeof e.preventDefault === "함수") {
         e.preventDefault();
}
e.returnValue = false;

id = src.href.split('--')[1];

//제작된 영상정보 영역의 링크재생을 클릭하면 재생이 시작됩니다
// 그러면 반환이 계속되지 않습니다
If (src.className === "재생") {
src.parentNode.innerHTML = videos.getPlayer(id);
         반품;
}
                             
src.parentNode.id = "v" id;
Videos.getInfo(id); // 최초 클릭 시 영상 정보를 출력하는 처리 코드
};


모두 선택과 선택 반전 코드는 비슷하므로 따로 설명하지 않겠습니다.

코드 복사 코드는 다음과 같습니다.

$('toggle-all').onclick = 기능 (e) {

var hrefs, i, max, id;

hrefs = $('vids').getElementsByTagName('a');
for (i = 0, max = hrefs.length; i ​​​​ //플레이 연결 무시
If (hrefs[i].className === "재생") {
                 계속;
}
​​​​ //선택하지 않은 항목 무시
If (!hrefs[i].parentNode.firstChild.checked) {
                 계속;
}

id = hrefs[i].href.split('--')[1];
hrefs[i].parentNode.id = "v" id;
videos.getInfo(id);
}
};


요약

프록시 모드는 일반적으로 다음 상황에 적합합니다.

1. 원격 프록시는 서로 다른 주소 공간에 있는 개체에 대한 로컬 표현을 제공합니다. 이는 웹 서비스의 프록시 클래스와 마찬가지로 개체가 서로 다른 주소 공간에 존재한다는 사실을 숨길 수 있습니다.
2. 가상 프록시, 필요에 따라 값비싼 객체를 생성하고 인스턴스화하는 데 시간이 오래 걸리는 실제 객체를 저장하는 데 사용합니다. 예를 들어 브라우저가 렌더링되면 문제가 먼저 표시되고 그림이 느리게 표시될 수 있습니다. 즉, 가상 프록시를 통해 실제 이미지 대신 가상 에이전트가 실제 이미지의 경로와 크기를 저장합니다
. 3. 보안 프록시는 실제 객체에 접근할 때 권한을 제어하는 ​​데 사용됩니다. 일반적으로 서로 다른 접근 권한을 가져야 하는 객체에 사용됩니다.
4. 지능형 안내는 실제 개체가 호출될 때만 에이전트가 다른 작업을 처리합니다. 예를 들어 C#의 가비지 수집에서는 개체가 사용되면 참조 횟수가 발생합니다. 개체가 더 이상 참조되지 않으면 GC가 이를 재활용할 수 있습니다.

참고: "Dahua 디자인 패턴"