Max Home IndustryЕсли вы раньше не сталкивались с идеей CodeCity, то это будет весело. Даже если у вас есть, стоит проверить, как выглядят некоторые знакомые библиотеки кода JavaScript в качестве городов.
Метафора визуализации программного обеспечения CodeCity была первоначально предложена Wettel и Lanza в 2011 году для визуализации объектно-ориентированного кода. JSCity-это реализация этих идей в JavaScript для JavaScript тремя исследователями Маркос Виана, Андре Хора и Марко Тулио Валенте, базирующимися в Бразилии.
В оригинале классы CodeCity представлены в виде зданий, но это пришлось адаптировать, поскольку JavaScript не является простым языком, основанным на классах. Очевидная вещь, которую нужно сделать, — это заменить класс функциями.
JSCity представляет программу JavaScript в виде города; папки-это районы, а файлы-подрайоны; здания-это функции; внутренние функции представлены в виде зданий в верхней части их ограждающей функции/здания. Количество строк исходного кода (LOC) представляет высоту зданий/функций; количество переменных (NOV) в функции коррелирует с базовым размером здания.
Поэтому, когда вы смотрите на городской пейзаж, большие здания соответствуют большим функциям.
Программа была реализована на JavaScript с использованием фреймворка Esprima для создания абстрактного синтаксического дерева для кода и трех элементов для 3D-графики. Как только город будет визуализирован, вы сможете перемещаться, изменять угол обзора камеры и увеличивать масштаб, чтобы лучше его рассмотреть. Программное обеспечение доступно на GitHub, чтобы вы могли его опробовать.
Исследователи также проанализировали 40 известных баз кода JavaScript, и они представляют три из них как особенно интересные-основные функции AngularJS, Bower и jQuery — посмотрите, можете ли вы догадаться, что есть что:
ГОРОД А
ГОРОД В
ГОРОД С
Должен признаться, что я почти сразу узнал свою любимую библиотеку JavaScript! Идентичность каждого города можно найти в самом конце этой новости — прокрутите вниз.