google closure 探秘

最近发现很多网站使用:<script type=”text/javascript”” width=100% src=”http://www.****.com/www/default/js/??jquery.js,jquery-ui.js,jquery.form.js,jquery-validate.js,gift.js,account.js?version=0.292″></script>这样的一个src加载多个js文件


了解一下新的工具:Google Closure Compiler(俗称GC) https://developers.google.com/closure/compiler/?csw=1



现在的Web项目总是离不开大量JavaScript,而JS文件的体积也越来越大,也越来越影响页面的感知性能(Perceived Performance)。因此,我们会对JS文件进行压缩,一方面是使用Gzip,而另一方面则是去除JS文件里的注释、空白,并且压缩局部变量长度等等。对于一些成熟的类库来说,它们本身都会提供“完整注释”以及“强烈压缩”两个版本。但是,有时候我们需要自己修复类库里的bug,这只能在注释版中修改,对于压缩版自然就无能为力了。此外,自定义的脚本文件一般也值得一压。因此我在项目中时常会备一个脚本压缩工具。


压缩脚本的工具有很多,例如老牌的,或是(下称YC),它们都可以用来压缩脚本文件(后者还可以处理CSS)。不过在新项目中,我使用了新的工具:(下称GC)。GC有多种用法,例如,,还有。GC与YC不同的是,YC是一个压缩器(Compressor),而GC更是一个编译器(Compiler),也就是说GC的压缩并不仅仅是去除注释和空白,还可以在保证代码正确性的情况下进一步地改写成更省空间的做法




Closure 编译器



Closure 编译器是一个JavaScript优化器,为Web应用程序生成紧凑,高性能的JavaScript代码,它移除了不必要的代码,并经过重写和优化,保持娇小的身材,以便在浏览器的JavaScript引擎上运行得更快,这个编译器也会检查语法,变量引用和类型,并对常见的JavaScript陷阱发出警告,这些功能有助于你写出bug更少,更易于维护的程序。你也可以使用Closure检查器,它是一个Firebug扩展,主要用于调试那些难以阅读的代码。



因为JavaScript开发人员是一个多样化的群体,Google还设计了许多方法来运行Closure 编译器,同时内置了一个命令行工具,如果你还想偷懒,Google也提供了一个在线页面,你可以将你的JavaScript代码放入该网页中的文本输入框中,让它帮你编译,也可以调用RESTful API来完成编译。此外,Google提供了著名的Firefox 扩展Page Speed,让开发人员可以在Firefox 中方便地查看网页的性能。



Closure库



Closure库是一个广泛的,经过严格测试的,模块化的,跨浏览器的JavaScript库,Web开发人员可以在他们的用户界面中直接通过拖拉进行复用。



JavaScript缺乏一个类似STL或JDK的类库,现在好了,Google Closure库为我们带来了一个“标准的JavaScript库”,让我们可以更容易地创建大型复杂的Web应用程序,这个库需要和Closure编译器配合使用。你可以让你的项目变得更大和复杂(使用命名空间和类型检查),也可以让你的项目变得轻巧,快速(使用汇编)。Closure库为普通任务提供了干净的实用工具,因此你可以将时间花在编写你的应用程序上,不用再考虑编写自己的工具和浏览器抽象了。



Closure模板



Closure模板的前身是Web模板,通过预编译以提高JavaScript效率,Closure模板有一套简单的语法,程序员很快就可以掌握,和传统的模板系统不一样,你可以将Closure模板视为很小的组件,然后通过组装形成一个正式的Web页面,从此不再需要为每个页面设计一个大大的模板了。



Closure模板是使用JavaScript和Java实现的,因此你在服务端和客户端可以使用相同的模板。



小结



SyntaxHighlighter.highlight();