introduzir
Como o nome sugere, os agentes devem ajudar os outros a fazer as coisas. O GOF define o modelo proxy da seguinte maneira:
Modo proxy (proxy), fornece um proxy para outros objetos controlarem o acesso a esse objeto.
O modo proxy permite que o objeto proxy controla a referência de um objeto específico. Um proxy pode ser quase qualquer objeto: um arquivo, um recurso, um objeto na memória ou algo difícil de copiar.
texto
Vamos dar um exemplo simples. Se Dudu quer enviar iogurte e garotas rosas, mas não conhece suas informações de contato ou está envergonhado, e quer confiar seu tio para enviar essas rosas, então o tio é um agente (na verdade, é muito bom, você pode deduzir algumas flores para sua esposa), então como podemos fazer isso?
A cópia do código é a seguinte:
// Declare a beleza primeiro
var menina = função (nome) {
this.name = nome;
};
// Isso é Dudu
var dudu = função (garota) {
this.girl = garota;
this.sendgift = function (presente) {
alerta ("oi" + garota.name + ", dudu oferece um presente:" + presente);
}
};
// O tio é o agente
var proxytom = function (menina) {
this.girl = garota;
this.sendgift = function (presente) {
(New Dudu (garota)). Sendgift (presente); // Envie flores para Dudu
}
};
O método de chamada é muito simples:
A cópia do código é a seguinte:
var proxy = new proxytom (New Girl ("iogurte garota");
proxy.sendgift ("999 rosas");
Uma batalha prática
Através do código acima, acredito que todos são muito claros sobre o modo proxy. Vamos pegar o combate real: temos uma lista de reprodução simples e precisamos exibir o botão Introdução à música de vídeo e reproduzir abaixo da conexão ao clicar em uma única conexão (ou selecionar tudo). Ao clicar no botão Play, o vídeo é reproduzido. A estrutura da lista é a seguinte:
A cópia do código é a seguinte:
<H1> Dave Matthews Vids </h1>
<p> <span id = "Toggle-all"> Selecione tudo/Reselect </span> </p>
<ol id = "vids">
<li> <input type = "caixa de seleção" verificado> <a href = "http://new.music.yahoo.com/videos/---2158073"> covedigger </a> </li>
<li> <input type = "caixa de seleção" verificado> <a href = "http://new.music.yahoo.com/videos/--4472739"> salve-me </a> </li>
<li> <input type = "caixa de seleção" verificado> <a href = "http://new.music.yahoo.com/videos/-45286339"> cush </a> </li>
<li> <input type = "caixa de seleção" verificado> <a href = "http://new.music.yahoo.com/videos/---2144530"> Não beba a água </a> </li>
<li> <input type = "caixa de seleção" verificado> <a href = "http://new.music.yahoo.com/videos/---217241800"> engraçado da maneira que é </a> </li>
<li> <input type = "caixa de seleção" checado> <a href = "http://new.music.yahoo.com/videos/---2144532"> o que você diria </a>
</li>
</ol>
Vamos primeiro analisar o seguinte. Primeiro, não apenas monitoramos o evento de cliques da conexão A, mas também monitoramos o evento de clique de “Selecione All/Anti-Select” e solicitamos ao servidor que consulte as informações do vídeo e monte as informações HTML para exibi-las na última posição do elemento LI. O efeito é o seguinte:
Em seguida, monitore o evento de clique da conexão de reprodução e comece a jogar depois de clicar. O efeito é o seguinte:
OK, comece com, sem jQuery, vamos personalizar um seletor:
A cópia do código é a seguinte:
var $ = function (id) {
retornar document.getElementById (id);
};
Como o serviço JSON do Yahoo fornece parâmetros de retorno de chamada, passamos em nosso retorno de chamada personalizado para aceitar dados. O código de assembly de sequência de consulta específico é o seguinte:
A cópia do código é a seguinte:
var http = {
makerequest: function (ids, retorno de chamada) {
var url = http://query.yahooapis.com/v1/public/yql?q= ',
sql = 'selecione * de music.video.id onde os ids em ("%id%")',
format = "formato = json",
manipulador = "retorno de chamada =" + retorno de chamada,
script = document.createElement ('script');
sql = sql.replace ('%id%', ids.join ('","'));
sql = codeuricomponent (sql);
url + = sql + '&' + formato + '&' + manipulador;
script.src = url;
document.body.appendChild (script);
}
};
O objeto de proxy é o seguinte:
A cópia do código é a seguinte:
var proxy = {
ids: [],
Atraso: 50,
Tempo limite: nulo,
retorno de chamada: nulo,
Contexto: nulo,
// Defina o ID e o retorno de chamada solicitados para acionar o retorno de chamada durante a reprodução
makerequest: function (id, retorno de chamada, contexto) {
// Adicionar à fila DD à fila
this.ids.push (id);
this.callback = retorno de chamada;
this.Context = context;
// Defina o tempo limite
if (! this.timeout) {
this.timeout = setTimeout (function () {
proxy.flush ();
}, this.delay);
}
},
// aciona a solicitação e http.makerequest foi chamado usando responsabilidades de proxy
Flush: function () {
// proxy.handler é o retorno de chamada ao solicitar o Yahoo
http.makerequest (this.ids, 'proxy.handler');
// Depois de solicitar dados, execute o método proxy.Handler (há outro retorno de chamada interno)
// Tempo limite e fila clara
this.timeout = null;
this.ids = [];
},
manipulador: function (dados) {
var i, max;
// chamada de retorno de chamada para um único vídeo
if (parseint (data.query.count, 10) === 1) {
proxy.callback.call (proxy.context, data.query.results.video);
retornar;
}
// chamadas de retorno de chamada para vários vídeos
for (i = 0, max = data.query.results.video.length; i <max; i += 1) {
proxy.callback.call (proxy.context, data.query.results.video [i]);
}
}
};
O módulo de processamento de vídeo possui principalmente três sub-funções: obtendo informações, exibindo informações e reprodução de vídeos:
A cópia do código é a seguinte:
var videos = {
// inicialize o código do jogador e comece a jogar
getPlayer: function (id) {
retornar '' +
'<objeto id = "uvp_fop" DeitofullScreen = "true">' +
'<param name = "filme" value = "http://d.yimg.com/m/up/fop/embedflv/swf/fop.swf" /////>' +
'<param name = "flashvars" value = "id = v' + id + 'e eid = 1301797 & lang = US & EnablefullScreen = 0 & shareenable = 1" ///>' +
'<param name = "wmode" value = "transparent" ///>' +
'<incorporação' +
'Hight = "255"' +
'width = "400"' +
'id = "uvp_fop"' +
'DesfullScreen = "true"' +
'src = "http://d.yimg.com/m/up/fop/embedflv/swf/fop.swf"' +
'TIPO = "APLICAÇÃO/X-SHOCKWAVE-FLASH"' +
'flashvars = "id = v' + id + 'e eid = 1301797 & lang = US & ympsc = 4195329 & enablefullScreen = 1 & shareenable = 1"' +
'///' +
'<// object>';
},
// Speda as informações para exibir o conteúdo e depois exibi -las na parte inferior do Append to Li
Updatelist: function (dados) {
var id,
html = '',
informação;
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> Álbum:' + 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);
},
// Obtenha informações e exiba -as
getinfo: function (id) {
var info = $ ('info' + id);
if (! info) {
proxy.makerequest (id, vídeos.updatelist, vídeos); // Execute as responsabilidades de proxy e passe nos vídeos.
retornar;
}
if (info.style.display === "nenhum") {
info.style.display = '';
} outro {
info.style.display = 'nenhum';
}
}
};
Agora podemos lidar com o código para eventos de clique. Como existem muitas conexões, se cada conexão vincular o evento, obviamente haverá um problema com o desempenho. Portanto, vinculamos o evento ao elemento <ol> e, em seguida, detectamos se a conexão clicada é uma conexão A. Se isso significa que o clique é o endereço de vídeo e pode ser reproduzido:
A cópia do código é a seguinte:
$ ('vids'). OnClick = function (e) {
var src, id;
e = e || Window.Event;
src = e.Target || E.Srcelement;
// Se não for uma conexão, não continuarei processando
if (src.nodename.touppercase ()! == "A") {
retornar;
}
// Pare de bolha
if (typeof e.preventDefault === "function") {
E.PreventDefault ();
}
e.returnValue = false;
id = src.href.split ('-') [1];
// Se você clicar no link Play na área de informações de vídeo que foi produzida, a reprodução começará
// então o retorno não continuará
if (src.className === "play") {
src.parentnode.innerhtml = videos.getplayer (id);
retornar;
}
src.parentnode.id = "v" + id;
videos.getInfo (id); // Este é o código de processamento para exibir informações de vídeo ao clicar pela primeira vez
};
Os códigos para escolher tudo e escolher são semelhantes, por isso não explicaremos:
A cópia do código é a seguinte:
$ ('alternar-all'). OnClick = function (e) {
var hrefs, i, max, id;
hrefs = $ ('vids'). getElementsByTagName ('a');
for (i = 0, max = hrefs.length; i <max; i += 1) {
// ignora a conexão de jogo
if (hrefs [i] .className === "play") {
continuar;
}
// ignora os itens que não são selecionados
if (! hrefs [i] .parentnode.firstchild.checked) {
continuar;
}
id = hrefs [i] .href.split ('-') [1];
hrefs [i] .parentnode.id = "v" + id;
videos.getInfo (id);
}
};
Resumir
O modo proxy geralmente é adequado para as seguintes situações:
1. Proxy remoto, isto é, para fornecer representações locais para um objeto em diferentes espaços de endereço, para que o fato de existir um objeto em diferentes espaços de endereço possa ser oculto, assim como a classe proxy no serviço da web.
2. Os agentes virtuais criam objetos com alta sobrecarga, conforme necessário, e usá -los para armazenar objetos reais que levam muito tempo para instanciar. Por exemplo, ao renderizar o navegador, o problema pode ser exibido primeiro e a imagem pode ser exibida lentamente (ou seja, o agente virtual substitui a imagem real. Nesse momento, o agente virtual salva o caminho e o tamanho da imagem real.
3. Agente de segurança, usado para controlar as permissões ao acessar objetos reais. Geralmente, os objetos devem ter diferentes permissões de acesso.
4. Orientação inteligente, somente quando o objeto real é chamado, o agente lida com outras coisas. Por exemplo, a coleta de lixo em C# terá referências ao usar um objeto. Se o objeto não tiver referências, o GC poderá reciclá -lo.
Referência: "Big Talk Design Pattern"