每个JavaScript库都是一座城 和我在街头走一走

你是否有过CodeCity（代码城市）的想法，如果可以可视化，一定会很有趣。对于开发者和程序员从来就不缺少创意和灵感。

CodeCity软件的可视化最初由Wettel和Lanza于2011年提出，实现将面向对象的代码可视化。JSCity是由在巴西米纳斯联邦大学应用软件工程研究组三位研究人员Marcos Viana，Andre Hora和Marco Tulio Valente的研究成果。

在CodeCity中类标识为为建筑物，但由于JavaScript不是简单的基于类的语言，所以必须进行调整，用函数替换类。

所以，JSCity代表一个JavaScript软件或库为为一座城市；如文件夹是区域，文件是分区；建筑物是功能；内部功能表示为其嵌套函数/建筑物顶部的建筑物。源代码（LOC）的行数表示建筑物/功能的高度；功能中的变量数（NOV）与建筑物的基本尺寸相关。蓝色建筑被命名为功能；绿色建筑是匿名的功能。

jscity的构成说明

所以当你看到城市景观时，大楼对应于大功能。

该程序使用Esprima框架在JavaScript中实现，用于为代码生成抽象语法树，为3D图形生成ThreeJS。城市渲染后，你可以随意移动，更改角度并放大查看。该软件目前可在GitHub上进行试用。

Github库：https://github.com/ASERG-UFMG/JSCity/wiki/JSCITY

研究人员还分析了60个知名的JavaScript代码库，以下三个分别是AngularJS，Bower和jQuery所呈现的城市景观，猜出来了吗？

JScity-01

JScity-02

JScity-03