曲径通幽论坛

标题: javascript 代码的压缩与解压缩 [打印本页]

作者: beyes    时间: 2012-4-7 13:01
标题: javascript 代码的压缩与解压缩
编写 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




欢迎光临 曲径通幽论坛 (http://www.groad.net/bbs/) Powered by Discuz! X3.2