5

Tenho o seguinte cenario:

HTML:

<script src="JS1.js">
<script src="JS2.js">

NO JS1 tenho o seguinte:

$(document).ready(function(){
   var pagina = "site1";

   iniciarSite();
});

NO JS2 tenho o seguinte:

function iniciarSite(){
   if(pagina == "site1"){
       alert("Estou no site 1");
   }
}

O erro é que a variavel 'pagina' nao existe nesse contexto.

9
  • 4
    Não tem como fazer com variável local, só com global ou passando valores de uma função para outra.
    – bfavaretto
    Commented 14/01/2015 às 18:23
  • 3
    @JoaoPaulo Sua função iniciarSite é global. Se você criar var pagina fora de qualquer função, ela também será global. Etc. Se você prevê que o JS2.js irá definir muita coisa como global, pode valer a pena criar um único objeto para "concentrar" todas as variáveis e funções definidas/usadas por esse script, para não poluir o namespace.
    – mgibsonbr
    Commented 14/01/2015 às 18:35
  • 1
    Qual é o problema de fazer iniciarSite(pagina);? defenindo a função: function iniciarSite(p){ if(p == "site1"){ // etc
    – Sergio
    Commented 14/01/2015 às 18:54
  • 1
    @JoaoPaulo então e porque não passar um objeto como argumento da função? Acho que tens de mostrar mais (ou tudo) o que pretendes fazer senão vais ter respostas que não vão acertar no problema porque estás a deixar detalhes importantes de fora...
    – Sergio
    Commented 14/01/2015 às 19:07
  • 1
    Outra coisa na linha do que o @Sergio disse: se você tem controle dos dois arquivos, será que as funções deveriam mesmo estar divididas assim entre eles? Será que não seria o caso de ter um objeto em que as funções seriam métodos, e as variáveis seriam propriedades?
    – bfavaretto
    Commented 14/01/2015 às 19:18

2 Respostas 2

4

Você deve declarar a variável globalmente.

var pagina;
$(document).ready(function(){
    pagina = "site1";
    iniciarSite();
});

ou

$(document).ready(function(){
    window.pagina = "site1";
    iniciarSite();
});

Outra alternativa é passar a variável por parâmetro.

2

Não recomendo usar variáveis globais. Vejamos algumas possibilidades para evitar isso.

Solução usando um objeto como parâmetro

Um objeto { ... } é uma forma flexível de passar vários parâmetros quando necessário, como se fosse um mapa.

$(document).ready(function(){
  iniciarSite({
    pagina: "site1",
    outroAtributo: 10
  });
});

function iniciarSite(args){
  if(args.pagina == "site1"){
    alert("Estou no site 1");
  }
}

Solução usando um estado global

Não considero uma solução elegante, afinal ainda é uma variável global, porém é melhor juntar todo o "lixo" num lugar só do que ter variáveis "soltas" e "esparramadas" por todo o código.

var pageConfig = {
  pagina: "site1" //valor default
};

$(document).ready(function(){
  //necessário apenas se o valor mudar durante a execução
  //pageConfig.pagina = "site1"; 

  iniciarSite();
});

function iniciarSite(){
  if(pageConfig.pagina == "site1"){
    alert("Estou no site 1");
  }
}

É um chute, mas acredito que o arquivo JavaScript que define o valor da variável pagina seja um arquivo específico incluído num HTML específico, enquanto o outro arquivo JavaScript seja um arquivo geral incluído em várias páginas.

Se for isso, o seguinte exemplo seria algo mais adequado:

Arquivo específico:

//define as propriedades da página atual
var pageAttributes = {
  pagina: "site1"
  /*Outras propriedades da página*/
};

Arquivo geral:

//lê propriedades da página específica e inicializa o site
$(function() {
  if (pageAttributes) { //verifica se existem propriedades, caso contrário não faz nada
    if (pageAttributes.pagina == "site1") {
      alert("Estou no site 1");
    }
  }
});

No exemplo acima, o objeto pageAttributes armazena as configurações específicas da página. Isso nem precisaria ficar num JavaScript separado. Esse tipo de informações pode ir dentro do HTML mesmo.

Só não esqueça que o script específico deve ser incluído sempre antes do script geral.

Não verifique a página

Uma solução mais drástica, mas que considero mais flexível e adequada, seria não codificar orientado a páginas, mas sim a componentes na página.

Isso significa que, ao invés de um código que "sabe" em que página está, seria melhor um código que "reage" adequadamente em qualquer página.

Como fazer isso? Existem várias formas.

Imagine um cenário onde você quer decorar suas tabelas com com plugin Data Tables, usando o comando dataTables(). O problema é que somente as telas de pesquisa possuem tabelas.

A princípio você poderia fazer algo assim:

function iniciarSite(args){
  if(args.pagina == "pesquisa-paises"){
    $('#tabela-paises').dataTables();
  }
  if(args.pagina == "pesquisa-estados"){
    $('#tabela-estados').dataTables();
  }
  if(args.pagina == "pesquisa-municipios"){
    $('#tabela-municipios').dataTables();
  }
}

Entretanto, poderíamos generalizar isso muito facilmente usando uma classe especial, por exemplo decorate-dt. Com uma pequena modificação nas tabelas (<table class="decorate-dt">) nosso código poderia terminar assim:

function iniciarSite(args){
    $('.decorate-dt').dataTables();
}

Ele sempre seria executado e não faria nada no caso de não encontrar tabelas com a classe CSS.

E se fosse necessário personalizar uma ou outra tabela com parâmetros específicos? Basta usar atributos data-* nas tags correspondentes, então toda a configuração fica no HTML, sem necessidade de script.

Plugins reconhecidos como o DataTables e os plugins JavaScript do Bootstrap possuem suporte nativo a esse tipo de estrutura.

Para rotinas próprias, use a função jQuery.data() para ler as configurações específicas.

Aliás, mesmo que você queira manter a verificação de qual página você está ainda poderia usar esta técnica. Coloque um atributo data no seu (<body data-pagina="site1">) e depois acesse o atributo. Exemplo:

function iniciarSite(args){
    var pagina = $('body').data('pagina');
    if (pagina  == "site1") {
      alert("Estou no site 1");
    }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .