Quais são alguns exemplos de implementações de padrões de design usando JavaScript?

StackOverflow https://stackoverflow.com/questions/24642

Pergunta

Sou um programador moderadamente qualificado que usa JavaScript, mas não sou um guru.Eu sei que você pode fazer coisas muito poderosas com ele, só não vi muito além da manipulação básica do DOM.Gostaria de saber se as pessoas poderiam fornecer alguns exemplos de conceitos de padrões de design tradicionais, como Factory Method, Singleton, etc., usando JavaScript.Em que casos esses padrões seriam usados ​​na web?

Foi útil?

Solução

Eu só queria adicionar meu padrão JavaScript favorito que aprendi com Pro JavaScript Design Patterns que Jonathan Rauch já recomendou.

É o padrão singleton de namespace.Basicamente, você cria namespaces por meio de singletons que permitem ocultar métodos e variáveis ​​do uso externo.Os métodos ocultos/expostos estão, na verdade, ocultos porque são definidos no encerramento.

var com = window.com || {};
com.mynamespace = com.mynamespace || {};
com.mynamespace.newpackage = (function() {
    var myPrivateVariable = "hidden";
    var myPublicVariable = "exposed";

    function myPrivateMethod() {
        return "also hidden";
    }

    function myPublicMethod() {
        return "also exposed";
    }

    return {
        myPublicMethod: myPublicMethod,
        myPublicVariable: myPublicVariable
    };
})();

Outras dicas

Nickolay tocou nisso, mas os padrões de design não são consistentes entre linguagens que apresentam diferenças drásticas.Já li (e concordo) que um padrão de design geralmente é um sinal de falta de recursos na linguagem.

Como exemplo perfeito, o padrão "Factory" é completamente desnecessário em algumas linguagens, Ruby é o exemplo em que estou pensando (porque a construção do objeto é apenas um método na instância da classe):

# create a factory for MyObject
my_factory = MyObject
instance_1 = my_factory.new

# change the factory to another class
my_factory = MyOtherObject
instance_2 = my_factory.new

Sempre que você estiver aplicando um padrão de design a uma linguagem diferente daquela para a qual foi inicialmente desenvolvido, certifique-se de considerar se ele é REALMENTE necessário e de que maneiras você pode melhorá-lo com os novos recursos de linguagem disponíveis.Os padrões de design são apenas um guia, você deve sempre considerar se o uso que você pretende realmente precisa do padrão, ou se ele pode ser adotado da melhor forma no seu caso.

Há um bom livre livro online de Addy Osmani, apresentando padrões de design Javascript: Padrões de design JavaScript essenciais para iniciantes, Volume 1

@jamting:

O padrão de design singleton em JavaScript

Oh meu Deus.Estou sem palavras.

Para OP:sim, claro que você pode em certo sentido, mas alguns padrões, como você está acostumado, não são tão visíveis como em Java.Por exemplo, singleton seria simplesmente um objeto:

var singleton = {
    sayHello: function() {
       alert("Hello!")
    }
};

A Wikipédia tem um exemplo de Fábrica em JS.

Eu usei recentemente Melhor aula de animação de Bernie que faz uso extensivo do Estratégia Padrão de design.Bernie faz um ótimo trabalho ao descrever por que o Strategy Pattern deve ser usado, mas infelizmente não explica exatamente como o código funciona.Então, novamente, ao usar uma referência de Design Patterns, dê uma olhada no código e nos comentários em animator.js para obter um bom exemplo de como usar o Strategy Pattern.

Exemplo:

// This object controls the progress of the animation 
ex1 = new Animator();
// The Animator's subjects define its behaviour 
ex1.addSubject(updateButton);
function updateButton(value) {
    $('ex1Button').innerHTML = "Progress: " + Math.round(value * 100) + "%";
}

// now click below: each click to the button calls ex1.toggle()

Como é chamada essa prática em JavaScript?

Este é o padrão de design de auto-invocação.Eu nunca tinha visto isso até começar a usar Javascript.

Eu suspeito que sim - aqui está um exemplo de Singleton:

O padrão de design singleton em JavaScript

Claro que podem.Aqui está um livro sobre o assunto:
Padrões de design JavaScript profissionais
Aqui está um exemplo do padrão Factory:
Padrão de fábrica em Javascript

Gostaria de acrescentar aqui o que estudei em grupo com discussões sobre padrões de design em C# e JavaScript.O que é mais interessante para mim durante a reunião é que o cara do C# escreve códigos em JavaScript e a mesma coisa para o cara do JavaScript.Depois de sair da reunião procuro aprender mais em casa e blogar aquihttp://tech.wowkhmer.com/category/Design-Patterns.aspx para C# e JavaScript.

Ouvir para Justin Diaz falando sobre padrão de design para Javascript.A palestra também é baseada em seu livro Pro Javascript Techniques mencionado acima.A palestra dura cerca de 45 minutos no Google I/O

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top