представлять
Как следует из названия, агенты должны помочь другим делать что -то. GOF определяет модель прокси следующим образом:
Прокси -режим (прокси) предоставляет прокси для других объектов для управления доступом к этому объекту.
Прокси -режим позволяет объекту прокси управлять эталоном конкретного объекта. Прокси может быть практически любым объектом: файл, ресурс, объект в памяти или что -то, что трудно скопировать.
текст
Давайте приведем простой пример. Если Дуду хочет отправить йогурт и маленькую девочку розы, но не знает ее контактную информацию или смущена и хочет поручить ее дяде отправлять эти розы, тогда дядя - агент (на самом деле, это довольно хорошо, вы можете вычесть несколько цветов своей жене), так как мы можем это сделать?
Кода -копия выглядит следующим образом:
// Сначала объявить красоту
var Girl = function (имя) {
this.name = name;
};
// это дуду
var dudu = function (Girl) {
this.girl = девушка;
this.sendgift = function (подарок) {
Alert («Привет» + Girl.name + », Дуду дает вам подарок:« + подарок);
}
};
// дядя - агент
var proxytom = function (Girl) {
this.girl = девушка;
this.sendgift = function (подарок) {
(Новый Дуду (девушка)). SendGift (подарок); // отправлять цветы для Дуду
}
};
Метод вызова очень прост:
Кода -копия выглядит следующим образом:
var proxy = new Proxytom (New Girl ("йогуртная девушка"));
proxy.sendgift ("999 розы");
Практическая битва
Через приведенный выше код, я считаю, что все очень четко понимают режим прокси. Давайте возьмем фактический бой: у нас есть простой плейлист, и нам нужно отобразить кнопку «Введение и воспроизведение» под соединением при нажатии на одно соединение (или выберите все). Нажав кнопку воспроизведения, видео воспроизводится. Структура списка заключается в следующем:
Кода -копия выглядит следующим образом:
<h1> Дейв Мэтьюз VIDS </H1>
<p> <span id = "toggle-all"> выберите All/Reselect </span> </p>
<ol id = "VIDS">
<li> <input type = "checkbox" проверено> <a href = "http://new.music.yahoo.com/videos/--2158073"> Gravedigger </a> </li>
<li> <input type = "fackbox" проверено> <a href = "http://new.music.yahoo.com/videos/--4472739"> Сохранить меня </a> </li>
<li> <input type = "checkbox" проверено> <a href = "http://new.music.yahoo.com/videos/--45286339"> Crush </a> </li>
<li> <input type = "fackbox" проверено> <a href = "http://new.music.yahoo.com/videos/--2144530"> Не пейте воду </a> </li>
<li> <input type = "checkbox" проверено> <a href = "http://new.music.yahoo.com/videos/--217241800"> смешно, как это </a> </li>
<li> <input type = "fackbox" проверено> <a href = "http://new.music.yahoo.com/videos/--2144532"> Что бы вы сказали </a>
</li>
</ol>
Давайте впервые проанализируем следующее. Во-первых, мы не только отслеживаем событие Click Connection A, но и отслеживаем событие Click «Выбрать All/Anti-Select», а затем просим сервер запросить видео информацию и собрать информацию HTML, чтобы отобразить ее в последней позиции элемента LI. Эффект заключается в следующем:
Затем следите за событием Click подключения к воспроизведению и начните играть после нажатия. Эффект заключается в следующем:
Хорошо, начните с, без jQuery, давайте настроим селектор:
Кода -копия выглядит следующим образом:
var $ = function (id) {
return document.getElementbyId (id);
};
Поскольку служба Yahoo's JSON предоставляет параметры обратного вызова, мы передаем наш пользовательский обратный вызов, чтобы принять данные. Конкретный код сборки строки запроса выглядит следующим образом:
Кода -копия выглядит следующим образом:
var http = {
makerequest: function (ids, обратный вызов) {
var url = 'http://query.yahooapis.com/v1/public/yql?q=',
sql = 'select * from music.video.id, где идентификаторы в ("%id%")',
format = "format = json",
handler = "обратный вызов =" + обратный вызов,
script = document.createElement ('script');
sql = sql.replace ('%id%', ids.join ('","'));
SQL = Encodeuricomponent (SQL);
url + = sql + '&' + format + '&' + handler;
script.src = url;
document.body.appendchild (script);
}
};
Прокси -объект заключается в следующем:
Кода -копия выглядит следующим образом:
var proxy = {
IDS: [],
Задержка: 50,
Тайм -аут: null,
обратный вызов: null,
Контекст: NULL,
// Установите запрошенный идентификатор и обратный вызов, чтобы вызвать обратный вызов во время воспроизведения
Makerequest: function (id, обратный вызов, контекст) {
// Добавить в очередь DD в очередь
this.ids.push (id);
this.callback = обратный вызов;
this.context = context;
// установить тайм -аут
if (! this.imeout) {
this.imeout = setTimeout (function () {
proxy.flush ();
}, this.delay);
}
},
// запустить запрос, и http.makerequest был вызван с использованием прокси -обязательств
Flush: function () {
// proxy.handler - обратный вызов при запросе yahoo
http.makerequest (this.ids, 'proxy.handler');
// После запроса данных выполните метод Proxy.handler (внутри установлен еще один обратный вызов)
// четкий тайм -аут и очередь
this.imeout = null;
this.ids = [];
},
обработчик: function (data) {
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 video = {
// Инициализировать код игрока и начать играть
GetPlayer: function (id) {
вернуть '' +
'<object id = "uvp_fop" uplulllscreen = "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 = "прозрачный" ///>' +
'<Embed' +
'Высота = "255"' +
'width = "400"' +
'id = "uvp_fop"' +
'AlludfullLScreen = "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 & enablefulllscreen = 1 & shareenable = 1"' +
'///' +
'<// Object>';
},
// Сплайс информация для отображения контента, а затем отобразить ее в нижней части добавления в LI
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 (info);
},
// получить информацию и отображать ее
getInfo: function (id) {
var info = $ ('info' + id);
if (! info) {
proxy.makerequest (id, videos.updatelist, видео); // выполнить обязанности по доверенности и передавать функцию обратного вызова в видео.
возвращаться;
}
if (info.style.display === "нет") {
info.style.display = '';
} еще {
info.style.display = 'none';
}
}
};
Теперь мы можем обрабатывать код для Click Events. Поскольку существует много подключений, если каждое соединение связывает событие, очевидно, что будет проблема с производительностью. Таким образом, мы связываем событие с элементом <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.cecked) {
продолжать;
}
id = hrefs [i] .href.split ('-') [1];
hrefs [i] .parentnode.id = "v" + id;
videos.getinfo (id);
}
};
Суммировать
Режим прокси, как правило, подходит для следующих ситуаций:
1. Удаленный прокси, то есть предоставлять локальные представления для объекта в разных адресах, так что тот факт, что объект существует в разных адресах, может быть скрыт, как и класс прокси в веб -службе.
2. Виртуальные агенты создают объекты с высокими накладными расходами по мере необходимости, и используют их для хранения реальных объектов, которые занимают много времени для создания экземпляра. Например, при рендеринге браузера проблема может быть отображена сначала, и изображение может отображаться медленно (то есть виртуальный агент заменяет реальное изображение. В настоящее время виртуальный агент сохраняет путь и размер реального изображения.
3. Агент безопасности, используемый для управления разрешениями при доступе к реальным объектам. Как правило, объекты должны иметь разные разрешения на доступ.
4. Интеллектуальное руководство, только когда называется реальный объект, агент обрабатывает другие вещи. Например, сбор мусора в C# будет иметь ссылки при использовании объекта. Если у объекта нет ссылок, GC может перерабатывать его.
Ссылка: «Образец дизайна больших разговоров»