Vanilla Javascript - #39 Date e Minificar

No tutorial de hoje aprenderemos a utilizar o construtor Date. Veremos também como minificar um arquivo javascript e pra que serve a minificação de documentos JS.

Construtor Date

Para trabalhar com datas no Javascript, podemos utilizar o construtor Date. Vamos fazer uma função timer como exemplo:

(function readyJS(win,doc){
   'use strict';

   //let date=new Date();
   //console.log(date);
   //console.log(date.getHours());
   //console.log(date.getMinutes());
   //console.log(date.getSeconds());
   //console.log(date.getFullYear());

    let result=doc.querySelector('#result');
    function clock() {
        let date=new Date();
        let hour=date.getHours();
        let minutes=date.getMinutes();
        let seconds=date.getSeconds();
        result.innerHTML=hour+':'+minutes+':'+seconds;
        setTimeout(clock,1000);

    }
    clock();
})(window,document);

Javascript minificado

O arquivo minificado serve para diminuirmos o tamanho final do arquivo e consequentemente ganharmos em performance, afinal o arquivo minificado retira do arquivo original espaços em branco, comentários e renomeia as variáveis de forma a diminuir o tamanho final do arquivo.

Para minificar seu arquivo JS você pode acessar o site JS Minifier e colar seu código. Ele vai gerar o código comprimido.

Repare o mesmo código acima numa versão minificada:

(function readyJS(c,b){let result=b.querySelector("#result");function a(){let date=new Date();let hour=date.getHours();let minutes=date.getMinutes();let seconds=date.getSeconds();result.innerHTML=hour+":"+minutes+":"+seconds;setTimeout(a,1000)}a()})(window,document);

Se você estiver utilizando o PhpStorm você pode utilizar a minificação automática. Siga os passos abaixo:
1 - Baixe o arquivo YuiCompressor
2 - Acesse File >> Settings >> File Watchers
3 - Adicione o YuiCompressor

Sucesso nos códigos e na vida!