引入编译的概念——压缩JavaScript文件

正式开发项目中，为了减小网页的大小，缩短网页的下载时间，在正式发布JavaScript之前，我们可以先对它进行压缩，这就是我们这篇文章的主要内容—— 压缩JavaScript文件。
      目前最常用的压缩工具有Packer和YUI Compressor。这两种工具使用起来都不是太难，下面我们以YUI Compressor为例为大家介绍一下压缩工具的用法。YUI Compressor是基于Java的jar应用，在使用之前需要先安装JDK，配置Java环境，然后要下载jar文件到本地，通过命令进行调用。当然对于我们做WEB开发的人来说，一般很少用到Java环境，如果不想安装JDK我们可以通过http://refresh-sf.com/yui/在线使用YUI Compressor。
      打开网页后会看到以下的界面：

      在此我们可以看到，通过YUI Compressor我们有三种方式可以进行压缩：1.将JavaScript代码直接复制到code文本框中，点击compress，生成压缩后的代码；2.可以将要压缩的JS文件通过Files选项上传到YUI Compressor进行压缩，得到压缩后的JS文件；3.可以填写要压缩的URL在线压缩。这三种情况可以根据我们的实际需求灵活选取，非常之方便。
      JS压缩通常的做法是去掉空格和换行，去掉注释，将复杂变量名替换成简单的变量名。压缩后的JavaScript文件确实变小了，但影响了代码的可读性，下面看一段我随意抽取的JS代码：

01

/**

02

* Smiley

03	* Theme URI http://www.lihuai.net

04	* @author ITLee

05	* @copyright 2012

06

*/

07	function grin(tag) {

08	//这里是ITLee的注释

09	var myField;

10	tag = ' ' + tag + ' ';

11	if (document.getElementById('comment') && document.getElementById('comment').type == 'textarea') {

12	myField = document.getElementById('comment');

13

} else {

14	return false;

15

}

16	if (document.selection) {

17	myField.focus();

18	sel = document.selection.createRange();

19	sel.text = tag;

20	myField.focus();

21

}

22	else if (myField.selectionStart || myField.selectionStart == '0') {

23	var startPos = myField.selectionStart;

24	var endPos = myField.selectionEnd;

25	var cursorPos = endPos;

26	myField.value = myField.value.substring(0, startPos)

27

+ tag

28	+ myField.value.substring(endPos, myField.value.length);

29	cursorPos += tag.length;

30	myField.focus();

31	myField.selectionStart = cursorPos;

32	myField.selectionEnd = cursorPos;

33

} else {

34	myField.value += tag;

35	myField.focus();

36

}

37

}

      压缩后的效果：

1

function grin(a){var d;a=" "+a+" ";if(document.getElementById("comment")&&document.getElementById("comment").type=="textarea"){d=document.getElementById("comment")}else{return false}if(document.selection){d.focus();sel=document.selection.createRange();sel.text=a;d.focus()}else{if(d.selectionStart||d.selectionStart=="0"){var c=d.selectionStart;var b=d.selectionEnd;var e=b;d.value=d.value.substring(0,c)+a+d.value.substring(b,d.value.length);e+=a.length;d.focus();d.selectionStart=e;d.selectionEnd=e}else{d.value+=a;d.focus()}}};

      压缩后，不但注释没有了，而且代码非常紧凑。如此紧凑的代码，很难阅读，非常不利于维护。所以，在压缩文件时，我们还需要保留压缩前的原始文件，方便我们维护时的需求。
      JavaScript本身是不需要编译的，放入浏览器就能运行，我们标题中的编译，并不是指类似于Java的编译，而是指代码的压缩。压缩后的文件虽然不利于维护，但是减小了文件的大小，提高了网页的浏览速度。如果需要修改，我们可以找到源文件对它进行修改，然后将修改后的文件再次编译，替换原来的编译文件。为了方便我们的维护，源文件的文件名与压缩后的文件名应该建立起对应关系，方便我们查找。比如源文件叫做itleeblog.js，压缩后的文件我们可以叫做itleeblog.min.js。
      另外需要说明的是YUI Compressor不但可以压缩JS文件，也可以压缩CSS文件，方法是一样滴。养成良好的压缩文件习惯，对提高网站的浏览速度还是非常有利的，希望这篇文章能够帮到大家。