如何閱讀JavaScript/CSS壓縮程式碼？快使用程式碼格式化工具 / How to Maxify/Parsing/Format Minified Code

9月 05, 2014 程式寫作 , CSS , IDE , JavaScript , NetBeans , Programming/CSS , Programming/JavaScript , Software/NetBeans 1 Comments Edit Copy Download

為了閱讀被壓縮(minify)的JavaScript與CSS程式碼，我們可以使用線上工具Code Formatter或是NetBeans的format指令來為程式碼進行排版。

You can use some tools to maxify/parse/format the minified JavaScript or CSS codes, for example, Online Code Formatter or NetBeans.

關於壓縮程式碼 / Minify Code

JavaScript與CSS程式碼的特性在於必須下載到使用者客戶端才能執行，因此降低程式碼的大小是很常見的方式。JavaScript跟CSS通常是以壓縮(minify)的形態發佈給大家使用。被壓縮的程式碼檔案名稱通常會加上「.min」，而原始碼通常會加上「.src」，舉例來說：

這是jQuery 1.11.1原始碼的樣子。檔案大小是276KB。

這是jQuery 1.11.1壓縮程式碼的樣子。檔案大小是93.5KB，幾乎是原始碼的1/3大小。

壓縮程式碼中會移除註解、刪除空白與換行、縮短變數名稱（例如變數用了var book，會縮短成var a）。我之前也介紹過使用YUI Compressor與Minify壓縮程式碼的方法。而現在壓縮JavaScript跟CSS已經是主流用法，像是Fat-Free Framework中也直接內建了壓縮工具，非常方便。

為什麼要閱讀被壓縮的程式碼？ / To Read Minified Code

雖然像是jQuery這種知名的函式庫會提供非壓縮的原始碼供大家閱讀研究，但是還是很多專案並沒有提供解壓縮的原始碼，而只有被壓縮的程式碼可以看。

我最近在研究如何撰寫CKeditor的plugin，可惜他的教學跟文件寫的並不是很好。後來我覺得比起研究文件，不如直接修改程式碼，說不定還比較快。

可惜的是，大部分CKeditor中plugin的程式碼都是壓縮後的結果，閱讀起來不太容易，我們需要一些解壓縮(maxify)工具來輔助我們閱讀這些程式碼。

在此介紹兩種格式化被壓縮程式碼的方便工具：NetBeans的format指令跟線上工具。

NetBeans的格式化指令 / “Format” in NetBeans

我使用的是NetBeansIDE 8.0。要格式化被壓縮的JavaScript程式碼的做法如下：

1. 開啟JavaScript檔案
   
2. 開啟Source > Format 
   
3. 變成了漂亮的排版
   

不過你可以注意到下面還是有一團程式碼沒有解壓縮到，這似乎是NetBeans的限制。此外，NetBeans也不能解壓縮CSS程式碼，使用範圍有限。

使用Code Formatter解壓縮 / Maxify Code on Online Code Formatter

這個工具名稱叫做「Format, Beautify, Maxify, Unpack or Deobfuscate JavaScript/jQuery/HTML/JSON/CSS Codes」，有點長，還是用網址上的Code Formatter來稱呼好了。

這工具用法很簡單。首先先把壓縮的程式碼貼在框框中，然後按下下面的按鈕「Click here to Format/Beautify/Maxify Your JavaScript/jQuery/JSON//HTML Codes」。

程式碼就以漂亮的版面排版好了，而且NetBeans沒解開的後面部分也排版的漂漂亮亮，這樣就能夠更輕易地閱讀程式碼了，真是令人開心呢。

希望這些工具能夠幫助程式開發者更容易閱讀程式碼。學程式的第一步就是模仿別人怎麼寫，加油！