龙空技术网

助力理解js代码,进阶JavaScript代码能力——js2flowchart

爱分享Coder 339

前言:

现时我们对“js获取返回值类型”大约比较关注,朋友们都需要剖析一些“js获取返回值类型”的相关文章。那么小编同时在网络上收集了一些有关“js获取返回值类型””的相关内容,希望各位老铁们能喜欢,我们一起来了解一下吧!

引言

js2flowchart 是一个可视化库,可将任何JavaScript代码转换为漂亮的SVG流程图。你可以轻松地利用它学习其他代码、设计你的代码、重构代码、解释代码。这样一个强大的神器,真的值得你拥有,看下面截图就知道了,有没有很强大。

Github

安装使用安装

yarn add js2flowchart
使用

index.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>fly测试</title></head><body> <div style="width:50%;float:left"> <p id="svgImage"></p> </div> <div style="width:50%;float:left"> <textarea name="" id="jsContent" style="width: 90%;height:900px" oninput="createSVG()"> </textarea> </div> <script src="./node_modules/js2flowchart/dist/js2flowchart.js"></script> <script src="./index.js"></script></body></html>

index.js

createSVG = () => { document.getElementById("svgImage").innerHTML = null; let code = document.getElementById("jsContent").value; const { createFlowTreeBuilder, createSVGRender } = js2flowchart; const flowTreeBuilder = createFlowTreeBuilder(), svgRender = createSVGRender(); const flowTree = flowTreeBuilder.build(code), shapesTree = svgRender.buildShapesTree(flowTree); const svg = shapesTree.print(); document.getElementById("svgImage").innerHTML = svg;};createSVG();

我们直接在文本域中输入自己的代码,如下,左边会直接生成流程图,这只是一个简单的示例:

js2flowchart的特性以及适用场景(来自官网翻译)

js2flowchart获取您的JS代码并返回SVG流程图,适用于客户端/服务器,支持ES6。

主要特点:

定义抽象级别以仅渲染导入/导出,类/函数名称,函数依赖性以逐步学习/解释代码。自定义抽象级别支持创建自己的抽象级别表示生成器,以生成不同抽象级别的SVG列表定义流树修改器以映射众所周知的API,例如[] .map,[]。forEach,[] .filter到方案上的循环结构等。销毁修饰符,用于在方案上用一个形状替换代码块自定义流树修改器支持创建自己的流修改器流树忽略过滤器完全省略一些代码节点,如日志行聚焦节点或整个代码逻辑分支突出显示方案的重要部分模糊节点或整个代码逻辑分支以隐藏不太重要的东西定义的样式主题支持选择您喜欢的样式自定义主题支持创建自己的主题,更好地适合您的上下文颜色自定义颜色和样式支持提供方便的API来更改特定样式而无需样板

用例场景:

通过流程图解释/记录您的代码通过视觉理解学习其他代码为有效JS语法简单描述的任何进程创建流程图

以上所有功能可以直接到github上详细了解,用法太多,这里就不在介绍了!

vscode扩展

这么强大的东西,有人肯定说如果在开发的时候实时看到流程图有助于理解代码,官网提供了插件(我在最新版中测试失效了,不知道是否是我使用的有问题还是插件本身的问题),如果感兴趣的可以到扩展商店搜索code-flowchart。如果测试成功,欢迎到评论区分享。以下是我vscode版本和官网的插件使用截图。

如果利用好这个插件,可以开发出Chrome插件,以及其他JavaScript编辑器或者IDEA的插件,由于官方github已经几个月没更新了,所以还不知道未来会不会支持!

总结

js2flowchart是一个比较实用的Javascript插件,可以用来做很多事情,不管是自己写代码。还是阅读别人的代码,都无疑是一大助力,能够帮助我们提升我们的代码能力,更容易的阅读代码,这样学习起来就快了,希望对你有所帮助!如果有什么好的建议,也可以到评论区分享!

标签: #js获取返回值类型