Skip to main content
adicionou 2215 caracteres ao conteúdo
Fonte Link
utluiz
  • 74,6mil
  • 8
  • 162
  • 254

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");
    }
}

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");
    }
}
Fonte Link
utluiz
  • 74,6mil
  • 8
  • 162
  • 254

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.