2021年总结

Posted 2022-01-15 在厕所喝茶

2021年总结

• 前言
• 参加软件设计师考试
• 微信小程序 UI 组件库重构
• 开发插件化的 H5 视频播放器
• axios 源码深入解读电子文档书
• 前端业务组件库
• 源码阅读
• 总结

前言

转眼即逝，2021 年马上就要过去了，趁着年末有时间，总结一下今年的工作情况和学习情况。2021 年可以算的上是我成长的最快的一年，接触到了很多新奇的东西，也阅读了一些源码，同时也产出一些东西。

参加软件设计师考试

上半年从三月份开始复习备考，每天下班回来都在哪里看视频，刷题。但是非常不行，广州因为疫情的原因取消了（好像也是唯一一个被取消的考试的城市），关键还是在临考试前的 2，3 天，我准考证都打印出来，结果说考试取消。但是我并没有放弃，参加了下半年的软件设计师考试，还好没有再次取消，不然心态就崩了。

对于考试的内容，基本上都是大学学过的，毕竟我是软件工程毕业的。参加这次考试最大的收获就是对计算机体系的基础知识有了进一步的了解，并且对于一些开发模型也有了一定的了解

微信小程序 UI 组件库重构

微信小程序 UI 组件库是我个人研发的一个开源项目，一开始是是用来 js 来编写的，并且也参考了vant-weapp的源码。随着在工作中typescript的不断使用，我对typescript的了解也越来越深了。所以我想着用typescript来重构微信小程序组件库。当然，重构的时候依旧参考了vant-weapp的源码，因为vant-weapp就是使用了typescript来写的。并且对微信小程序的Component构造器进行了 2 次封装，而且成功用在了工作上

这次重构的最大收获就是，对微信小程序的Component构造器进行了 2 次封装。因为我成功把这种开发技巧成功用到在工作上了。在开发公司的小程序项目上，因为有些人没接触过小程序，不是很熟悉。我对Component构造器和Page构造器进行了 2 次封装，使得开发起来更加偏向于 vue 的开发模式。而且二次封装的好处不仅在于是开发模式更加偏向于 vue，而且还可以添加一些其他的功能，比如自定义一些生命周期函数；还可以对所有的页面进行一些统一的操作，比如设置页面标题等等。

文档地址：http://wxui.linjiafu.top
仓库地址：https://github.com/c10342/lin-wx-ui
小程序组件库演示：

开发插件化的 H5 视频播放器

H5 视频播放器是我个人研发的一个开源项目，主要参考了dplayer源码，采用了webpack+typescript+art-template+scss技术。特点就是，采用多包架构，支持插件化，并且使用了原生 css 变量自定义主题色。

H5 视频播放器开发最大的收获就是对多包架构，插件化，原生 css 变量自定义主题等知识有了更深的了解。并且这些知识也成功运用到了工作上面，开发了出一个可以支持多画面播放的多流播放器，并已经成功用到了生产环境上。

文档地址：http://player.linjiafu.top
仓库地址：https://github.com/c10342/media-player

axios 源码深入解读电子文档书

axios 源码深入解读电子文档书是我第一次关于源码类阅读产出的电子书。其实在去年的时候我已经阅读过了 axios 的源码，在编写这份电子文档书的时候，进行了第二次的阅读，第二次阅读的时候比第一次阅读有了更进一步的理解。阅读的时候采用自顶向下的方法逐步深入，每一行代码都有对应的注释。电子文档书包含了十七个章节，每个章节都详细的分析了 axios 的各个组成部分，并且还记录了我的一些阅读心得和一些额外扩展知识。

在电子文档书中，还有一部分是进阶部分。就是参考了axios源码的设计思想，实现了一个微信小程序版的WxAxios请求库

文档地址：http://axios.linjiafu.top
仓库地址：https://github.com/c10342/axios-analysis

前端业务组件库

前端业务组件库是在公司开发的一个组件库，也是采用了webpack+typescript+art-template+scss技术。特点是，采用多包架构，并且使用了原生 css 变量自定义主题色，UI 层和逻辑层分离，每个组件都是一个单独的包，可独立进行安装和发布。其中我认为做的最好的就是将 UI 层和逻辑层分离，因为有些项目的 UI 和逻辑可能会有点不一样，所以将 UI 层和逻辑层分离可以很好的进行复用，UI 层提供一些方法给外部使用，修改 UI 界面。逻辑层根据 UI 层提供的方法进行开发。

