conceito
O modo de aparência (modo de fachada) é um modo relativamente simples e onipresente. O modo de aparência fornece uma interface de alto nível, o que facilita ligar para clientes ou subsistemas.
O modo de aparência não é o modo adaptador, um modo adaptador é um invólucro para adaptar a interface para usá -lo em um sistema incompatível. Criar elementos de aparência é uma conveniência. Não é usado para lidar com sistemas de clientes que exigem interfaces específicas, mas para fornecer uma interface simplificada.
Exemplos de código JavaScript
Use um código simples para expressá -lo
var getName = function () {return '' svenzeng "} var getSex = function () {return 'man'}Se você precisar chamar as funções GetName e GetSex, respectivamente, poderá usar uma interface de nível superior getUserinfo para chamá-lo.
var getUserinfo = function () {var info = a () + b (); retornar informações;}Talvez você pergunte por que não escreveu o código GetName e GetSex juntos no início, por exemplo
var getNamEandSex = function () {return 'svenzeng " +" man ";}A resposta é óbvia. Os chefs de culinária da cantina não frutam esses dois pratos na mesma panela apenas porque você reservou um pato assado e um repolho. Ele prefere fornecer a você uma refeição definida de arroz de pato assado. Também na programação, precisamos garantir que as funções ou objetos estejam em uma granularidade razoável o máximo possível. Afinal, nem todo mundo gosta de comer pato assado e também gosta de comer repolho.
Outra vantagem do modo de aparência é que ele pode ocultar detalhes reais de implementação dos usuários, e os usuários se preocupam apenas com a interface de nível mais alto. Por exemplo, na história da refeição do conjunto de arroz de pato assado, você não se importa se o mestre faz o pato assado primeiro ou frite o repolho primeiro e não se importa onde o pato cresceu.
Finalmente, escrevi um exemplo do padrão de aparência que todos usamos
var stopevent = function (e) {// Block Event padrão Comportamento e bolhas ao mesmo tempo e.stopPropagation (); E.PreventDefault ();}Sei que o conceito de padrões de aparência é fácil de dominar, e você pode não precisar necessariamente de um exemplo de código JavaScript, mas algumas pessoas sempre se importam mais com o código e pensam que será mais fácil de entender. Além disso, os artigos JavaScript sem amostras de código não são convincentes, então eles devem ser excluídos da Internet. Vamos começar com um exemplo simples de ouvinte de evento. Todo mundo sabe que adicionar um ouvinte de evento não é fácil, a menos que você apenas queira que o código seja executado em alguns navegadores. Você precisa testar várias maneiras de garantir que o código para diferentes navegadores funcione corretamente. Neste exemplo de código, apenas adicionamos a detecção de recursos a este método:
função addEvent (elemento, tipo, func) {if (window.addeventListener) {element.addeventListener (tipo, func, false); } else if (window.attachevent) {element.attachevent ('on'+tipo, func); } else {element ['on'+type] = func; }}É simples! Eu realmente gostaria de não poder escrever códigos desnecessários, tornando -os mais simples, melhor, mas se for esse o caso, seria sem sentido e você não gostaria de lê -lo, certo? Então, acho que não, acho que quero mostrar algo mais complicado. Eu só quero dizer que seu código seria algo assim:
var foo = document.getElementById ('foo'); foo.style.color = 'vermelho'; foo.style.width = '150px'; var bar = document.getElementById ('bar'); bar.style.color = 'vermelho'; bar.style.width = '150px'; var baz = document.getElementById ('baz'); baz.style.color = 'vermelho'; Baz.style.width = '150px'; var baz = document.getElementById ('Baz'); baz.style.color = 'vermelho'; Baz.style.width = '150px';Muito coxo! Você fez exatamente a mesma coisa para cada elemento! Eu acho que podemos tornar isso um pouco mais fácil:
function setStyle (elementos, propriedade, valor) {for (var i = 0, length = elements.length; i <comprimento; i ++) {document.getElementById (elementos [i]). style [propriedade] = value; }} // Agora você pode escrever isto: setStyle (['foo', 'bar', 'baz'], 'color', 'vermelho'); setStyle (['foo', 'bar', 'baz'], 'largura', '150px');Você acha que nosso NB está quebrado? Você esquece! Somos programadores JavaScript! Você pode usar alguns cérebros para obter algumas coisas reais? Talvez possamos definir todos os estilos apenas uma vez. Confira isso:
function setStyles (elementos, estilos) {for (var i = 0, length = elements.Length; i <comprimento; i ++) {var element = document.getElementById (elementos [i]); for (var propriedade var em estilos) {element.style [propriedade] = styles [propriedade]; }}} // Agora você só precisa escrever da seguinte maneira: setStyles (['foo', 'bar', 'baz'], {color: 'Red', Width: '150px'});Se tivermos muitos elementos que desejam definir o mesmo estilo, esse código realmente nos economiza muito tempo.
Vantagens do modo de aparência:
O objetivo de usar o modo de aparência é facilitar para os programadores escrever código de combinação uma vez e depois usá -lo repetidamente, o que ajuda a economizar tempo e esforço. Forneça uma interface simplificada para alguns problemas complexos.
O método de aparência é conveniente para os desenvolvedores. O Bin forneceu funções de nível relativamente alto, reduzindo a dependência do código externo e adicionando alguma flexibilidade adicional ao desenvolvimento de sistemas de aplicativos. Usando o modo de aparência, o acoplamento apertado ao subsistema subjacente pode ser evitado. Dessa forma, o sistema pode ser modificado sem afetar o código do cliente.
Desvantagens do modo de aparência:
Às vezes, os elementos da aparência também podem trazer um fardo extra desnecessário. Antes de implementar algumas rotinas, você deve considerar cuidadosamente a praticidade deles. Às vezes comparado a uma função complexa de aparência, sua função de composição é mais atraente em termos de força. Isso ocorre porque as funções de aparência geralmente podem executar tarefas que você não precisa.
Para um site pessoal simples ou um pequeno número de páginas de marketing, pode não ser aconselhável importar esta biblioteca JavaScript para um comportamento pouco aprimorado, como dicas de ferramentas e pop-ups. Considere usar apenas alguns elementos de aparência simples neste momento, em vez de uma biblioteca cheia dessas coisas.
As funções de aparência fornecem uma interface simples para executar várias tarefas complexas, o que facilita a manutenção e o entendimento do código. Eles também podem enfraquecer o acoplamento entre subsistemas e código do cliente. Combine funções comuns que geralmente aparecem juntas. Esse modo é muito comumente usado no script DOM, que requer interfaces inconsistentes do navegador.