学习和记录源代码的新外观

TL;博士您好。 我叫Bogdan,我正在研究阅读代码的问题。 我刚刚下载了codecrumbs的第一个工作版本,这是一个用于学习使用面包屑的源代码的可视化工具。 github 仓库可以在这里查看。

图片

问题


最近,我对开始研究大型项目的源代码时遇到的主要问题进行了调查(如果您尚未参与,那么您仍然可以在这里完成调查)。

我感兴趣的主要问题是:为您学习新项目的代码最困难的部分到底是什么? 让我们在下图中查看响应的趋势。

图片

不出所料,将所有要点组合成一张图片要比了解特定功能或文件中的代码要困难得多(很奇怪的是,代码编辑人员更加关注“一个文件”而不是“整个图片” ”)。 问题是,当我们第一次打开项目代码时,一次有太多信息丢给我们。 我们开始毫无意义地在文件之间跳来跳去,完全混乱,经常打开同一文件几次,意识到“哦,我已经看到了,这不是这个地方”或“我刚刚看到的正确的地方在哪里” ”而且浪费时间。 因此,我们绝对需要某种工具来标记代码中的重要位置,并且理想情况下,要为所有工作方式建立非常“通用的视觉形象”。

救援的代码碎片


Codecrumbs(名称来源于“ code”和“ breadcrumb”)是一种工具,可让您在代码中保留“面包屑”并在其上构建可视化图表。

如何运作? 您执行codecrumbs命令,指定项目代码的路径,codecrumbs分析源代码并创建其可视化表示形式。 添加codecrumb-comment,代码库的更新状态将实时显示在浏览器的可视客户端中。

主要特点


面包屑的痕迹(“面包屑链”)-一系列面包屑,描述了应用程序内的某种情况(例如,身份验证或向服务器提交表单等)。

图片

依赖关系树(“依赖关系树”)-可以轻松确定“正在导入的内容”。

图片

流程图(“流程图”)-可让您查看所选文件的流程图。

图片

此外,仅通过同时运行多个项目的“ codecrumb”,就可以研究它们之间的集成。

图片

完成所有这些之后,您还可以下载并“发送给朋友”您刚刚学到的方案。 使用“下载”功能以json文件格式获取应用程序的当前状态。 该文件将包含用于显示电路的最少数据量。 为此,不必在本地具有相同的源代码-“ codecrumbs”可以在浏览器中以“独立”模式工作。 这里有一个例子。

图片

语言支持。 当前版本支持以下编程语言:

  • Java脚本
  • 打字稿
  • 巨蟒
  • p
  • 爪哇
  • C ++

JavaScript提供了比其他功能更多的功能,因为JavaScript仅使用AST解析器来处理代码。

进一步的计划


使用此工具(代码库),您可以更快地学习,记录和解释代码库。 此外,“下载/上传”功能使分发代码研究的结果变得非常容易。 最终目标是在https://codecrumbs.io上放置很多这样的“案例”,并获得具有Explaned with codecrumbs项目库风格的东西-每个人都可以在其中共享真实项目示例的知识。

即将推出更多酷功能,敬请期待! 是的,单击“星级”并告诉您的朋友:) Github存储库位于github.com/Bogdan-Lyashenko/codecrumbs 。 谢谢你

Source: https://habr.com/ru/post/zh-CN440786/


All Articles