如何提升自己?

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

这里,总结一下上文链接:

【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 中,PipelineStageJob 分别是什么,怎么配置,如何在不同环境配置不同工作流等。

【5】了解技术动态

依赖信息收集能力

[1]比如低代码:

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

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

参考链接