美文网首页
你的代码也可以貌美如花

你的代码也可以貌美如花

作者: antony已经被占用 | 来源:发表于2019-11-21 22:54 被阅读0次

    在研究代码度量的过程中,笔者了解到了codeflower,一个代码可视化工具,作者还提出了若干种代码的可视化模式
    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

    相关文章

      网友评论

          本文标题:你的代码也可以貌美如花

          本文链接:https://www.haomeiwen.com/subject/ddeaictx.html