可视化代码架构反模式

在研究代码度量的过程中，笔者了解到了codeflower,一个代码可视化工具，作者Francois Zaninotto还提出了若干种代码的可视化模式 visual-patterns-in-source-code-arrangement 笔者用一个开源测试项目TestLink1.9的安装包进行了测试，尝试着找出一些代码的模式。 首先是一张全景图

index.png

让我们来找找可以找到哪些花？

1. 槲寄生式（The Mistletoe）

4.JPG

从图上也可以得出，这是指哪些代码树中的大个子。如示例当中的的这个js文件，居然有38697行。如果系统要进行重构的话，这种巨型文件是需要重点关注的对象。

2. 蒲公英式（The Dandelion）****

2.JPG

原作者把这种单一目录下存在诸多并列的小文件的情形表述成“蒲公英”。在这个testlink的项目中，这个php目录下存放数十个大小不一的文件，但是以小文件居多。

7.JPG

此外，笔者还找到了一个类似的图形，但是是以中型大小的文件为主。这主要是源码中的关于各种语言的本地化文件。

3. 葡萄式（Grapes）

5.JPG

与这个模式类似的，是有诸多大文件连接到同一个分支，这就是葡萄式。由于文件很大，又很多，密密麻麻堆叠在一起都很难看区分开来。这应该就是一种很难维护的代码库了。原作者也称，这是老化库（aging libraries）的典型代表，因为没有足够的时间进行重构。 4 鸡冠花式

11.JPG

这是笔者自己命名的一种模式，也是蒲公英的一种变体。虽然也是在一个目录下有许多并列的文件或者子目录及文件，但是它们数量没有多到围绕根结点一圈成为一个圆形，而是散开呈现半圆形，也就是鸡冠花的形状。

12.JPG

5 琼花式

1.JPG

这是前面蒲公英和鸡冠花的集合体。笔者一开始认为这是类似绣球花的图形，但就这种图形请教了花卉爱好者后，对方认为这更像是琼花的：中间是两性小花，然后周边是巨大的萼片发育而成的不孕花。

6. 柳枝式（Twigs）

6.JPG

这是原作者命名的一种模式，大量非常有深度的目录形成了细长瘦小的枝杈，期间散落着非常小的文件。 这是TestLink数据库表结构升级的代码，可以看出其最近的几个版本对于数据这块只是零散的修改，没有整体上的结构性升级。

7. 向日葵式（The Sunflower）

3.JPG

和前述琼花外大内小或者柳枝的细长条不同，这种模式是多个层级的文件和目录组成的一个巨大花盘，因此这种模式称之为向日葵式。

8. 五针松式（暂名）

8.JPG

这是笔者暂时命名的一种模式，从根节点开始，每个目录下带有若干个文件，以及目录，像五针松一样一节节展开。笔者观察到，类似的结构在SpringBoot的src/main/java目录下也可以看到。说明这是一种结构合理的正模式。

13.JPG

9. 双胞胎分枝（Twin Branches）

image.png

还有一种原作者命名的所谓“双胞胎分枝”，并没有在这个图中找到。因此，笔者找了一个设计良好的JAVA项目，这是其源码和测试代码的图形，两者看起来很相似，说明这个代码库有着很好的单元测试覆盖。

如何自己动手做一个？

说了这么多，想了解一下自己所在的项目是什么样的花么？ 只要访问 http://www.redotheweb.com/CodeFlower/ 然后下载一个cloc的代码行计算工具，将计算结果保存成csv并在上述页面上粘贴即可。

# Using curl and cloc (fast, accurate)
$ curl https://nodeload.github.com/symfony/symfony/tar.gz/master | tar xvz
$ cloc symfony-master --csv --by-file --report-file=symfony.cloc

是不是很简单？对代码可视化感兴趣的话，还可以试试以下这些工具： Gource Git Visualizer Codeology