代碼可視化的自動化之路
英文原文：The road to automatic code visualization
你知道，當你忙于一個復雜算法時，不得不返工一百萬次，因為你沒有正確地掌握細節？或者在你讀某人的代碼時，你不能確定它在做什么？此時，我們希望擁有代碼可視化（code visualization）工具，因為這會讓編程生活如此簡化。
本文，我將討論一些現有的用于代碼可視化的工具及其缺點，然后盡量總結它們背后的想法。為了創造得體的代碼可視化工具、以及如何達到這個程度，接著我會分享必備條件，我將給出應該采取的最初幾步。
工具
有很多不同的、顯示代碼可視化有用的情況。理解復雜的算法、理解其他人的函數，或在一個總體的不同范圍下，理解一個新的代碼庫、或類、或函數集 合。對于某些情況，可視化已經存在了。對于項目或代碼級別的范圍，有 UML，各種圖表。在算法的范圍，有些網站企圖可視化一部分最通用的算法。這些工具是偉大的，但是它們有一個大問題，使用它們要花費很長時間。在嚴峻的時 間下，我們只有兩周來開發下一個 非死book，你沒有時間畫復雜的 UML 圖。第二個問題，即使通用算法可能有可視化了，而自定義算法可能從來不會有。
也有一些工具和編程語言采用了不同的方式，你編程一部分，很快就能看到交互、或至少你正在做的可視化的結果。我在討論 dat.GUI，你知道的，你在很多 demo 里看到過黑色和彩色控制面板嗎？你能夠看到我的優雅的文本生成器示例（不要在較慢的設備上打開）。另一個例子是 Gooey，把 Python 命令行程序自動生成 GUI，無需從技術上理解的、用戶友好性。我過去在討論的一種編程語言是 JavaScript，從 JavaScript 剛剛出現的時候，它就與一種名叫 HTML 的接口結合在一起了。
允許你可視化代碼（非自動地）的第一套工具，允許你把現有代碼/配置轉化成接口（自動地）的第二套工具。問題在于，我們是否能夠自動產生接口， 包括輸入和輸出。可視化只是輸出。那么，我們為什么沒有盡量可視化代碼以使其易于理解的工具？聽說過一個對象圖表嗎？它們是可視化了當前程序或程序子集的 狀態的圖表。具有三種“水果”類型的對象的列表看起來是這樣的：
如果能夠使用這樣的可視化來調試，是不是很好呀？
我對接口的定義是，它有輸入、輸出或二者都有，幾乎任何東西都能用一到兩種方式定義為接口，石頭、鍵盤、樂器、人類……
實際上所有這些工具在做的，都是把一個想法、用代碼或圖表表達的想法，轉化成一個或多個不同種類的接口。編程語言把想法（以文本形式）轉化成不 同的接口，可以是 HMTL、可以是傳統的 GUI、命令行應用程序或 app。UML 把想法轉化成優雅的可視化概括。dat.GUI 用 HTML 把配置代碼轉化成清晰的配置 GUI。Gooey 把命令行程序轉化成傳統的 GUI。
它們都使用一個接口，然后轉化成一個或多個不同的接口。我樂于給出更多的例子，只是本文篇幅會過長。如果你對有趣的接口轉化的更多例子感興趣，看看 Slava Akhmechet 關于 lisp 的文章，它討論了把任何編程語言轉化為另一種語言的通用接口。或者 Philip C Monk 的博文，他討論了樹、圖像編程（他有 demo）等等。
想法
好吧，下一步，我們明白了代碼可視化的一些工具和方法。代碼可視化是把代碼或其子集可視化的過程。這可以在高等級（代碼庫或項目），中等級（函數文件、類、龐大的類）或低等級（函數級別，算法）。每個等級需要不同的分析代碼的方法和不同的細節等級。
在最低的等級，我們需要的是至少可視化最基本的數據類型的方法，最常見的是布爾值、字符串、數字、list 和對象（或字典、hashmap、任何你調用的東東）。還有，一種獲取可視化所需數據的方法。但是如果我們這樣做了，我們仍然面臨現有工具同樣的問題。然 而，通用算法可能已經有可視化了，自定義算法可能從來不存在。數據類型同樣如此，而 list 的可視化或許容易，當一個 list 包含數千個 item，或你無法使用內置 list，比如雙端隊列（棧），鏈表時，很快就變得復雜了。在有對象時，甚至更難，因為它們很快變得比程序的其它任何地方都要復雜。
然而不是不可能，弄清楚程序員在用哪種數據類型會是極端困難的（特別是沒有自定義類型的 JavaScript 之類的語言）。這就是為什么我們需要在兩個地方交互的工具。第一個是在程序運行（程序配置）之前，比如定義你在使用的數據類型，第二種就是在程序運行的時 候，縮放、padding、隱藏列表 items 中的 10000 個等等。
限于篇幅，方便交流起見，我忽略了中等級和高等級的細節。
偏題
本文原本是關于代碼可視化的，現在變成了隨筆，是關于：每樣事物都是一些事物的接口、電子信號是大腦和手之間的接口、鍵盤是手和電腦之間的接 口、文本編輯器是鍵盤和編程語言之間的接口、編程語言是想法和其它更多想法之間的抽象接口！我喜愛探索接口的想法，更普遍地推廣，因此我們可以用不同的方 式使用它們。
為什么我認為它是有用的，因為它不僅僅是有用的思想，而是一種不同的方法，產生了不同的解決方案、思路等等，而且它可以被用在優化以及概念或現有想法的產生上。
我希望本文能有一點點意義，激發人們隨后用不同的方式思考這個世界，我也打算寫更多的關于接口、不同種類的接口、接口之間的交互方面的文章。
- 注1：雙端隊列（deque，全名 double-ended queue）是一種具有隊列和棧性質的數據結構。雙端隊列中的元素可以從兩端彈出，插入和刪除操作限定在隊列的兩邊進行。http://zh.wikipedia.org/wiki/%E5%8F%8C%E7%AB%AF%E9%98%9F%E5%88%97
</ul>
<span id="shareA4" class="fl">
</span>