青训营即将结束，项目也渐近了尾声。期间的日子无非就是听课，记笔记和做项目，虽然单调，但也不乏缺失趣味。我们的项目起步较早，虽然不是每天都在精进的那种，但也做到了一肝就是一整天的状态。

下面我就来复盘一下自己在写项目以来的新路历程。

仿掘金项目github地址 (github.com/IamTrust/ju…)

在做项目之前，我只要掌握的是 “三件套” ，会一些的小程序的编写，但是对于前端框架如Vue或Reate并不了解，所以也花了一些时间在B站上自学了一下Vue(主要是队伍的大佬用到是Vue,当然也很感谢大佬的帮助，也拓展了很多关于git的使用，他主写后端，我是前端)。

一开始主要是对于网站的静态页面的编写，而大佬主要准备掘金数据的获取。

页面的编写并没有太大的问题，主要头疼的是取类名😅，当然我是直接打开掘金官网看控制台，也算是取巧了。可以说官网的结构非常复杂，一层套一层的，很容易看晕，但是编写到后期的时候还是有一种感觉，这样编写确实会功能实现上方便很多。也明白了，能用 html 和 css 达到的效果就绝不动用 js 。

虽然前期准备了很多东西，但还是缺少了很重要的一点，项目数据的确立。获取数据虽由大佬完成，但是他获取的数据终究要放到前端展示。由于缺少了前期约定，他获取的数据前端有一部分并没有用上，而我想要的展示的数据大佬并没有获取，后期再去追加就稍显繁琐。

这里列举一下我们用到的那些技术栈：

静态页面编写完毕，数据也已经绑定至页面对应位置，接下来就要实现第一个页面优化————虚拟列表

虚拟列表的具体实现我在另一篇文章详细讨论了 仿掘金项目，虚拟列表实现📜 | 青训营笔记 - 掘金 (juejin.cn)

这里主要来聊聊编写代码的过程以及遇到的一些问题。说实在的，我刚开始听到“虚拟列表”的时候被他唬到了，觉得很难理解的东西，非常高大上，但其实他的主要中心思想，就是选出你想要展示的部分放到视窗内渲染，其重要的点就在于如何选。我一开始在B站上也搜索了很多视频观看，有写得特别优雅的，整个过程被封装成了一个类，也有简陋的，但是主要功能还是实现了。

我在编写时一个绕了一个很久的问题，就是无限下拉和虚拟列表的兼容。页面下拉触底就会再次数据请求加载数据，但是我写了一个容器，在里面有滑动条，并且超出者隐藏，这样容器内部的滑动就独立于外面的滑动，自然再次触底就不会发送数据请求。这种解决方案是固定父容器的高度，看上去并不美观，与掘金官网的效果相差甚远。最终采取了不定高度，根据数据的条数来决定高度。

实现效果：

扛过了虚拟列表，掘金主页也算是完成了，接着就是点击可以跳转到文章详情页，来渲染文章的样式，毕竟我们知道文章的样式要根据文章的作者在发布时决定的样式风格。相应的数据也在获取到的markdown数据的头部。具体见 仿掘金项目，文章样式渲染🎨 | 青训营笔记 - 掘金 (juejin.cn)

可以说这样也取巧了，用了掘金写文章的markdown编辑器。头一天拿到文章数据很兴奋，想着将markdown格式转成html格式就可以在页面上渲染了，于是去搜索markdown转html的Vue依赖，试了一圈发现数据乱的还是怎么乱。可以说我能想到用掘金markdown编辑器可能还是基于一时的灵光乍现（也不排除文章写多了的条件反射🤣）

目录高亮的完成，说实话很大程度上基于参考别人的代码，可以说真的特别好用，代码非常优雅。见：仿掘金项目，文章目录生成📜 | 青训营笔记 - 掘金 (juejin.cn)

但是在实现的过程中也发现了一些我现阶段无法修复的 bug，当文章页面滚动时，目录会出现对应高亮。可能会出现页面并未滚动到下一标题，下一标题提前出现高亮。这是因为目录根据标题的scrollTop来判断当前高度，一档超出高度，即为判断下一标题。还有一种致命缺陷，当文章数据中存在图片等资源时，数据请求会导致目录生成先一步执行，造成标题scrollTop判定失误，没有算上图片的的高度。这个问题我在原文中也有所提及。

实现效果：

总体来说，就所提的两个主要功能，我们的项目完成度还是挺高的。但是如果想在此基础上继续实现其他功能乃至掘金整个网站，由于前期准备没用沟通好和一些情况没有考虑到，难度还是有的，需要将前期一些代码进行修改。

所有遗憾，但项目还算圆满，也很感谢大佬的帮助，我们前后端配合工作，也算是完成了一项对于自己来说不小的挑战。