一、自我介绍

从事前端开发已经8年，虽然公司并不知名，但我一直在努力提升自己。我毕业于一所普通本科院校，专业是网络工程。尽管有8年的工作经验，但我没有参与过超过20人的前端团队，也没有开发过千万级或亿级流量的应用，这是一种遗憾。

在2016年刚开始工作时，我主要使用Angular和JQ，负责m站，经常编写CSS动画和一些基础的业务逻辑。从2017年到2019年，我主要使用React进行H5和小程序开发，同时维护老的前后端未分离的项目。从2019年到2022年，我主要使用Vue和React开发。从2022年至今，我主要从事ToB端的开发，同时也涉及部分ToC端的开发，主要使用React和Vue相关的技术栈也设计一些AI相关的开发。

二、前端发开涉及到的一些应用场景

前端开发直接面对浏览器，也可以说是直接面对用户。前端的应用场景比后端更广泛，用到的UI组件库、插件、基础框架和基础语言也非常多样。因此，在面试和自我学习提升的时候需要准备的内容非常多，有时候会有种学不动的感觉。

PC端的Web浏览器

PC端的Web浏览器是常见的应用场景之一，这需要我们掌握一些兼容不同版本和不同浏览器的知识点，通常通过渐进增强或优雅降级来处理。当然，现在很多公司已经不再需要兼容IE了，复杂度也降低了很多。同时，大部分新项目都会使用PostCSS来自动为CSS添加兼容前缀（autoprefixer）。在企业应用中，我们常常会使用Ant Design或Element UI来构建后台表单。更复杂的场景可能涉及网页编辑器或者自定义编辑器的开发（Selection、Range）、低代码（Low Code）、无代码（No Code）平台等。

移动端

移动端也是主要的应用场景之一，包括手机浏览器和APP。H5 WebAPP会遇到Android和iOS的一些样式和行为的兼容性问题、列表和图片懒加载问题。为了提供更好的用户体验，可能还会选择React Native（RN）等进行跨平台开发。

小程序

小程序是另一个重要的应用场景，会涉及到像taro（React）或者uniapp（Vue）这种跨端的解决方案

TV端

对于TV端的开发，有的项目基于PC浏览器，有的则是套壳APP。我们通常使用AntV或Echarts来做图表数据展示，3D效果一般用Three.js来实现。

桌面应用

桌面应用开发方面，尽管大多数桌面应用基于C的，但一些简单的应用可以使用Electron来进行桌面端开发，通常用于大屏可视化和数据展示。比如我们熟悉的VSCode就是基于Electron开发的。

AR、VR和3D全景图开发

在AR、VR和3D全景图开发中，通常使用WebGL 3D引擎如Three.js、Babylon.js、PlayCanvas等，还可以用CSS3D-Engine、KrPano、Pano2VR等工具。

Web3

开发Web3的DApp（去中心化应用程序）也是一环，主要涉及区块链等

三、前端三剑客

前端开发主要是编写HTML、CSS和JavaScript。尽管JavaScript经常是关注的重点，但HTML和CSS也同样重要。

HTML

html的历史可以自行了解，我们需要更关注文档声明、各种标签元素、块级元素及非块级元素、语义化、src与href的区别、WebStorage和HTML5的新特性。复杂的页面和功能会更依赖于我们的canvas。

CSS

css方面主要了解布局相关盒子模型、position、伪类和伪元素、css选择器优先级、各种水平垂直居中方法、清除浮动、CSS3新特性、CSS动画、响应式布局相关的rem、flex、@media。当然也有部分公司非常重视用户的交互体验和UI效果，那会更依赖我们CSS3的使用。

JS

js在现代开发过程中确实是最重要的，我们更关心其底层原理、使用的方法、异步的处理及ES6的使用。

• 在底层方面我们需要了解其作用域及作用域链、闭包、this绑定、原型和原型链、继承和类、属性描述符defineProperty和事件循环Event Loop。
• 在使用方面我们需要了解值和类型的判断、内置类型的null、undefined、boolean、number、string、object和symbol，其中对象类型是个复杂类型，数组、函数、Date、RegExp等都是一个对象；数组的各种API是我们开发中最常用的，了解Dom操作的API也是必要的。
• ES6方面要了解let、const声明、块作用域、解构赋值、箭头函数、class、promise、async await、Set、WeakSet、Map、WeakMap、proxy和Reflect。

