欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  资讯频道

代码可视化的自动化之路

程序员文章站 2022-05-11 12:21:07
...

你知道,当你忙于一个复杂算法时,不得不返工一百万次,因为你没有正确地掌握细节?或者在你读某人的代码时,你不能确定它在做什么?此时,我们希望拥有代码可视化(code visualization)工具,因为这会让编程生活如此简化。

 

本文,我将讨论一些现有的用于代码可视化的工具及其缺点,然后尽量总结它们背后的想法。为了创造得体的代码可视化工具、以及如何达到这个程度,接着我会分享必备条件,我将给出应该采取的最初几步。

 

工具

 

有很多不同的、显示代码可视化有用的情况。理解复杂的算法、理解其他人的函数,或在一个总体的不同范围下,理解一个新的代码库、或类、或函数集合。对于某些情况,可视化已经存在了。对于项目或代码级别的范围,有 UML,各种图表。在算法的范围,有些网站企图可视化一部分最通用的算法。这些工具是伟大的,但是它们有一个大问题,使用它们要花费很长时间。在严峻的时间下,我们只有两周来开发下一个 Facebook,你没有时间画复杂的 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)是一种具有队列和栈性质的数据结构。双端队列中的元素可以从两端弹出,插入和删除操作限定在队列的两边进行(见*)。