「时光不负，创作不停，本文正在参加2021年终总结征文大赛」
一、在公司项目中，对前端框架的发展速度之快感到震惊
不仅仅是前端框架，整个前端行业都在突飞猛进的发展。在开始写项目之前，选择正确的框架开发可以事半功倍。
Layui 已经过时了
公司后台项目在我接手之前是用 layui 框架开发的，这也就意味着这并不是前后端分离的项目。
一开始我也为了保持项目一致性尝试继续使用 layui 进行开发，这使我吃了不少亏，简直比原生还要晦涩难懂，更不要说代码简洁性了，一个页面我就能写2000+行代码（封装性良好），期间还加了不少班。
虽然 layui 对于我来说比较坑，但是却也能在其中去实践一些东西。
1、比如说我在把渲染表格的方法进行了封装，因为事件监听需要使用一个回调函数，并且函数内需要传入一个变量，于是我使用闭包接收一个变量到上下文环境中，这样回调函数内部就能使用这个变量了。
2、使用 Proxy对象 监听对象数据的变化情况，并执行相应的方法。
3、使用 echarts 完成各种图表的展示。
4、处理各种复杂数据等等...
转栈 Vue 进行开发
后来使用 LayUI 完成资产管理第一期后，后面就使用 Vue 进行开发了。
UI库选用的是主流UI库 ElementUI 。
由于 Vue 是由数据驱动视图，视图也能改变数据的框架，所以我只需关注Model层及主要业务逻辑就能快速开发出页面。
在 Vue 中不必使用大量原生 JS ，但是对于表单验证规则这种东西来说的话，需要提交的表单实在是太多了，于是我自己封装了一套逻辑，在使用时，只需传入当前字段的 name 和规则方法即可，比如说当前字段是手机号，那么只需传入 手机号 和我自己封装的手机号验证函数即可。
请求拦截，如果当前请求和上次请求相同，则当前请求不会去请求服务器，优化服务器资源消耗。
也做了前端上传、下载文件等功能。上传文件的话就是上传文件后将文件解析成一段数据通过接口提交给后端保存到数据库。下载文件的话就是通过后端返回的数据来生成文件并进行下载。
echarts 图表逻辑基本没有变化，还是那样使用，只不过现在变成了下载 npm 包来进行使用。
同时使用 scss 进行编写样式内容，scss 是成熟、稳定、强大的 CSS预处理器 ，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。
最后，LayUI 公布关闭了，这也标志着一个时代结束了，虽然框架过时了，不过还是很崇敬 Layui 框架作者的。不得不说，前端发展速度实在是太快了，只有不断的学习才能跟得上时代发展的脚步。
二、对接 Vue 项目到 LayUI 项目
在使用 Vue 开发之前我就已经想好了如何去对接原项目了，我的解决方案是使用 Vue 开发完之后打包，将打包后的 dist 文件夹给后端进行项目对接。
这种方式过于繁琐且会使项目臃肿，但这是没有办法的事实（反正是我没想到更好的解决方案），除非使用 Vue 重构整个后台项目。
但重构整个项目的代价又太大，并不能急性子动手——说干就干。
三、优化 Vue 项目
1、在请求数据时，在页面顶部添加了请求进度条效果，使请求进度变得可视化了起来。
2、修改了 ElementUI 默认的 loadding 效果，使用了自定义 loadding 特效。
由于项目体积太大，各种操作都变得不方便了起来，于是我决定进行项目优化。
3、在项目上线时移除项目中 所有的 console 。使用 babel-plugin-transform-remove-console 插件移除，在开发依赖中安装即可，然后在 babel.config.js 配置文件中进行插件配置即可。
4、通过 externals 加载外部 CDN 资源。配置该项后可以使项目运行或打包时不会将在 externals 中配置的依赖项进行打包，所以可以通过在 /public/index.html 文件里写上对应依赖（对应版本）的 CDN 链接。
5、开启 gzip 压缩配置。使用 compression-webpack-plugin 插件，然后在 vue.config.js 配置文件中进行插件配置即可。但是同时需要服务端 Nginx 需开启 gzip_static 功能后，gzip压缩才能生效。
四、还写了其他几个项目
比如说 NAS网盘系统 、小程序优惠券、奖品等新功能的实现、大屏展示等等。
1、 NAS网盘系统 的需求是通过网页去读取用户本地电脑文件内容，我第一时间想到的就是可以使用 NodeJS + Vue 去实现，利用 NodeJS 读取本地文件和启动服务器的能力，就可以实现一个读取本地文件的接口，读取本地文件还是比较麻烦的，使用递归去遍历文件的话，系统会崩溃掉，因为文件太大了。
所以我后面写了遍历两层目录的逻辑，如果是文件夹的话就继续遍历这个文件夹，如果是文件的话就打开这个文件，显示详细内容。这个的话能实现基本需求，但是缺点就是不能深度遍历。
所以后面我用利用 socket.io 的能力实现了深度遍历的功能。大概实现方法就是，遍历文件，如果当前是文件夹就递归遍历，如果是文件的话就推送到前端，直到整个大文件夹的所有文件推送完毕后结束。由于文件是一个一个进行推送的，所以说就不可能出现系统崩溃的情况了，只不过推送遍历的时间实在是太长了。
2、小程序也是写了很多新功能，优惠券列表修改，奖品列表的实现，选择优惠券后金额相应的变化，默认选择最大优惠券等等功能。
3、大屏展示是使用 echarts 实现的，复用其他大屏样式风格，并完成新的大屏展示。
四、解决问题的能力得到更大的提升
在项目开发的过程中，免不了会有许多问题。
但是有问题就及时解决问题，站在产品的角度去看问题，去想想这个需求合不合理，能不能实现。
种种原因促使我去解决一些问题，深刻的理解了项目内容。
这也促使我看待问题的角度发生了一些变化。
因为没有 UI设计狮，所以我更应该去想这个产品应该如何设计才能更好。或许 前端程序猿 和 UI设计狮 的思想结合后才能实现一些不太容易实现的特效吧。
五、2022年目标
1、学习 Vue 3.0
Vue 3.0 出了也差不多有一年了，前端发展实在是太快了，要学的东西实在是太多了，虽然使用 vite 写过一些demo，也看过一些关于 Vue 3.0 的文字，但始终只是学了个大概。
因此希望明年能够深入学习 Vue 3.0，并将其应用到项目中，这肯定比 Vue 2 好用多了。
2、学习 TypeScript
TypeScript 是 JavaScript 的超集，能够写出超级规范的代码，保证类型的准确性，我认为这对于前端来说应该是必须掌握的一项技能。
3、其他内容的学习
如果有时间的话，我还想学习 Three.js 、AR.js 等等图形学前端领域的内容。