日期:2014-05-16  浏览次数:20331 次

用JS Builder合并混淆Ext2源文件

?JS Builder是一个可以实现JavaScript脚本文件(或css文件)的合并和混淆的工具(可以在http://code.google.com/p/js-builder/上下载到1.1.2.0的安装版本)尤其是使用诸如ext、dojo等开源的JavaScript前台框架的时候,大量的js(或css)文件不仅使用上麻烦,而且还会增加Web应用的网络负载,最好的办法就是把它们进行必要的合并和混淆(注:受网络协议的限制,当js(或css)文件的大小小于某一个上限的时候下载所用的时间是固定的,但是一旦超过这个上限,下载时间就会明显变长,所以必要的合并混淆是合理的有效的)。
???????JS Builder采用项目的概念,用xml格式的.jsb文件表示一个项目、指名这个项目所要处理的js文件们、定义多个合并混淆的操作,主要是通过下列的节点和属性来定义的。
project:根节点,定义整个项目的配置信息,包括项目的名称、作者、版本、版权等信息的属性,定义了项目的输出文件目录(output属性)、是否复制源文件(source属性)、源文件输出目录(source-dir属性)、是否混淆单个文件(minify属性)、单个混淆文件的输出目录(min-dir属性)、是否生成文档(doc属性)以及文档生成目录(doc-dir属性)等。
directory:设置项目操作的文件目录,必须设置,否则看不到文件目录树,无法执行项目编译功能。name属性设置目录的路径,但是好像仅支持当前路径,空值表示当前路径。
target:表示项目的一个个任务目标,包括目标名称(name属性)、生成文件路径名称(file属性,可以使用美元符号变量的方式引用project节点的属性值动态生成文件的名称,如ext-core-$version.js生成的文件名为ext-core-2.2.js)、是否生成调试文件(debug属性),shorthand属性不知道是什么意思,需要进一步研究。target的子节点include,name属性指示源文件的路径和名称。
file:指示当前目录下的一个js文件(通过设置后缀也可以把其它类型的文件),name指示文件的路径和名称。每个文件都会有一个file节点与其对应,所以file节点可能会很多,一般来说在打开关闭JS Builder或者保存项目的时候会自动生成file节点。
<?xml version="1.0" encoding="utf-8"?>
<project path="" name="Ext - JS Lib" author="Ext JS, LLC" version="2.2" copyright="Ext JS Library $version&#xD;&#xA;Copyright(c) 2006-2008, $author.&#xD;&#xA;licensing@extjs.com&#xD;&#xA;&#xD;&#xA;http://extjs.com/license" output="E:\JS Builder\outputs\ext22" source="False" source-dir="$output\source" minify="False" min-dir="$output\build" doc="False" doc-dir="$output\docs">
? <directory name="" />
? <target name="Core" file="$output\ext-core-$version.js" debug="True" shorthand="False" shorthand-list="YAHOO.util.Dom.setStyle&#xD;&#xA;YAHOO.util.Dom.getStyle&#xD;&#xA;YAHOO.util.Dom.getRegion&#xD;&#xA;YAHOO.util.Dom.getViewportHeight&#xD;&#xA;YAHOO.util.Dom.getViewportWidth&#xD;&#xA;YAHOO.util.Dom.get&#xD;&#xA;YAHOO.util.Dom.getXY&#xD;&#xA;YAHOO.util.Dom.setXY&#xD;&#xA;YAHOO.util.CustomEvent&#xD;&#xA;YAHOO.util.Event.addListener&#xD;&#xA;YAHOO.util.Event.getEvent&#xD;&#xA;YAHOO.util.Event.getTarget&#xD;&#xA;YAHOO.util.Event.preventDefault&#xD;&#xA;YAHOO.util.Event.stopEvent&#xD;&#xA;YAHOO.util.Event.stopPropagation&#xD;&#xA;YAHOO.util.Event.stopEvent&#xD;&#xA;YAHOO.util.Anim&#xD;&#xA;YAHOO.util.Motion&#xD;&#xA;YAHOO.util.Connect.asyncRequest&#xD;&#xA;YAHOO.util.Connect.setForm&#xD;&#xA;YAHOO.util.Dom&#xD;&#xA;YAHOO.util.Event">
??? <include name="core\DomHelper.js" />
??? <include name="core\Template.js" />
??? <include name="core\DomQuery.js" />
??? <include name="util\Observable.js" />
??? <include name="core\EventManager.js" />
??? <include name="core\Element.js" />
??? <include name="core\Fx.js" />
??? <include name="core\CompositeElement.js" />
??? <include name="data\Connection.js" />
??? <include name="core\UpdateManager.js" />
??? <include name="util\DelayedTask.js" />
? </target>
? <file name="ext.jsb_" path="" />
? <file name="ext1.jsb" path="" />
? <file name="license.txt" path="" />
</project>
??????? JS Builder从.jsb文件获取项目的配置信息,反之也提供相应的功能可视化的修改项目任务,这些修改都会保存到配置文件中。工具的使用要比jsb文件的编写简单的多,下面是几张截图。JS Builder应该是一个较早的版本,但是功能相当不错。Ext的当前的最新版本是3.0,Ext的官方网站上提供了JSBuilder2的下载,JSBuilder2是一个用java编写的js(css)文件的合并混淆工具,遗憾的是仅仅提供了命令行格式的使用方式,但是功能上差不多。合并混淆以后js文件尺寸会大大减小,但是为了达到更好的压缩效果,还可以使用GZIP的压缩方式对合并混淆以后的js文件进行进一步的压缩,压缩后的文件后缀为gzjs,在页面上的引用方式和js一样。如下:
?????? <script type="text/javascript" src="ext/adapter/ext/ext-base.gzjs"></script>
?????? 但是需要编写一个gzjs的过滤器用于设置Content-Encoding为gzip。