8

Sempre deixo meu código css e javascript minificado mas nunca tinha reparado no output gerado. Pois bem, notei que a última regra de um seletor (no css) e a última função (no javascript) sempre perde o ponto e vírgula. Por exemplo, uma regra simples no css:

div {
  border: 2px solid red;
  color: #fff;
}

Ficaria:

div{border:2px solid red;color:#fff} /*perdendo o último ponto e vírgula */

Um outro exemplo, no javascript:

$(function(){
   var foo = true;

   if(foo) {
     foo = false;
     bar();  
   }
});

Irá gerar:

$(function(){var foo=true;if(foo){foo=false;bar()}}) /* sem os últimos ponto e vírgula */

Em caso em que só existe uma função dentro de um bloco, ele também perde a pontuação.

if(foo){
  bar();
}

Vira:

if(foo){bar()}

A minha dúvida sobre o assunto é: A ausência desses vários ponto e vírgula podem influenciar de alguma forma no funcionamento do código? Fiz testes em códigos simples mas estou pensando se posso ter problemas em trabalhos mais complexos.

5
  • Sei que no css, para a última regra, a existência do ; é indiferente.
    – Cold
    28/10/2014 às 13:57
  • Acredito que vai depender muito da tecnologia, alguns browsers com codigo legacy ("velho") podem não reconhecer, mas para a maioria dos usuários que devem usar IE, Safari ou Chrome/Firefox não faça diferença.
    – Olimon F.
    28/10/2014 às 14:36
  • 1
    O ; é mero separador no CSS, nao tem razão de existir no final. Na verdade são 2 perguntas em uma, pq nao tem nada a ver a sintaxe de JS com a de CSS.
    – Square Obama
    28/10/2014 às 14:46
  • 1
    pt.stackoverflow.com/questions/3341/… este topico responde as suas duvidas, é uma resposta bem completa 28/10/2014 às 14:54
  • 2
    A pergunta é excelente. A resposta do bfavaretto também. Se quiser se aprofundar mais sobre como funciona o parsing do Javascript e como escrever código bom tanto para quem for manter quanto para o interpretador, recomendo ler o livro Maintenable Javascript, de Nicholas C. Zakas. Sobre o assunto específico da pergunta, pesquise por Automatic Semicolon Insertion - o mecanismo pelo qual o Javascript analisa e considera onde acaba uma expressão ;) 28/10/2014 às 17:13

2 Respostas 2

8

CSS

No caso do CSS, não vejo problemas em remover o ; da última propriedade de uma regra. Como depois dela vem a chave de fechamento, não tem como haver problemas. O minificador provavelmente faz isso para reduzir o tamanho do arquivo, salvando um caractere por regra.

JavaScript

No JS, as regras omissão do ; são mais complexas. Remover o ponto-e-vírgula logo antes do fechamento do bloco não me parece problemático, mas outros casos podem ser. Seu exemplo do $(function...), por exemplo. Vamos simplificar e ver onde pode dar problema. Basicamente o que você tem é uma chamada de função:

funcao()

Isso pode dar problema se outro arquivo for concatenado depois disso. O minificador não sabe o que faz a função faz. E se ela retornar uma função? Por exemplo:

function funcao() {
    return function(a) { console.log(a); }
}

Imagine algo concatenado depois disso, como um típico código que usa o module pattern:

(function() {
    return { foo: true };
}());

O código minificado e concatenado ficaria assim (supondo que funcao já estivesse disponível e no escopo):

funcao()(function() { return { foo: true };}())

O resultado é que a função retornada por funcao será invocada, recebendo como parâmetro o objeto { foo: true }. O objeto será logado para o console (pois é isso que nossa função de exemplo faz).

Portanto: uma retirada de ; em JavaScript, se não for feita com muito cuidado, pode sim causar efeitos colaterais.

0
  1. Na hora de aplicar as técnicas Minify , sem o ;, seu código provavelmente irá parar de funcionar;
  2. No meu ver fica algo mais bacana de se entender;
2
  • 3
    Isto seria uma opinião ou uma resposta? 28/10/2014 às 15:19
  • Apenas uma opinião. Devo ter alocado em local errado. 31/10/2014 às 12:12

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 .