소개

에이전트는 이름에서 알 수 있듯이 다른 사람이 일을 할 수 있도록 돕는 것입니다. 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송이 장미");

실전 전투

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

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

데이브 매튜스 동영상

모두 선택/역선택

먼저 분석해 보겠습니다. 먼저 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) {
        '' 반환
            '