logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

Namespaces

Na última aula falamos sobre o escopo de variáveis e vimos que as variáveis criadas no escopo global, podem ser acessadas de qualquer lugar do código, até mesmo dentro de funções e estruturas de bloco.

À medida em que a nossa aplicação web cresce e fica mais complexa, principalmente quando se usa bibliotecas externas, torna-se mais provável que em algum momento haja duas variáveis com o mesmo nome, o que pode causar muitos problemas.

Para resolver isto, usamos namespaces para separar partes do código e assim simular o escopo local oara as variáveis. A linguagem Javascript, na verdade não possui a funcionalidade de Namespaces, como outras linguagens de programação, mas temos algumas maneiras de simular esse comportamento e chegar ao mesmo resultado. A mais comum delas é através de objetos.

Namespace com objetos

                    

    var meuWebApp = {};
    
    meuWebApp.nome = "Felipe";
    
    meuWebApp.ver_nome = function() {
        console.log(this.nome);
    };

    meuWebApp.ver_nome(); // O console mostrará 'Felipe'
    // Podemos usar a keyword this para referenciar o objeto que guarda nossas variáveis e funções.


                    
                

Note que ao invés de criarmos uma função chamada ver_nome e uma variável chamada nome no escopo global, nós as criamos como propriedades do objeto meuWebApp. Isto significa que se houver variáveis ou funções com estes nomes em outras partes do código, não haverá conflito.

Poderíamos também ter criado a variável e a função no momento da criação do objeto.

                    

    var meuWebApp = {

        nome: "Felipe",

        ver_nome: function() {
            console.log(this.nome)
        }

    };

    meuWebApp.ver_nome();


                    
                

Namespace com funções

Outra maneira de simular um namespace em Javascript é com o uso de funções:

                    

    var meuWebApp = (function() {

        var nome= "Felipe";
        
        return {
            ver_nome: function() {
                return nome;    
            },
            mudar_nome(novo_nome) {
                nome = novo_nome;
            },
            apagar_nome: function() {
                nome = null;
            }
        };  
    })();   

    console.log( meuWebApp.ver_nome() );
    console.log( meuWebApp.mudar_nome('Marcos') );
    console.log( meuWebApp.apagar_nome() );

                    
                

Esta técnica utiliza module pattern. Neste tipo de estrutura, passamos um objeto pelo comando return, e podemos escolher propriedades específicas deste objeto ao invocar a função principal.

Uma das vantagens de se utilizar esta técnica é que mantemos as variáveis diretamente inacessíveis. Neste exemplo não é possível apagar ou mudar o nome a não ser por meio dos nossos próprios métodos, mudar_nome e apagar_nome, o que dá mais segurança ao código.

Índice de Aulas