El modo Observador (también conocido como el modo editor-subscriber) debe ser uno de los modos más utilizados. Se usa ampliamente en muchos idiomas, incluidos los eventos DOM en los que generalmente contactamos. También es un modo observador implementado entre JS y DOM.
La copia del código es la siguiente:
div.OnClick = FUNTION CLAK () {
Alerta ("Haga clic ')
}
Siempre que se suscriba al evento de clic del DIV, se activará el clic de la función.
Entonces, ¿cuál es el modo observador? Echemos un vistazo al modo Observador en la vida.
Hay un dicho famoso en Hollywood. "No me llames, te llamaré". Esta oración explica los entresijos de un patrón de observador. Entre ellos, "I" es el editor y "You" es el suscriptor.
Déjame darte otro ejemplo. Cuando llegué a la empresa para una entrevista, cada entrevistador me decía después de terminar: "Por favor, deje su información de contacto y le notificaremos si hay alguna noticia". Aquí "I" es el suscriptor y el entrevistador es el editor. Así que no tengo que preguntar sobre los resultados de la entrevista todos los días o cada hora, y la iniciativa de comunicación está en manos del entrevistador. Y solo necesito proporcionar una información de contacto.
El modo Observador puede lograr el desacoplamiento entre los dos módulos muy bien. Si estaba desarrollando un juego HTML5 en un equipo, cuando comenzó el juego, era necesario cargar algún material de imagen. La lógica del juego se ejecuta solo después de cargar estas imágenes. Supongamos que este es un proyecto que requiere que varias personas trabajen. Completé los módulos Gamer y Map, y mi colega A escribió un IMAGAR LOADER Loadimage.
El código de loadimage es el siguiente:
La copia del código es la siguiente:
LoadImage (imgary, function () {
Map.init ();
Gamer.init ();
})
Cuando se carga la imagen, el mapa se representa y la lógica del juego se ejecuta. Bueno, el programa se está ejecutando bien. De repente, un día, recordé que debería agregar una función de sonido al juego. Debería hacer que el cargador de imágenes agregue una línea de código.
La copia del código es la siguiente:
LoadImage (imgary, function () {
Map.init ();
Gamer.init ();
Sount.init ();
})
Pero mi colega A, que escribió este módulo, fue de viaje al extranjero. Entonces lo llamé, oye. ¿Dónde está su función Loadimage? ¿Puedo cambiarlo? ¿Habrá algún efecto secundario después de que cambie? Como crees, todo tipo de cosas inquietadas sucedieron. Si pudiéramos escribir de esta manera al principio:
La copia del código es la siguiente:
loadImage.listen ("Ready ', function () {
Map.init ();
})
loadImage.listen ("Ready ', function () {
Gamer.init ();
})
loadImage.listen ("Ready ', function () {
Sount.init ();
})
Después de completar LoadImage, no le importa lo que suceda en el futuro, porque su trabajo está hecho. A continuación, solo publica una señal.
La copia del código es la siguiente:
loadImage.Rigger ("Ready ');
Luego, los sujetos que escucharon el evento 'Ready' de LoadImage recibirán notificaciones. Al igual que el último ejemplo de la entrevista. Al entrevistador no le importa dónde comerán los entrevistadores después de recibir los resultados de la entrevista. Solo es responsable de recopilar los currículums de los entrevistadores juntos. Cuando salgan los resultados de la entrevista, les notificarán uno por uno de acuerdo con el número de teléfono del currículum.
Después de hablar sobre tantos conceptos, podemos lograr una implementación específica. El proceso de implementación es en realidad muy simple. El entrevistador arroja el currículum en una caja, y luego el entrevistador llama a uno por uno para notificar los resultados en el momento adecuado.
La copia del código es la siguiente:
Events = function () {
var escucha, registro, obj, uno, eliminar, disparar, __THIS;
obj = {};
__Tis = esto;
escuchar = function (key, eventfn) {// tirar el currículum en el cuadro, la tecla es la información de contacto.
pila var, _ref; // La pila es una caja
stack = (_ref = obj [key])! = NULL? _ref: obj [key] = [];
return stack.push (eventfn);
};
One = function (Key, Eventfn) {
eliminar (clave);
return Listen (Key, Eventfn);
};
eliminar = function (key) {
var _ref;
return (_ref = obj [key])! = NULL? _ref.length = 0: void 0;
};
trigger = function () {// El entrevistador llama para notificar al entrevistador
var fn, pila, _i, _len, _ref, clave;
key = array.prototype.hift.call (argumentos);
stack = (_ref = obj [key])! = NULL? _ref: obj [key] = [];
para (_i = 0, _len = stack.length; _i <_len; _i ++) {
fn = pila [_i];
if (fn.apply (__This, argumentos) === falso) {
devolver falso;
}
}
devolver {
Escucha: escucha,
Uno: uno,
Eliminar: eliminar,
disparador: disparador
}
}
Finalmente, use el modo Observador para hacer una pequeña aplicación para estaciones de televisión para adultos.
La copia del código es la siguiente:
//Suscriptores
var adulttv = event ();
Adulttv .Listen ("Play ', Function (Data) {
alerta ("cuya película es hoy" + data.name);
});
//Editor
Adulttv .trigger ("Play ', {' Name ':' Ki Aso '})