Fork me on GitHub

Programming Design Notes

線上 Javascript 工具

| Comments

Google 推出了一款名為 Closure Compiler 的線上 Javascript 工具
這工具還能夠將常用的 Javascript Library 和自己的 Javascript 拼在一起並加以壓縮
例如有: jQuery, Prototype, Dojo, YUI 等等


除了壓縮外
還會提示 Javascript 有什麼錯誤


而壓縮方面有三種模式
  1. 清除空白行和空格 (Whitespace only)
  2. 清除空白行和空格, 將區域變數的名稱縮短 ()
  3. 除了 1 和 2 的功能外, 還會智能地將 Javascript 簡化
例如我將以下的 Javascript 使用 3 的方法壓縮



function hello(name) {
alert('Hello, ' + name);
}
function say(){
return 'hello';
}
hello('Lawrence');
alert(say());

結果會變成:
alert("Hello, Lawrence");alert("hello");

連 Function 也不見了
但出來的結果是一樣的


但使用這種方法壓縮會有一點問題
例如有一個Object
名稱是 Hello

function Hello(){
var self = this;
this.init = function(){
return self;
}
this.sayHello = function(){
alert("Hello");
}
}
var hello = new Hello().init();
hello.sayHello();

經壓縮後會變成:
function a(){var b=this;this.a=function(){return b};this.b=function(){alert("Hello")}}(new a).a().b();

連 Public (公開) 的 Function 名稱也換了
雖然這段 Javascript 沒有問題
但變得沒有擴充性了

網址: http://closure-compiler.appspot.com/home

相關書籍: Professional JavaScript for Web Developers (Wrox Programmer to Programmer)Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and librariesMurach's JavaScript and DOM Scripting (Murach: Training & Reference)