concepto
El modo de apariencia (modo de fachada) es un modo relativamente simple y ubicuo. El modo de apariencia proporciona una interfaz de alto nivel, lo que facilita llamar a clientes o subsistemas.
El modo de apariencia no es el modo adaptador, un modo adaptador es un envoltorio para adaptar la interfaz para usarla en un sistema incompatible. Crear elementos de apariencia es una conveniencia. No se utiliza para tratar con sistemas de clientes que requieren interfaces específicas, sino para proporcionar una interfaz simplificada.
Ejemplos de código JavaScript
Use un código simple para expresarlo
var getName = function () {return '' svenzeng "} var getsex = function () {return 'man'}Si necesita llamar a las funciones GetName y GetSex, respectivamente, puede usar una interfaz de nivel superior GetUserInfo para llamarlo.
var getUserInfo = function () {var info = a () + b (); Información de retorno;}Tal vez pregunte por qué no escribió el código getName y getsex juntos al principio, por ejemplo
var getNameandsex = function () {return 'svenzeng " +" hombre ";}La respuesta es obvia. Los chefs de cocción de la cantina no se enfrentarán a estos dos platos en la misma olla solo porque reservó un pato asado y un repollo. Prefiere proporcionarle una comida establecida de arroz de pato asado. También en la programación, debemos asegurarnos de que las funciones u objetos sean una granularidad razonable tanto como sea posible. Después de todo, no a todos les gusta comer pato asado y también le gusta comer repollo.
Otra ventaja del modo de apariencia es que puede ocultar detalles de implementación reales de los usuarios, y los usuarios solo se preocupan por la interfaz de más alto nivel. Por ejemplo, en la historia de la comida de arroz de pato asado, no le importa si el maestro hace el pato asado primero o el repollo salteado primero, y no le importa dónde creció el pato.
Finalmente, escribí un ejemplo del patrón de apariencia que todos hemos usado
var stOpeVent = function (e) {// bloquea el comportamiento predeterminado del evento y burbujas al mismo tiempo e.stoppropagation (); E.PreventDefault ();}Sé que el concepto de patrones de apariencia es fácil de dominar, y es posible que no necesariamente necesite un ejemplo de código JavaScript, pero algunas personas siempre se preocupan más por el código y pensarán que será más fácil de entender. Además, los artículos de JavaScript sin muestras de código no son convincentes en absoluto, por lo que deben eliminarse de Internet. Comencemos con un ejemplo simple de un oyente de eventos. Todos saben que agregar un oyente de eventos no es fácil a menos que solo quiera que el código se ejecute en algunos navegadores. Debe probar muchas formas de asegurarse de que el código para diferentes navegadores funcione correctamente. En este ejemplo de código solo agregamos la detección de características a este método:
función addEvent (elemento, type, func) {if (window.addeventListener) {element.addeventListener (type, func, false); } else if (window.attachevent) {element.attachevent ('on'+type, func); } else {elemento ['on'+type] = func; }}¡Es simple! Realmente desearía no poder escribir códigos innecesarios, haciéndolos más simples, pero si ese es el caso, no tendrá sentido y no querría leerlo, ¿verdad? Así que no lo creo, creo que quiero mostrarte algo más complicado. Solo quiero decir que tu código se vería así:
var foo = document.getElementById ('foo'); foo.style.color = 'rojo'; foo.style.width = '150px'; var bar = document.getElementById ('bar'); bar.style.color = 'rojo'; bar.style.width = '150px'; var baz = document.getElementById ('baz'); baz.style.color = 'rojo'; baz.style.width = '150px'; var baz = document.getElementById ('baz'); baz.style.color = 'rojo'; baz.style.width = '150px';¡Demasiado cojo! ¡Hiciste exactamente lo mismo para cada elemento! Creo que podemos hacerlo un poco más fácil:
función setStyle (Elements, propiedad, valor) {for (var i = 0, longitud = elements.length; i <longitud; i ++) {document.getElementById (Elements [i]). Style [Propiedad] = valor; }} // Ahora puede escribir de esta manera: setStyle (['foo', 'bar', 'baz'], 'color', 'rojo'); setStyle (['foo', 'bar', 'baz'], 'ancho', '150px');¿Crees que nuestro NB está roto? ¡Lo olvidas! ¡Somos programadores de JavaScript! ¿Puedes usar algunos cerebros para obtener algunas cosas reales? Tal vez podamos configurar todos los estilos solo una vez. Mira esto:
funciones setstyles (elementos, estilos) {for (var i = 0, longitud = elements.length; i <longitud; i ++) {var elemento = document.getElementById (Elements [i]); for (propiedad var en estilos) {element.style [propiedad] = styles [propiedad]; }}} // Ahora solo necesita escribir de esta manera: setstyles (['foo', 'bar', 'baz'], {color: 'rojo', ancho: '150px'});Si tenemos muchos elementos que desean establecer el mismo estilo, entonces este código realmente nos ahorra mucho tiempo.
Ventajas del modo de apariencia:
El propósito de usar el modo de apariencia es facilitar que los programadores escriban código combinado una vez y luego lo usen repetidamente, lo que ayuda a ahorrar tiempo y esfuerzo. Proporcione una interfaz simplificada para algunos problemas complejos.
El método de apariencia es conveniente para los desarrolladores. Bin ha proporcionado funciones de nivel relativamente alto, reduciendo la dependencia del código externo y agregando cierta flexibilidad adicional al desarrollo de sistemas de aplicación. Al usar el modo de aparición, se puede evitar un acoplamiento estricto al subsistema subyacente. De esta manera, el sistema se puede modificar sin afectar el código del cliente.
Desventajas del modo de apariencia:
A veces, los elementos de apariencia también pueden traer una carga adicional innecesaria. Antes de implementar algunas rutinas, debe considerar cuidadosamente su practicidad. A veces en comparación con una función de apariencia compleja, su función de composición es más atractiva en términos de fuerza. Esto se debe a que las funciones de apariencia a menudo pueden realizar tareas que no necesita.
Para un sitio web personal simple o un pequeño número de páginas de marketing, es posible que no sea prudente importar esta biblioteca JavaScript para un comportamiento un poco mejorado, como información sobre herramientas y ventanas emergentes. Considere usar solo unos pocos elementos de apariencia simples en este momento en lugar de una biblioteca llena de estas cosas.
Las funciones de apariencia proporcionan una interfaz simple para realizar varias tareas complejas, que hacen que el código sea más fácil de mantener y comprender. También pueden debilitar el acoplamiento entre subsistemas y código de cliente. Combine funciones comunes que a menudo aparecen juntas. Este modo se usa muy comúnmente en Scripting DOM, que requiere interfaces de navegador inconsistentes.