这篇文章参与了SegmentFault年度随笔《技术达人的2022》，正在看的欢迎加入。前言光阴似箭，岁月如梭，转眼2022年已经走到了尽头。今年的环境异常艰难，但想想这一年我付出的一切，还是值得做一个回顾和总结，俗话说我已经失去了，这一年我失去了太多，但也让我成长了很多.当然，这些都是题外话。主要是想复习一下这一年学的东西。文章总结今年一共写了11篇，加上这个年终总结，一共12篇，数量不多，具体如下：使用React写一个手风琴组件，写一个有趣的电梯小程序。手写一个有趣的电梯一个小程序（React版）实现《羊了个羊》的小游戏50天用vue3完成了50个web项目。我学到了什么？手写React状态管理工具迷你版实现《羊了个羊-美女版》小游戏（低配版）有趣交互效果的实现Vue3实现一个四福猫连连看小游戏原生javascript手写丝滑轮播图三分钟学会变量go语言的定义其中50天用Vue3完成了50个web项目，我学到了什么？我最满意的是实现《羊了个羊》的小游戏。毕竟这两篇文章是我对每一个知识点的总结，让自己掌握所学的知识点，同时帮助别人学习知识点。足够的。其实今年我主要关注的是React技术栈，所以也用React写了很多东西。对于vue框架，尤其是vue3，主要产出是50天用vue3完成50个web项目。发生了什么？这50个项目，虽然表面上写着是50天，但实际上我花了50多天。当然，这并不重要。最重要的是，我深入了解了这50个项目，我看了看less和sass这两种css预处理语言的语法。比如混入mixins、函数、循环、条件判断等。两种预处理语言有很多相似之处，当然也有不同之处。比如在循环中，我们在sass中有@for关键字，而在less中，我们需要写选择器+when（这更像是自己写递归调用）。同时对vue3的核心语法也有了一定的了解。至少在vue3的实际项目中，我觉得自己没有什么大问题。这些都是做这50个web项目学到的。是的，为了方便，我也用vue3写了一个关于这50个web项目的网站，地址在这里。PS：如果您无法访问上述地址，您可以访问这里。本网站由本人设计并实施。虽然布局看起来有点简单，但是我觉得逻辑功能和样式代码有点难。这里我总结一下有哪些值得学习的知识点：实现一个clickOutside命令实现一个下拉框组件实现一个图片预加载组件实现classnames工具功能（不是复制的classnames源码，是参考实现）实现判断textexceedingandomitting实现功能卡片组件和icon组件返回顶部实现less核心语法以上是我对这一年文章所做的总结。另外，我在github上添加了新的贡献，逐步完善了3个仓库。让我们来看看。3项目算法关于剑指offer算法，基本上把剑指offer官方的算法题做完了，写下了解题的思路，建了一个项目，地址在这里。虽然我在工作中貌似没有用到太多算法，但其实做一些算法题确实让我大开眼界。更何况，我的项目中已经加入了算法，比如那个用vue3实现连连看的小游戏里就有这么一个算法。constfindRepeatItem=function(arr:GlobalModule.MaterialData[]){constunique=newSet();for(constitemofarr){if(unique.has(item.src)){返回真；}unique.add(item.src);}返回假;};顾名思义，这个函数就是从数组中找出重复项。思路是用set数据结构来存储每一个数组项，然后当数据中有一项要查找时，就代表重复。是的，直接返回即可。这个函数的思想来源于算法。即算法数组中重复数的第二种思路——哈希表解法。这只是其中的一个小应用程序。如果我在实际项目中遇到了相应的需求，我可能会回去再看一遍这些笔记。达到了归纳、举一反三的目的。本项目是3个项目之一。js和css代码段css代码段这可能是我今年投入最多精力的项目了。几乎每天都要贡献一段代码。不信你看下图：每天学一个javascript或者css代码段不会让自己忘记css和js的基础，而且很多代码段在实际业务中都会用到，比如用css实现自定义单选框和复选框。下面就以单选框为例谈谈实现思路。单选按钮的css实现有以下几点，我们可以创建一个带有状态变化动画的样式单选按钮。创建一个.radio-container并使用flexbox为单选按钮创建一个合适的布局。重置的样式并使用它来创建单选按钮的轮廓和背景。使用::before元素创建单选按钮的内圈。使用transform:scale(1)和CSStransitions来动画状态变化。代码量也不算多，我们来看html和css代码分别如下：
