本篇文章是我们《良好的JavaScript编程习惯》的第四讲,在前三讲中我们分别介绍了如何避免JavaScript冲突给JavaScript程序一个统一的入口JavaScript文件应该放在网页的什么位置。正式开发项目中,为了减小网页的大小,缩短网页的下载时间,在正式发布JavaScript之前,我们可以先对它进行压缩,这就是我们这篇文章的主要内容—— click here 压缩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压缩
      在此我们可以看到,通过YUI Compressor我们有三种方式可以进行压缩:1.将JavaScript代码直接复制到code文本框中,点击compress,生成压缩后的代码;2.可以将要压缩的JS文件通过Files选项上传到YUI Compressor进行压缩,得到压缩后的JS文件;3.可以填写要压缩的URL在线压缩。这三种情况可以根据我们的实际需求灵活选取,非常之方便。
      JS压缩通常的做法是去掉空格和换行,去掉注释,将复杂变量名替换成简单的变量名。压缩后的JavaScript文件确实变小了,但影响了代码的可读性,下面看一段我随意抽取的JS代码:

/** * Smiley * Theme URI http://www.lihuai.net * @author ITLee * @copyright 2012 */ function grin(tag) { //这里是ITLee的注释 var myField; tag = ' ' + tag + ' '; if (document.getElementById('comment') && document.getElementById('comment').type == 'textarea') { myField = document.getElementById('comment'); } else { return false; } if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = tag; myField.focus(); } else if (myField.selectionStart || myField.selectionStart == '0') { var startPos = myField.selectionStart; var endPos = myField.selectionEnd; var cursorPos = endPos; myField.value = myField.value.substring(0, startPos) + tag + myField.value.substring(endPos, myField.value.length); cursorPos += tag.length; myField.focus(); myField.selectionStart = cursorPos; myField.selectionEnd = cursorPos; } else { myField.value += tag; myField.focus(); } }

      压缩后的效果:

http://www.hoplites.com.mx/essays-on-macbeth/ essays on macbeth 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()}}};

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

如非特殊说明,文章均为ITLee原创,转载请注明!
原文地址:http://www.lihuai.net/qianduan/js/352.html/

http://www.queen-jungle.com/assignment-help-phd/ 【技术交流,欢迎大家拍砖】

  1. 林氏智造 说道:

    感觉你有写书的潜力。。压缩文件加快文件加载速度。能运用工具生成压缩后的文件,在开发阶段可以很好的控制流程!