소개하다
이름에서 알 수 있듯이 에이전트는 다른 사람들이 다른 일을하도록 돕는 것입니다. GOF는 프록시 모델을 다음과 같이 정의합니다.
프록시 모드 (프록시)는 다른 객체 가이 객체에 대한 액세스를 제어 할 프록시를 제공합니다.
프록시 모드를 사용하면 프록시 객체가 특정 객체의 참조를 제어 할 수 있습니다. 프록시는 파일, 리소스, 메모리의 객체 또는 복사하기 어려운 것과 같은 거의 모든 객체 일 수 있습니다.
텍스트
간단한 예를 들어 봅시다. Dudu가 요거트와 어린 소녀 장미를 보내고 싶지만 그녀의 연락처 정보를 알지 못하거나 당황스럽고, 그녀의 삼촌이 장미를 보내도록 맡기고 싶다면, 삼촌은 대리인입니다 (실제로는 꽤 좋습니다. 아내에게 꽃을 공제 할 수 있습니다).
코드 사본은 다음과 같습니다.
// 먼저 아름다움을 선언합니다
var girl = function (name) {
this.name = 이름;
};
// 이것은 Dudu입니다
var dudu = function (girl) {
this.girl = girl;
this.sendgift = function (선물) {
Alert ( "Hi" + girl.name + ", Dudu는 선물을 제공합니다 :" + Gift);
}
};
// 삼촌이 대리인입니다
var proxytom = function (girl) {
this.girl = girl;
this.sendgift = function (선물) {
(New Dudu (소녀)). Sendgift (선물); // Dudu를 위해 꽃을 보냅니다
}
};
통화 방법은 매우 간단합니다.
코드 사본은 다음과 같습니다.
var proxy = new proxytom (New Girl ( "yogurt girl"));
프록시 .sendgift ( "999 장미");
실용적인 전투
위의 코드를 통해 모든 사람이 프록시 모드에 대해 매우 분명하다고 생각합니다. 실제 전투를하겠습니다. 간단한 재생 목록이 있으며 단일 연결을 클릭하거나 모든 것을 선택할 때 연결 아래에 비디오 노래 소개 및 재생 버튼을 표시해야합니다. 재생 버튼을 클릭하면 비디오가 재생됩니다. 목록 구조는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<H1> Dave Matthews Vids </h1>
<p> <span id = "Toggle-All"> 모든/Reselect를 선택하십시오 </span> </p>
<ol id = "vids">
<li> <input type = "checkbox"checked> <a href = "http://new.music.yahoo.com/videos/---2158073"> Gravedigger </a>
<li> <input type = "checkbox"checked> <a href = "http://new.music.yahoo.com/videos/---4472739"> 저장 </a> </li>
<li> <input type = "checkbox"checked> <a href = "http://new.music.yahoo.com/videos/---45286339"> Crush </a> </li>
<li> <input type = "checkbox"checked> <a href = "http://new.music.yahoo.com/videos/--2144530"> 물을 마시지 마십시오 </a> </li>
<li> <input type = "checkbox"checked> <a href = "http://new.music.yahoo.com/videos/---217241800"> 재미있는 방식 </a> </li>
<li> <input type = "checkbox"checked> <a href = "http://new.music.yahoo.com/videos/---2144532"> what </a>
</li>
</ol>
먼저 다음을 분석하겠습니다. 먼저 연결 클릭 이벤트 A를 모니터링 할뿐만 아니라 "All/Anti-Select 선택"클릭 이벤트를 모니터링 한 다음 서버에 비디오 정보를 쿼리하고 HTML 정보를 조립하여 Li 요소의 마지막 위치에 표시하도록 요청합니다. 효과는 다음과 같습니다.
그런 다음 재생 연결 클릭 이벤트를 모니터링하고 클릭 후 재생을 시작하십시오. 효과는 다음과 같습니다.
자, jQuery없이 시작하여 선택기를 사용자 정의하겠습니다.
코드 사본은 다음과 같습니다.
var $ = function (id) {
return document.getElementById (id);
};
Yahoo의 JSON 서비스는 콜백 매개 변수를 제공하므로 사용자 정의 콜백을 전달하여 데이터를 수락합니다. 특정 쿼리 문자열 어셈블리 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
var http = {
makerequest : 함수 (IDS, 콜백) {
var url = 'http://query.yahooapis.com/v1/public/yql?q=',
sql = 'select * from music.video.id ids in ( "%id%")',
format = "format = json",
핸들러 = "콜백 =" + 콜백,
script = document.createelement ( 'script');
sql = sql.replace ( '%id%', ids.join ( ' ","'));
SQL = EncodeUricomponent (SQL);
url + = sql + '&' + format + '&' + handler;
script.src = url;
document.body.appendChild (스크립트);
}
};
프록시 객체는 다음과 같습니다.
코드 사본은 다음과 같습니다.
var proxy = {
IDS : [],
지연 : 50,
타임 아웃 : NULL,
콜백 : NULL,
컨텍스트 : NULL,
// 재생 중에 콜백을 트리거하기 위해 요청 된 ID 및 콜백을 설정합니다.
makerequest : 함수 (id, 콜백, 컨텍스트) {
// 큐 DD에 큐에 추가하십시오
this.ids.push (id);
this.callback = 콜백;
this.context = 컨텍스트;
// 시간 초과를 설정합니다
if (! this.timeout) {
this.timeout = settimeout (function () {
proxy.flush ();
}, this.delay);
}
},
// 요청을 트리거하고 http.makerequest는 프록시 책임을 사용하여 호출되었습니다.
플러시 : function () {
// 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 <max; i += 1) {
proxy.callback.call (proxy.context, data.query.results.video [i]);
}
}
};
비디오 처리 모듈에는 주로 정보 얻기, 정보 표시 및 비디오 재생의 세 가지 하위 기능이 있습니다.
코드 사본은 다음과 같습니다.
var 비디오 = {
// 플레이어 코드를 초기화하고 재생을 시작합니다
getplayer : function (id) {
반환 '' +
'<object id = "uvp_fop"allowllscreen = "true">' +
'<param name = "movie"value = "http://d.yimg.com/m/up/fop/embedflv/swf/fop.swf"/////>' +
'<param name = "flashvars"value = "id = v' + id + '& eid = 1301797 & lang = us & enablefullscreen = 0 & shareenable = 1"///>' +
'<param name = "wmode"value = "Transparent"///>' +
'<embed' +
'높이 = "255"' +
'width = "400"' +
'id = "uvp_fop"' +
'allowllscreen = "true"' +
'src = "http://d.yimg.com/m/up/fop/embedflv/swf/fop.swf"' +
'type = "application/x-shockwave-flash"' +
'flashVars = "id = v' + id + '& eid = 1301797 & lang = us & ympsc = 4195329 & enablelscreen = 1 & shareenable = 1"' +
'///' +
'<// object>';
},
// 내용을 표시하기 위해 정보를 스플릿 한 다음 Li에 Appending의 하단에 표시합니다.
updateList : function (data) {
var id,
html = '',
정보;
if (data.query) {
data = data.query.results.video;
}
id = data.id;
html + = '<img src = "' + data.image [0] .url + '"///>';
html + = '<h2>' + data.title + '<// h2>';
html + = '<p>' + data.copyrightyear + ',' + data.label + '<// p>';
if (data.album) {
html + = '<p> 앨범 :' + data.album.release.title + ',' + data.album.release.releaseyear + '<br ///>';
}
html + = '<p> <a href = "http://new.music.yahoo.com/videos/--' + id + '">»play </a> <// p>';
info = document.createElement ( 'div');
info.id = "info" + id;
info.innerhtml = html;
$ ( 'v' + id) .AppendChild (정보);
},
// 정보를 가져 와서 표시합니다
getInfo : function (id) {
var info = $ ( 'info' + id);
if (! info) {
proxy.makerequest (id, videos.updatelist, 비디오); // 프록시 책임을 실행하고 비디오를 전달합니다. UPDATELIST 콜백 함수
반품;
}
if (info.style.display === "none") {
info.style.display = '';
} 또 다른 {
info.style.display = 'none';
}
}
};
이제 클릭 이벤트에 대한 코드를 처리 할 수 있습니다. 연결이 많이 있으므로 각 연결이 이벤트를 바인딩하면 성능에 문제가 있습니다. 따라서 이벤트를 <ol> 요소에 바인딩 한 다음 클릭 된 연결이 연결인지 여부를 감지합니다. 클릭이 비디오 주소라는 것을 의미하고 재생할 수 있습니다.
코드 사본은 다음과 같습니다.
$ ( 'vids'). onclick = function (e) {
var src, id;
e = e || Window.event;
src = e.target || e.srcelement;
// 연결이 아닌 경우 계속 처리하지 않습니다.
if (src.nodename.toupperCase ()! == "a") {
반품;
}
// 거품을 중지합니다
if (typeof e.preventDefault === "function") {
e.preventDefault ();
}
e.returnvalue = false;
id = src.href.split ( '-') [1];
// 제작 된 비디오 정보 영역에서 링크 재생을 클릭하면 재생이 시작됩니다.
// 그러면 반환은 계속되지 않습니다
if (src.classname === "play") {
src.parentnode.innerhtml = videos.getplayer (id);
반품;
}
src.parentnode.id = "v" + id;
videos.getInfo (id); // 이것은 처음 클릭 할 때 비디오 정보를 표시하기위한 처리 코드입니다.
};
모든 것을 선택하고 선택하는 코드는 비슷하므로 설명하지 않습니다.
코드 사본은 다음과 같습니다.
$ ( 'Toggle-All'). OnClick = function (e) {
var hrefs, i, max, id;
hrefs = $ ( 'vids'). getElementsByTagName ( 'a');
for (i = 0, max = hrefs.length; i <max; i += 1) {
// 재생 연결을 무시합니다
if (hrefs [i] .classname === "play") {
계속하다;
}
// 선택되지 않은 항목을 무시합니다
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는 재활용 할 수 있습니다.
참조 : "큰 대화 디자인 패턴"