学算法认准 labuladong
点击卡片可搜索文章👇
在线网站 labuladong.online
快过年了,咱不讲太硬核的东西了,就给大家简单汇报一下近期我给刷题全家桶做的更新。
上篇文章有很多读者问算法可视化是否会开源,我有这个打算,不过得重构一下,把代码写的好看一点,尽量再把 Python 语言支持上,然后再考虑开源供大家学习参考。
本文主要介绍两个重要更新,第一个是网站和插件全线集成可视化编辑器,第二个是编辑器支持@visualize choose/unchoose
注释更清晰地帮助读者理解递归过程。
全面集成可视化编辑器
上篇文章发布了网页版本的可视化编辑器,地址:
https://labuladong.online/algo-visualize/
但这样有两个问题:
1、目前网站只支持 JavaScript 语言,而部分读者对 JavaScript 不太熟悉。
2、大家刷题的时候一般是使用我的 Chrome 插件、vscode 插件 或者 jetbrains 插件,如果对某个题目的解法不理解,还需要复制代码到网页上去修改和运行,这样有些不方便。
所以我做了如下事情来尝试解决这些问题:
1、Python 版本的编辑器研发已经提上日程,过年假期看看能否搞定。
2、我专门写了一个 JS 极简教程,保你 5 分钟上手:
https://labuladong.online/algo/intro/js/
大家可能也有体会,对于算法来说,语言就只是个工具,难点在于算法的思想。其实你只要了解 JS 的基本语法和常用数据结构,就可以上手使用可视化编辑器了。
3、重写了算法可视化面板的使用教程,使其更精简,可操作性更强,用可交互的方式带大家了解面板的使用方法,链接如下:
https://labuladong.online/algo/intro/visualize/
4、我将可视化编辑器全面集成到了我的算法网站和所有配套插件中,你随时可以修改我的示例代码并执行,验证你的奇思妙想,下面简单展示一下。
首先是网站的集成,所有可视化面板上都会出现一个「编辑」按钮,点击后即可编辑示例代码,修改完成后点击「运行」按钮即可将修改后的代码进行可视化:
Chrome 插件(版本 >= V4.4.0)是类似的,可视化面板中也添加了「编辑」按钮,你可以直接修改示例代码并执行:
vscode 插件(版本 >= V1.5.1)同理:
jetbrains 插件(版本 >= V1.8.1)同理:
choose/unchoose 注释
之前我介绍过可视化面板的@visualize status
注释,将递归函数抽象成递归树,每个节点代表一次递归调用,节点的值就是递归的「状态」。
而本次支持的@visualize choose/unchoose
注释更进一步,可以把每次递归所做的「选择」显示在递归树的树枝上。树枝上显示的内容可以进行自定义,进一步方便大家理解。
详细的使用方法和交互式教程可以在网站上查看:
https://labuladong.online/algo/intro/visualize/
我这里就简单展示几个截图,比如我编了一道简单的算法题,即让你生成长度为3
的所有二进制字符串,直接看我写的代码及可视化效果吧:
这里我在@visualize choose
注释中写了更详细的注解,当鼠标移动到递归树节点上,就会显示路径上所做的选择,是不是就把每一步递归所做的选择清晰地展示出来了?这段回溯代码是不是就很容易看懂了?
就介绍到这里吧,各位可以亲自去体验体验,更多的玩法,有待大家发掘~
一些计划
在可视化面板的教程中,我尝试使用了交互式提问的方式教大家使用:
没想到这种学习方式得到了很多读者的好评,得益于可视化面板功能的不断完善,我计划优化网站/课程中的所有教程内容,让可视化面板更好地融合到教程之中,进一步提高大家的学习效率和对算法的理解深度。
就这样吧,最后祝大家新年快乐,新的一年勇猛精进,奥利给!