<script type="text/javascript">
//TAMANHO: 932 bytes

// The -is- object is used to identify the browser.  Every browser edition
// identifies itself, but there is no standard way of doing it, and some of
// the identification is deceptive. This is because the authors of web
// browsers are liars. For example, Microsoft's IE browsers claim to be
// Mozilla 4. Netscape 6 claims to be version 5.

var is = {
    ie:      navigator.appName == 'Microsoft Internet Explorer',
    java:    navigator.javaEnabled(),
    ns:      navigator.appName == 'Netscape',
    ua:      navigator.userAgent.toLowerCase(),
    version: parseFloat(navigator.appVersion.substr(21)) ||
             parseFloat(navigator.appVersion),
    win:     navigator.platform == 'Win32'
}
is.mac = is.ua.indexOf('mac') >= 0;
if (is.ua.indexOf('opera') >= 0) {
    is.ie = is.ns = false;
    is.opera = true;
}
if (is.ua.indexOf('gecko') >= 0) {
    is.ie = is.ns = false;
    is.gecko = true;
}
</script>

ficaria:

<script type="text/javascript">
// TAMANHO: 440 bytes
var is={ie:navigator.appName=='Microsoft Internet Explorer',java:navigator.javaEnabled(),ns:navigator.appName=='Netscape',ua:navigator.userAgent.toLowerCase(),version:parseFloat(navigator.appVersion.substr(21))||parseFloat(navigator.appVersion),win:navigator.platform=='Win32'}
is.mac=is.ua.indexOf('mac')>=0;if(is.ua.indexOf('opera')>=0){is.ie=is.ns=false;is.opera=true;}
if(is.ua.indexOf('gecko')>=0){is.ie=is.ns=false;is.gecko=true;}
</script>

Como podem ver, apenas uma lógica simples já diminuiu em pouco mais de 50%. Esse é objetivo do JSMIN. Mas ainda existe uma outra maneira de compactar mais ainda seu código.

Essa outra técnica consiste em pegar as palavras usadas repetidas, como “function”, “var”, “alert”, e usar em seu lugar, uma variável de nome pequeno, como a, b, c. Depois, é feito um eval desse resultado que, via expressão regulares, irão substituir os a, b, c por seus nomes originais como “function”, “var”, “alert”, etc. Para pequenos códigos, essa técnina não faz muita diferença, mas para grandes códigos é muito mais eficiente. O mesmo código do exemplo anterior compactado ficaria:

<script type="text/javascript">
eval(function(p,a,c,k,e,d){while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+c.toString(a)+'\\b','g'),k[c])}}return p}('j 1={5:2.7==\'m k i\',g:2.h(),6:2.7==\'l\',3:2.u.s(),t:9(2.b.r(q))||9(2.b),n:2.o==\'p\'}1.a=1.3.4(\'a\')>=0;d(1.3.4(\'c\')>=0){1.5=1.6=e;1.c=8}d(1.3.4(\'f\')>=0){1.5=1.6=e;1.f=8}',31,31,'|is|navigator|ua|indexOf|ie|ns|appName|true|parseFloat|mac|appVersion|opera|if|false|gecko|java|javaEnabled|Explorer|var|Internet|Netscape|Microsoft|win|platform|Win32|21|substr|toLowerCase|version|userAgent'.split('|')))
</script>

Neste caso ficou com 529 bytes. Mas experimente pegar grandes arquivos e passar essa compactação. Uso o framework MooTools e baixei uma versão compactada, e outra normal. A versão normal tem 140kb, já a compactada ficou com 49kb. Muita diferença neh. Só não esqueça de ao usar essas compactações javascript, sempre guarde a versão original do arquivo, pois muitas vezes o código fica ilegível. Não é a toa que os compactadores são chamados também de ofuscadores.

<script src="mootools.js" type="text/javascript"></script>
<script type="text/javascript">
    var url = "./inc/ajax_processa.php";
    var params = {operacao: 'excluiUsuario', idUsuario: '50'};
    /*
    o postBody pode receber tanto uma querystring
    ("operacao=excluiUsuario&idUsuario=50"), um objeto,
    como no exemplo, ou então um elemento form
    */
    var myAjax = new Ajax(url, {method: 'post', postBody: params}).request();
</script>

Além de Ajax, o MooTools tem muitos outros recursos. Por exemplo, para quem já precisou pegar o tamanho da janela, sabe que é um problema para ser cross-browser, usando document.documentElement.clientWidth ou document.body.clientWidth. Você não teria esse problema. Apenas dar o include no arquivo do mootools, e o objeto window terá dois novos métodos: getWidth() e getHeight(). Muito interessante neh.

Algumas funções auxiliares também foram adicionados nos objetos javascript, como o método “trim()” em todas as strings, métodos de conversão de QueryString para Objeto JSON e vice-versa. Arrays ganharam novos métodos como forEach, extend, associate, remove. Elementos ganharam também getParent(), getTag(), getValue(), injectBefore(), injectAfter(), e muito mais.

Ainda não explorei tanto, mas uma coisa que dá pra notar é que o framework se propõe a facilitar ainda mais o dia-a-dia com JavaScript. Por favor, gostaria que comentassem a opinião dos leitores sobre o Mootools. Para quem não conhece, vale a pena pelo menos dar uma olhada.