前言

最近收到了 datawhalechina 的 GitHub 排名进入全球前60的好消息！真心为大家的努力成果而感到自豪！

在Datawhale实习的这段时间里，我陆续接触到了很多新技术，也完成了很多开发任务，谨以此文章记录一下我的收获。

技术上的收获

富文本编辑器的目录跟随滚动逻辑

这是我第一个做的任务，初步接触富文本编辑器，通过对滚动逻辑的反复打磨，以及相关资料的学习，初步对编辑器有所了解，和远昊探讨这个逻辑的实现过程让我受益匪浅。

考试管理开发

第一个业务需求。通过这次任务，技术上学习到了富文本的实际使用以及状态的绑定（洁钊提供启发）；第一次学到如何使用Pinia管理变量状态；学习了路由拦截与浏览器行为拦截的实现（森哥耐心指导）。 另外也接触到了正式的需求文档，深刻理解了要严格遵循需求文档与原型图来进行开发，不能遗漏细节也不能自作主张进行微调（编辑题目的界面以及一些弹窗、按钮的细节第一次没有做到位)

DeepSeek通识课页面

通过对之前的代码进行修改，深刻体会到代码质量的重要性（资讯页面的tab组件改起来十分困难）；也学到了关于flex布局（森哥讲解）还有scss语法（远昊提出）的内容。

编辑器斜杠菜单的开发（多级标题、wst导入、微信导入、有序/无序列表)

这个是个人感觉比较简单的地方，因为SlashmenuSolution文件已经被大家封装的不错了，只需要在这基础上加东西。但是通过这里以及远昊的会议，我学到了读tiptap官方文档的重要性，因为好多地方其实已经有了官方封装好的组件与函数，在考试管理开发的时候，有一个我印象很深刻的地方是富文本上传图片，这里当时需要调用自己的上传函数获取oss的url，但是对于当时，我实在不知道这个image插件该怎么自己去改，完整实现的话预计的工作量也不小，思考了一两天都没什么进展，然后就去官方文档去看image的实现（感谢洁钊提出建议），发现了官方已经提供了一个扩展指令可以使用自定义函数上传，因此这个问题只用了几行代码就解决掉了，让我感触颇深。 在做微信导入和wst导入的时候，遇到的问题主要就是如何复用与优化老编辑器的代码，这里让我学到了很多搬搬改改的小技巧以及如何把逻辑优化到最简，也是很棒的收获，遇到的接口的各种报错都多亏洁钊帮忙看，都顺利解决了。 在这部分我还做了空段落的灰色引导词，这个也是完全得益于官方文档的指导（感谢远昊的指引）。

安泰经管实训营页面

这个任务中，我学到了微信登录的实现逻辑（第一次接触）；学习到了表单链接跳转与传参还有回调的知识（洁钊与森哥引导）；和森哥学习到了打断点debug的能力；通过洁钊写的后端接口，对报名逻辑的处理也有一些收获（限制报名人数的那个接口）。

编辑器折叠块的实现

这个算是我对于富文本编辑器的代码有了第一次比较深刻的理解的转折点（感谢远昊的指导）。 通过花比较久的时间读代码、读官方文档，以及远昊提供的思路，自己一步一步的从0开始实现了多节点组合起来的组件，对于nodeView、Plugin、Schema都有了比较深入的理解，还在官方讨论区贡献了自己微薄的力量，感觉很有成就感。 这个任务当时自己觉得几乎是不能完成的，但是在大家的帮助和启发下，让我再次认识到了共同努力的力量，让我更加自信了，也对编辑器这个比较有挑战性的内容有了比较大的兴趣。

编辑器上传jupyter代码与markdown文件的实现

这个任务是继折叠块之后，另一次让我对富文本继续深入了解比较多的地方，尤其是通过实现cell-output，让我对于WstNode与TiptapNode的结构以及转换有很多认识，通过各种尝试与修改，对于调试代码也有所精进。另外还自己尝试写了曾经未实现的table组件与image组件，感觉很开心，逐渐能够在处理编辑器的代码这方面有了方法，基本不再会有那种处理起来很头疼的感觉了。 另外，这次在处理cell-output时，遇到了本地base64编码的图片的处理，这一大块也学到了很多，最开始拿到一大串编码，不知道怎么把它显示出来，这里感谢洁钊提供启发，我在网上学习到了通过把data:image/png;base64, 与编码拼接起来就可以显示图片，感觉又长知识了；之后在把base64的图片处理成oss返回的url地址时，也学到了新东西：把base64编码的图片转为file，然后调用上传接口拿到url。很有收获！

编辑器实现多类型文件通过链接上传

这个任务我主要学习到了如何通过文件的链接，获取到这个文件的大小、名字。这个名字可以通过解析后部分的url来获取，文件大小则是通过fetch请求获取到Content-Length实现的，对于文件的处理又学到新的知识了。

作为开发者的收获

1. 对代码质量要有追求

在开发时，不能只是为了完成任务而不考虑代码的可读性以及规范性。在拿到需求之后，要先好好思考整体的结构，设计好一些数据结构；想好每个技术难点大致的实现思路；考虑代码未来的扩展与复用，这一点在考试管理上体现的很明显，我当时对于这个代码的结构设计的比较草率，导致写起来也有很多难以拆解的逻辑，比较难去理解和修改；另外就是代码的注释，这一点之前很少注意，在未来的开发里，要养成良好的注释习惯以及变量的命名（要易于理解,也要规范）。和森哥交流后，学到了要多读一些技术文档，看看别人是怎么做的，丰富自己的经验和思路，在使用gpt的时候，主要关注提供的丰富思路，不能直接copy代码，要思考他的实现逻辑。 在未来的开发过程中，要对自己写的代码有高的追求，努力写出更加优质的代码。

2. 开发不能急躁，对需求负责

写完代码之后，不能匆匆忙忙就提交，这样会出现各种大大小小的问题，导致出现反复的返工现象。要沉下心来，写完代码以后从各种方向多测试一下，通过对实际使用场景的思考与模拟，发现代码中未曾注意的细节bug，然后立马思考如何修改。在考试管理的路由拦截、安泰实训营的课程目录都体现出了我对于测试上的疏忽，对于自己写完的代码没有严格的检查，在以后的开发中，不能浮躁，对于需求要完全负起责任，充分考虑各种可能潜在的问题，多加测试，多多斟酌再进行提交。

3. 时刻保持对大大小小任务的热情

不能畏惧一些难于解决的问题，要保持直面挑战的热情，多去查阅文档，多向大家提问，一起努力解决自己难以解决的问题。同时也不能对一些看似简单朴素的任务失去重视，也要认真对待，多从中学习知识和经验，时刻保持学习者的姿态去写代码。可以多尝试一些很少接触到的地方比如后端的一些代码，不拘泥于前端业务。尽量多方面都懂一些。