javascript 代码的压缩与解压缩

beyes

编写 javascript  和其它代码一样，为了容易阅读，经常会添加注释与排版，而在排版里，会有许多空格，制表，以及换行缩进等。这样一来，在最后使用这些代码时，会增加文件的尺寸，也增加了页面的加载时间，解决这个问题的方法是压缩代码，也就是去掉那些空格，注释以及缩进等；反之，还可以还原压缩后的代码，这个过程称之为解压缩。下面我们用 shell 来处理 javascript 代码的压缩和解压缩。

下面是一段 javascript 代码：

[Plain Text] 纯文本查看 复制代码

function dateFormat(date,format)      {
    var o = {
        "Y+" :  date.getFullYear ( ),
        "M+" :  date.getMonth ( )+1,  /*month*/
        "m+" :  date.getMonth ( )+1,  //month
        "d+" :  date.getDate ( ),     //day
        "h+" :  date.getHours ( ),    //hour
        "i+" :  date.getMinutes ( ),  //minute
        "s+" :  date.getSeconds ( ), //second
        "q+" :  Math.floor((date.getMonth()+3)/3),  //quarter
        "S"  :  date.getMilliseconds() /*millisecond*/
    }
    if(/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
    }
    for ( var k in o ) {
        if ( new RegExp("("+ k +")").test(format) ) {
            format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
        }
    }
    return format;
}

在上面的代码中，注释有 2 种风格，// 和 /* */，在压缩过程中这些注释要被去掉 。在方法的调用中，如 date.getMinutes ( )，getMinutes 和 左括号间有一个空格，而括号里也有一个空格，这些空格也要被去掉；又如，dateFormat(date,format) 和 左花括号 { 的中间也有好几个空格，这些空白的地方在压缩时也要将其去掉。此外，缩进和换行也要去掉。

下面逐步实现代码的压缩：

1. 去掉注释

# cat tmpcode.js |sed 's:/\*.*\*/::g' | sed 's/\/\/.*//g'

上面的做法中， sed 's:/\*.*\*/::g' 的作用是去掉 /* */ 风格注释，注意这里我们使用的冒号作为替换语法的分隔符(默认是 / 符号)，这么做的原因明显区分语法分隔符和要过滤掉的注释符号，因为它们是相同的一个。

2. 去掉所有 {,}， (,)， ;， :，,， 这些符号前后的空格

# cat tmpcode.js |sed 's:/\*.*\*/::g' | sed 's/\/\/.*//g' |sed 's/ *\([{}();,:]\) */\1/g'

上面，\1 代表 () 里面的内容，注意在 sed 里使用 () 包含一段正则时，左右两边括号要用加上反斜杠。


3.去掉 '\n' 和 '\t'
在上面的基础上去继续去掉换行符和制表符：

# cat tmpcode.js |sed 's:/\*.*\*/::g' | sed 's/\/\/.*//g' |sed 's/ *\([{}();,:]\) */\1/g' | tr -d '\n\t'
function dateFormat(date,format){var o ={"Y+":date.getFullYear(),"M+":date.getMonth()+1,"m+":date.getMonth()+1,//month"d+":date.getDate(),//day"h+":date.getHours(),//hour"i+":date.getMinutes(),//minute"s+":date.getSeconds(),//second"q+":Math.floor((date.getMonth()+3)/3),//quarter"S":date.getMilliseconds()}if(/(y+)/.test(format)){format = format.replace(RegExp.$1,(date.getFullYear()+"").substr(4 - RegExp.$1.length));}for(var k in o){if(new RegExp("("+ k +")").test(format)){format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k]:("00"+ o[k]).substr((""+ o[k]).length));}}return format;}

由上面输出可见，到此基本上已经实现了代码的压缩。但是还有一点，如果代码中若有多余的连续空格，比如 "length    ==    1" 这种情况，那么我们还可以如下做法：

# cat tmpcode.js |sed 's:/\*.*\*/::g' | sed 's/\/\/.*//g' |sed 's/ *\([{}();,:]\) */\1/g' | tr -d '\n\t' | sed 's/[ ]\+/ /g'

经过上面的一系列过滤后，已经实现了代码的压缩。当然了，如果我们从某网站上看到一些已经经过压缩的 js 代码，为了更好的阅读它们，我们可以对它们解压缩，方法如下：

# cat comjs.txt |sed 's/;/;\n/g; s/{/{\n\n/g; s/}/}\n\n/g'

上面的 comjs.txt 是经过压缩后的 js 代码。经过上面的解压缩处理后，代码上基本上可以很好的阅读了。

另外，本站亦提供了一个 js 代码在线解压缩工具，地址为：http://www.groad.net/jstool/index.htm