¿Cuáles son los patrones de diseño de desarrollo front-end más utilizados?
Modo de diseño de desarrollo front-end
Modo de módulo:
El mundo exterior no puede acceder a las variables y métodos definidos en expresiones de función directa y solo se pueden comunicar al mundo exterior a través de ellos. La interfaz proporcionada es accesible de forma "restringida". La encapsulación de propiedades y métodos se puede resolver mediante el alcance de la función.
var Persona = (función(){
var nombre = "xin";
var edad = 22;
función obtenerNombre (){
nombre de retorno
}
función getAge(){
edad de retorno; }
return {
getName: getName,
getAge: getAge
}
}})( );
console.log(age); // error: edad no definida
console.log(nombre); // error: nombre no definido
consola; .log(Person.age); // indefinido
console.log(Person.name); // solo se puede acceder a indefinido a través de la interfaz proporcionada por Person
console.log (Persona .getName()); // xin
console.log(Person.getAge()); // 22 patrón de constructor
función Persona(nombre, edad){ < / p>
este.nombre = nombre;
esta.edad = edad
}
Persona.prototipo = {
Constructor:
imprimirNombre: función(){
console.log(este.nombre
}, imprimirEdad: función(){
p>console.log(this.age);
}
}var persona = nueva Persona('xin', 22);
persona.printName(); // xin
persona.printAge(); // 22 modo mixto
función Persona(nombre, edad){
esta .nombre = nombre;
this.age = edad
};
Persona.prototipo.printName = función(){
console.name);
}función Estudiante(nombre, edad){
//Heredar propiedades de Persona
Persona .call(este, nombre, edad);
}función crear(prototipo){
función F(){};
F.prototipo = prototipo ;
return new F();
}
// Al heredar el método Persona, deja que el prototipo de Estudiante apunte a Persona.p
Objeto de rototipo
Student.prototype = create(Person.prototype);
Student.prototype.printAge = function(){
consola .log(this.age);
}var estudiante = new Student('xin', 22);
student.printName() // "xin", "xin" ", "xin", "xin", "xin", "xin", "xin", "xin", "xin", "xinprintName() // modo de fábrica "xin"
; Persona(nombre, edad){
var persona = nuevo Objeto();
persona.nombre = nombre;
persona.edad = edad;
p>
persona.printName = function(){
console.log(este.nombre
}; person.printAge = function (){
console.log(this.age);
}
Devuelve persona
return. persona;
}
var persona = Persona('xin', 22 patrón singleton
var Singleton = (función (){
);var instancia
función init(){
return {
};
getInstance: function(){
if(!instance){
instace = init()
} return instancia
;}
};
})(); Modo de publicación-suscripción
El modo de publicación-suscripción también se denomina modo de observador, que define un par de objetos. Múltiples dependencias, por lo que cuando el estado de un objeto cambia, se notificará a todos los objetos que dependen de él.
El patrón publicación-suscripción se utiliza ampliamente en programación asincrónica como alternativa a las funciones de devolución de llamada. Varios controladores de eventos pueden suscribirse al mismo evento y, cuando ese evento ocurra, se ejecutará el controlador de eventos correspondiente, en lugar de un mecanismo de notificación codificado entre objetos. Un objeto no tiene que mostrar llamadas a la interfaz de otro objeto, lo que reduce el acoplamiento entre módulos. Incluso si no se conocen los detalles de cada uno, no afectará la capacidad de comunicación entre ellos.
Aplicación.
p>La notificación de eventos DOM es una forma de hacer que las funciones de devolución de llamada sean útiles. p>
Eventos DOM
Los eventos DOM son un modelo típico de publicación-suscripción. Un nodo dom escucha un evento. Cuando se opera el nodo dom, se activa el evento correspondiente. se ejecute la función de respuesta. La función del evento es completamente desconocida para el nodo DOM. No necesita preocuparse por qué es el evento, cómo se activa y si se ejecuta bien o no.
Eventos personalizados
Especificar editor
La relación publicación-suscripción está representada por un objeto, donde la clave es el nombre del evento y el valor es una matriz de controladores de eventos, equivalentes a en la lista de suscriptores.
var EventCenter = (evento) y ejecute la función del controlador de eventos correspondiente
fire(evt, args){
//evt: nombre del evento, args : argumentos pasados al controlador de eventos
if(!events[evt]){
return
}
//Iterar; la lista de controladores de eventos y ejecutar cada uno de ellos
for(var i=0;ilt;events[evt].length;i){
events[evt][ i ].handler(args);
}
}
p>
//Utilice el enfoque de patrón de módulo para proporcionar una interfaz al mundo exterior para vincular controladores de eventos y activar eventos
return {
on：on，
fire： fire
}
})();Aplicación práctica
var Evento = (función (){
var eventos = {};
función en (evt, controlador){
eventos[evt] = eventos[evt]||[];
eventos[evt].push({
controlador . handler
});
} función fuego(evt, args){
if(!events[evt]){
retorno;
}
for(var i=0; ilt; eventos[evt]. longitud; i){
eventos[evt][ i ].handler(args);
}
} función desactivada(evt){
eliminar eventos[evt]; return {
encendido: encendido,
fuego: fuego,
apagado: apagado
}
} )();
Event.on('cambiar', función(val){
console.log('cambiar... ahora val es ' val);
Console.log('cambiar... ahora val es ' val
p>
});
Event.on('hacer clic', function(val){
console.log('haga clic... ahora val es ' val
})
Event.fire('); cambiar', 'xin');
Event.fire('hacer clic', '
xin');
Event.off('cambiar');
Event.on('clic', función(val){
consola.