如何提升自己？

只写后台管理的前端要怎么提升自己

这里，总结一下上文链接：

【1】写优雅的代码：

  1. 提升代码质量（从设计模式方面考虑），
  2. 并且学会封装

【2】关注业务：

  1. 主动了解需求背景，主动理解；
  2. 并且做完需求后，主动了解结果；
  3. 并且理解需求，并主动优化。

【3】关注源码：

面试中引导面试官来问，学会表现出你擅长的点，比如：

如果你用了 Element UI 你可以说写了什么自定义 Element UI 表单组件，Element UI 表单源码是什么原理，怎么通信的？
用了 Axios 可以说 Axios 的原理，它的拦截器怎么实现的？
用了编辑器 diff 那你知道 diff 算法是什么吗？
用了 ECharts 那你知道他底层是用什么绘制的吗？
用了 husky ？husky 的原理是什么？
用了 Vite，它为什么快？是怎么打包的？写过插件吗？

【4】前端基建：

和做的业务无关，是提升自己的思路。

  • 前端工程化，
  • 前端监控，
  • 工作流，
  • 部署，
  • 性能等等。

[1]技术选型：

（了解优缺点，为什么有这些特点，原理。。给出合理的理由。）

技术栈选 Vue 还是 React？
Vue 选 Vue2 还是 Vue3？
组件库选 ElementUI 还是 Ant Design？
微前端有没有使用过？
打包工具用 Vite 还是 Webpack？
有那么多表单怎么实现的，有没有什么表达配置化方案，比如 Formily？

[2]开发规范

创建项目的时候，配置下 ESlint，stylelint， prettier， commitlint 等。

[3]前端监控

前端程序中记录一些信息并上报，一般是错误信息，来方便我们及时发现问题并解决问题。
除此之外也会有性能监控，用户行为的监控（埋点）等。
之前也听过有些团队分享前端监控，为了出现问题明确责任（方便甩锅）。

  1. 实现方案，无论使用第三方库还是自己实现，重要的都是理解实现原理。

  2. 错误监控，可以了解一下 Sentry，原理简单来说就是通过 window.onerror 和 window.addEventListener('unhandledrejection', ...) 去分别捕获同步和异步错误，然后通过错误信息和 sourceMap 来定位到源码。

  3. 性能监控，我们可以通过 window.performance、PerformanceObserver 等 API 收集页面性能相关的指标，除此之外，还需要关注接口的响应时间。

  4. 收集到信息之后，还要考虑数据上报的方案，比如使用 navigator.sendBeacon 还是 Fetch、AJAX？是批量上报，实时上报，还是延迟上报？上报的数据格式等等。

[4]CI/CD

持续集成（Continuous Integration, CI）和 持续部署（Continuous Deployment, CD），

主要包括：

  • 版本控制，
  • 代码合并，
  • 构建，
  • 单测，
  • 部署等一系列前端工作流。

场景的工作流有：

  • Jenkins、
  • Gitlab CI 等。

我们可以配置：

  • 在合并代码时，自动打包部署，
  • 在提交代码时，自动构建并发布包等。

亲自动手试一下，才能知道细节，比如：

  • GitLab CI 中，Pipeline 、 Stage 和 Job 分别是什么，怎么配置，如何在不同环境配置不同工作流等。

【5】了解技术动态

依赖信息收集能力

[1]比如低代码：

  • 用过就问细节，
  • 没用过问有什么设计思路。

[2]还有 AI，又或者 Vue React 的最新功能，WebAssembly，还有一些新的打包工具 Vite Bun 什么的，还有鸿蒙开发……

参考链接