目前组件库包含了多流播放器组件，笔记组件，直播评论，未来计划打算实现点播评论。在开发这个组件库的时候，也融合一些我在研发个人开源项目的时候所使用到的东西，比如多包架构，插件化，原生 css 变量自定义主题色等，这些都是我在实践过后，觉得可行，然后就用在工作上了。

源码阅读

今年主要是阅读了 vue 和 element-ui 的源码，axios 源码是第二次阅读了。在我研发 H5 播放器的时候也阅读过dplayer的源码，但只是略读，并没有深入去阅读，因为当初研发 H5 播放器的时候并没有好的思路去开发，所以去简单的了解了一下dplayer源码在整体上的一些设计和架构。vant-weapp 源码在去年研发微信小程序 UI 组件库的时候就已经阅读过了。并且在阅读源码所学到的一些知识点和开发技巧也成功运用到了工作上

在开发公司微信小程序的时候，我们使用的是vant-weapp组件库，但是vant-weapp组件库缺少类似element-ui的form和form-item组件，这对于我们在校验表单的时候带来了极大的麻烦和工作量，所以我在阅读了element-ui的form和form-item组件后，实现了一个微信小程序端的form和form-item组件，并可以结合vant-weapp组件库的表单组件一起使用。最后我们可以像使用element-ui的form和form-item组件那样，在小程序端使用，并且功能基本上是一样的。

在开发多流播放器的时候，为了解决用户在拖拽进度条的时候，导致每个画画都不同步的问题，我参考了vue源码的异步更新队列思想，在用户拖拽进度条跳转进度的时候，首先暂停每个画面，然后往异步任务队列中放置一个任务，该任务就是对画面进行播放。在video标签触发了seeked或者canplay事件之后，检查每个画面是否都已经准备好了可以播放了，就执行异步任务队列里面的任务，也就是对每个画面进行播放。成功解决了用户拖拽进度条导致画面不同步的问题

在公司开发微信小程序时候，vue源码的异步更新队列思想也用到了。在微信小程序中，app 的执行和页面之前的渲染是没有先后顺序的，也就是说两者是同步进行的，并没有分先后顺序。一般来说，获取用户信息都是在app.js中获取的，但是如果某个页面需要使用到用户信息的，但是页面已经渲染完毕了，app 还没执行完成，这就会导致页面获取不到用户信息。所以，我们可以将页面获取用户信息的操作放到一个异步任务队列中，等待 app 执行完毕，也就是获取玩用户信息之后，就执行这个异步任务队列的任务，这样子就可以确保页面可以拿到用户的信息

同样，在阅读vant-weapp源码后，我也参考vant-weapp二次封装Component构造器的开发技巧用到了公司的微信小程序开发上面，对Component和Page构造器进行了二次封装，让开发模式更加符合 vue 的开发习惯。同时也扩展出一些功能，比如computed，watch和自定义钩子函数的功能，丰富了Component和Page的功能。

总结

今年仿佛过得特别快，感觉刚过完年上来广州没多久。但是在今年，我也充实了自己，无论是在项目研发或者源码阅读，都收获到了不少的知识和开发技巧，并且成功用到工作上。对于我来说，今年最大的成功就是把项目研发或者源码阅读收获到的知识和开发技巧，用到工作上，因为我觉得只有用到工作上，这些知识点和开发技巧，才能叫有所收获，不然始终都是纸上谈兵。同时今年也是我第一次产出了电子文档书，在写这份电子文档书的时候，我对axios的设计有了更深一步的理解，同时产出这份电子文档书更多的是为了可以帮助其他有需要的人，把我的一些思考，还有理解分享出去。

至于明年的计划，我打算是参加系统架构师考试。然后深入研究node.js这门后台语言，完善自己的前端工程体系结构方面的知识，后期想要实现一套完整的闭环的前端研发工具链，比如搭建一个云构建平台，实现项目构建自动化，项目发布自动化等等。还有组件平台可视化，像我们平常项目开发中经常用到表单这些东西，可以实现一个表单拖拽的功能，快速完成表单的布局，生成一个表单的json，提高开发效率。