O modo Observer (também conhecido como Modo Publicador-Substring) deve ser um dos modos mais usados. É amplamente utilizado em vários idiomas, incluindo os eventos DOM que geralmente entramos em contato. É também um modo de observador implementado entre JS e DOM.
A cópia do código é a seguinte:
div.OnClick = função click () {
alerta ("clique")
}
Desde que você se inscreva no evento de clique da DIV, o clique da função será acionado.
Então, qual é o modo de observador? Vamos dar uma olhada no modo de observador na vida.
Há um ditado famoso em Hollywood. "Não me ligue, eu ligo para você." Esta frase explica os meandros de um padrão de observador. Entre eles, "I" é o editor e "You" é o assinante.
Deixe -me dar outro exemplo. Quando cheguei à empresa para uma entrevista, todo entrevistador me dizia depois que terminei: "Por favor, deixe suas informações de contato e nós o notificaremos se houver alguma notícia". Aqui "I" é o assinante e o entrevistador é o editor. Portanto, não preciso perguntar sobre os resultados da entrevista todos os dias ou a cada hora, e a iniciativa de comunicação está nas mãos do entrevistador. E eu só preciso fornecer uma informação de contato.
O modo Observer pode alcançar muito bem a dissociação entre os dois módulos. Se eu estava desenvolvendo um jogo HTML5 em uma equipe, quando o jogo começou, algum material de imagem precisava ser carregado. A lógica do jogo é executada somente após o carregamento dessas imagens. Suponha que este seja um projeto que exija que várias pessoas trabalhem. Concluí os módulos do jogador e do mapa e meu colega A escreveu um carregador de imagens LoadImage.
O Código do LoadImage é o seguinte:
A cópia do código é a seguinte:
LoadImage (imgary, function () {
Map.init ();
Gamer.init ();
})
Quando a imagem é carregada, o mapa é renderizado e a lógica do jogo é executada. Bem, o programa está funcionando bem. De repente, um dia, lembrei -me de adicionar uma função de som ao jogo. Eu deveria ter o carregador de imagem adicionar uma linha de código.
A cópia do código é a seguinte:
LoadImage (imgary, function () {
Map.init ();
Gamer.init ();
Sount.init ();
})
Mas meu colega A, que escreveu este módulo, viajou para o exterior. Então eu liguei para ele, ei. Onde está sua função de carga? Posso mudar isso? Haverá algum efeito colateral depois que ele for alterado? Como você pensa, todos os tipos de coisas desconfortáveis aconteceram. Se pudéssemos escrever desta maneira no início:
A cópia do código é a seguinte:
loadImage.Listen ("Ready ', function () {
Map.init ();
})
loadImage.Listen ("Ready ', function () {
Gamer.init ();
})
loadImage.Listen ("Ready ', function () {
Sount.init ();
})
Depois que o LoadImage é concluído, não se importa com o que acontecerá no futuro, porque seu trabalho é realizado. Em seguida, apenas publica um sinal.
A cópia do código é a seguinte:
loadImage.Trigger ("Ready ');
Em seguida, os sujeitos que ouviram o evento 'Ready' do LoadImage receberão notificações. Assim como o último exemplo da entrevista. O entrevistador não se importa com onde os entrevistadores comerão depois de receber os resultados da entrevista. Ele é responsável apenas por coletar os currículos dos entrevistadores juntos. Quando os resultados da entrevista forem lançados, eles os notificarão um por um de acordo com o número de telefone no currículo.
Depois de falar sobre tantos conceitos, podemos obter uma implementação específica. O processo de implementação é realmente muito simples. O entrevistador joga o currículo em uma caixa e, em seguida, o entrevistador liga um por um para notificar os resultados no momento certo.
A cópia do código é a seguinte:
Events = function () {
var ouça, log, obj, um, remover, gatilho, __This;
obj = {};
__This = this;
Ouvir = function (chave, eventfn) {// Lança o currículo na caixa, a chave é a informação de contato.
var pilha, _ref; // pilha é uma caixa
pilha = (_ref = obj [key])! = nulo? _ref: obj [key] = [];
retornar pilha.push (eventfn);
};
um = função (chave, eventfn) {
remover (chave);
retornar ouça (chave, eventfn);
};
remover = function (chave) {
var _ref;
return (_ref = obj [key])! = nulo? _ref.Length = 0: void 0;
};
trigger = function () {// O entrevistador chama para notificar o entrevistador
var fn, pilha, _i, _len, _ref, key;
key = array.prototype.shift.call (argumentos);
pilha = (_ref = obj [key])! = nulo? _ref: obj [key] = [];
para (_i = 0, _len = Stack.length; _i <_len; _i ++) {
fn = pilha [_i];
if (fn.Apply (__This, argumentos) === false) {
retornar falso;
}
}
retornar {
Ouça: Ouça,
um: um,
Remover: Remover,
gatilho: gatilho
}
}
Por fim, use o modo de observador para fazer uma pequena aplicação para estações de TV adultas.
A cópia do código é a seguinte:
// assinantes
var adulttv = event ();
adulttv .Listen ("play ', function (dados) {
alerta ("cujo filme é hoje" + data.name);
});
//Editor
adulttv .trigger ("play ', {' name ':' ki aso '})