第一次操刀重构

作者阿秀分享了自己重构个人博客的经历,从使用docsify到选择Vuepress,旨在提升网站UI和用户体验。在五一假期期间,阿秀更新了文案内容,增加了留言功能,并计划进一步优化网站,通过重构提升了网站的可维护性和功能性。

0a4225300c262fa54fcaa412398a8113.png

作者:阿秀
阿秀的学习笔记:https://interviewguide.cn

你好,我是阿秀。

不知道你们是否了解或者听过重构这个词?是否自己尝试动手重构过一些已有小项目?

1、吃力不讨好

我记的在我大二上《软件工程》这门课程的时候,书上有一个概念叫做重构,书上给出的定义是指改善现有的程序代码,使其更方便、简单的使用,提高可重用性、可维护性

其实重构的方法有很多,讲代码重构的书也有很多,我书桌上就有一本《重构:改善既有代码的设计》 。

b6308020182b86d0375e4b3c319cbe69.png

不过重构这东西对一些老板来说性价比不高,如果是基础建设部门造的一些轮子去重构还能说的通,毕竟他们造的轮子全公司程序员可能都要用。

如果是一些常规业务部门要重构一些老项目或者老轮子,这可不是什么好的信号,如果你所在的部门最近有这个苗头的话,可以下班后打开一些招聘网站看看行情了,记得不要用公司电脑或者连着WIFI的手机去逛招聘网站...

毕竟”代码和人有一个能跑就行“这句话可不是空穴来风,非到不得已是绝对不会去重构一些既有项目的,因为“能跑就行”。

重构这种事情耗时耗力不说,还没产出,写成报告也不好看,老板脑子抽了才会拍板同意一个运行得好好的项目花费人力物力去大刀阔斧得进行重构。。。

51a29944d3375ed528d48f3feedf8b59.png

2、操刀重构

可,公司的代码不能随便动,我自己写的代码还不能随便动吗...哈哈哈😄

起重构的心思主要是觉得自己的小破站UI是在太太太丑了,虽然是整个网站以简单清洁为主,但最近一段时间觉得整个页面有点太空了。

472cabcc4968fd64c5b523847237884c.png
原博客封面
68b6331dea8433c56b2a6c5368bd188f.png
原博客主页

虽然内容很多,但是由于布局等因素显得整个界面实在是太空洞了。

虽然这段时间上海疫情有所缓解,但我所在的小区依然是封控区,还是出不了门,整个五一期间都被封在家里。

所以就趁着五一这段时间重构一下自己的小破站,换个框架,换个UI,也加点内容。

以前我的网站是用的docsify做的,这是一款的文档网站生成工具,docsify 可以快速帮你生成文档网站。

不同于 GitBook、Hexo 的地方是它不会生成静态的 .html 文件,所有转换工作都是在运行时进行的。

特性

  • 无需构建,写完文档直接发布

  • 容易使用并且轻量

  • 智能的全文搜索

  • 提供多套主题

  • 丰富的 API

  • 支持 Emoji

  • 兼容 IE11

  • ...

docsify简单就简单在操作简单,基本是傻瓜式操作,跟着官方文档一顿操作下来就可以了。

可也正是因为它的简单特性导致了局限性,自己想DIY一点东西加进去都不太好加。

还有一个问题就是它有点太简单了,不管是从页面还是功能来说都只是一个简单的文档记录性静态网站。

所以打算换一个框架,经过五一那天的一番调研,我喵上了Vuepress

9e5c2e2509196304a86df7505feaa0d9.png

就像它主页说的特性那样:

  • 简洁至上:以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。

  • Vue 驱动:享受 Vue + webpack 的开发体验,可以在 Markdown 中使用 Vue 组件,又可以使用 Vue 来开发自定义主题。

  • 高性能:VuePress 会为每个页面预渲染生成静态的 HTML,同时,每个页面被加载的时候,将作为 SPA 运行。

比较符合我目前的一个期望,刚好自己也会一点点Vue,可以自己加一点点功能,自己DIY一些自己想要的。

就是你了

3、开干

五一假期期间又重新写了一些文案内容,然后画了一些图稿去充实一下小破站,为网站加上留言功能等。

这里简单展示一下半成品吧hhh

bffc20f656dc992e83cb28955b36c602.png
网站速览
b62928b86cffb51e1066efbfe05e7115.png
留言板块
a47f62c3e08b9df9919d18d851991cb5.png
求职板块
0f3de4158d990dfe154b7360ed695457.png
算法内容
dca9cc5018e63ab3ce1abdbab4109b54.png
C+知识大纲
24197d6a54d85092d3065f6ffad495a4.png
数据库板块

最后大致会是这个样子。

4b09643030173b055454bb67f8416ee4.png
《阿秀的学习笔记》

UI和功能上可能还会有一些改动,再加一些自己DIY的一些功能,等备案完事后就可以正式上线了。

4、结语

这算是自己的第一次重构既有项目吧,相较于上一个,重构后的网站UI和使用体验上会有一个不小的提升,也会有其余新加上的功能。

虽然是玩具式重构,可经验就是这么一次次动手实操得来的,实操永远是最好的老师,毕竟纸上得来终觉浅,绝知此事要躬行

不过,我希望没有重构公司项目的机会...

我是阿秀,一个平凡的互联网打工仔,我们下期再见。

06312533e27dda9222b9e7dfcb55313d.gif

推荐👍:求职硬实力(操作系统、计算机网络、数据库MySQL、Redis等)

推荐👍:总有人在你不知道的时候,默默前行(他人经验)

推荐👍:求职软实力(面试、话术、简历)

你好,我是阿秀,本硕均于普通双非学校就读,现于抖音旗下担任全栈研发工程师,前后端全能。一路走来,很累也很不容易,希望能帮助到更多像我一样的普通学校的学生。我踩的坑不希望你再踩,我走过的路希望你照着走下来慢慢的也有了一个自己的学习圈子

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

拓跋阿秀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值