在时光的角落里，拘一朵代码给你看

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