四、前端框架

我们在开发过程中直接操作dom已经不多了，有的公司可能还要部分维护JQ，但大多都在使用React、Vue、Angular这三个基础前端框架，很多其他跨平台框架及UI组件库都基于此，目前来说国内React和Vue是决定的主流。

React

开发react，也就是在写all in js，或者说是JSX，那就必须了解其底层JSX是如何转化成虚拟节点VDom的。在转换jsx转换成VDom，VDom在转换成真实Dom，react的底层做了很多优化，其中大家熟悉的就是Fiber、diff、声明周期以及事件绑定。

那我们写react都是在写组件化的东西，组件通信的各种方式也是需要了解的；了解useState、useEffect、useMemo、useCallback、useRef等hooks的使用；还有了解高阶组件HOC及自定义hooks。

Vue

vue方面，我们需要了解MVVM原理、template的解析、数据的双向绑定、vue2和vue3的响应式原理、其数据更新的diff算法；使用方面要了解其生命周期、组件通信的各种方式和vue3的新特性。

五、前端工程化

在现代前端开发中，工程化的思想已经深入人心，逐渐向后端开发靠拢。在使用前端框架开发的过程中，我们通过一系列工具和流程来提升开发效率和代码质量。

代码提交与管理

• Git钩子（Hooks） ：使用Git的钩子（如pre-commit和pre-push）可以在代码提交前进行代码检查、单元测试等操作，确保代码质量。

代码编译与打包

• Webpack：功能强大的模块打包工具，可以处理各种资源（JavaScript、CSS、图片等），并支持代码拆分、懒加载等功能。
• Rollup：专注于ES模块的打包工具，适用于库开发，生成的包体积较小。
• Gulp：基于流的构建工具，擅长处理自动化任务，如文件压缩、预处理等。
• Vite：新兴的前端构建工具，使用原生ES模块加载，具有快速启动和热模块替换（HMR）功能，适用于现代前端开发。

自动化部署

• Jenkins：一个开源的自动化服务器，可以实现持续集成（CI）和持续部署（CD），通过配置Pipeline实现复杂的构建和部署流程。
• AWS：亚马逊的云服务平台，提供了丰富的工具和服务（如AWS CodePipeline、AWS Amplify）来支持前端应用的自动化部署。
• 阿里云效：阿里巴巴的云效平台，提供了一整套DevOps解决方案，包括代码管理、构建、测试、部署等，适合国内开发团队使用。

通过这些工具和平台，我们可以实现从代码提交、编译打包到自动化部署的全流程自动化，显著提升开发效率和项目质量。

六、前端未来

目前，初级前端开发者的市场已经趋于饱和。与我入职第一家公司时相比，如今找工作变得更加困难。在这个高度竞争的环境中，我们需要不断学习更多前端知识以保持竞争力。

对于初学者

• 计算机基础：掌握计算机基础知识，如操作系统、网络、数据结构和算法等。
• JavaScript原理：深入理解JavaScript的核心概念和底层原理，如作用域、闭包、原型链、事件循环等。
• 框架底层：学习主流前端框架（如React、Vue、Angular）的工作原理和内部机制。

对于工作多年的前端开发者

• 扩展知识面：学习更多应用场景所需的知识，如小程序开发、H5游戏开发、TV端开发、桌面应用开发等。

• AI工具的应用：掌握AI工具的使用，让其成为开发利器。AI不仅不会替代我们的工作，反而缩短了我们与资深前端开发者之间的差距。

  • 翻译技术文档：利用AI翻译国外的技术文档，学习最新的技术。
  • 代码纠错：使用AI工具帮助检查和纠正代码中的错误。
  • 实现复杂算法和逻辑：借助AI工具来实现复杂的算法和逻辑，提高开发效率。

善用AI工具，可以帮助我们更快地掌握新技术，提升代码质量和开发效率，从而在激烈的竞争中脱颖而出。

谨以此文，献给未来的自己和同道中人！