如何成为更好的前端工程师？如何才能进入下一个阶段？

今天药忘吃喽~ 2023-02-21 11:42 44阅读 0赞

我不断收到很多恰好在学习Web开发方面有丰富经验但被困于不断开发UI模板和项目的人的询问，这确实令人沮丧。更严重的是，他们如何才能进入下一个阶段？

这篇文章更像是备忘单或者清单，我认为这就像我们在友好的聊天中交谈时一样，您会说我的话，写笔记，然后在不了解其中某些术语的情况下搜索这些术语的实际含义。

**了解你的编程语言**

这部分将是最长的，它本来可以单独撰写一篇文章，但最好与其他部分一起使用。  
通常，人们将编程语言与他们的母语相混淆。与解决问题相反，要使用一种不需要常识的编程语言，它是一组由某人编写的规则来帮助您与计算机进行通信，在开发者的场景下，我们曾经使用它来与计算机浏览器进行通信，如今，我们到处使用它。

JavaScript具有应遵循的规范和规则，不要过分地遵循它们，并期望它与另一种语言的编写方式相同。

**1.类型**  
学习JavaScript为何是值类型语言，并且缺乏静态类型检查。可以了解TypeScript、Flow等如何解决静态类型检查的

**2.作用域和闭包**  
学习变量和函数的作用域，以及它们之间通信交互的方式。

**3.JS中的OOP**  
学习JavaScript中如何实现面向对象编程的范式。

**4.JS中的异步调用**

JavaScript中的异步调用是一个很重要的概念，首先你会从回调函数学起，然后会学习Promise，最后会喜欢上async/await的语法。同时，你还会了解Generator的概念，并且将这些知识整合，理解通过XHR发送请求，获取服务端数据，解析数据并且更新到HTML页面。

**5.数组的高阶函数**  
你要学习不仅仅通过遍历的方式访问数组，还需要了解“map、find、filter、reduce”，这些函数都能够高效的提升你的编程技巧。

**6.学习JS如何和浏览器交互**  
理解浏览器的内置特性，例如window、document等全局变量，了解cookie、localstorage、indexDB等存储能力，能够清楚不同浏览器的兼容情况。

**7.对象的解构操作**  
ES6中提供了大量对象的操作方式，其中destructure和spread操作提供了快速访问对象属性的能力。

**Git代码版本管理**

无论是在大公司还是小公司，你都需要使用一种代码版本管理工具，Git就是其中最广泛使用的工具。你需要学习Git的基本操作命令，例如git clone、git merge、git cherry-pick、git revert等等，你需要理解分支管理的方法，例如git flow，这样可以有效的管理不同分支用于多人协作、发布、hotfix等等。

小编也在前端混了有几年，整理了一些学习资料，对web开发技术感兴趣的同学
    欢迎加入新建的Q群：603985993，不管你是小白还是大牛我都欢迎，希望大家诚心交流！
    还有大牛整理的一套高效率学习路线和教程与您免费分享，与企业需求同步。
    好友都在里面学习交流，每天都会有大牛定时讲解前端技术!
    ————————————————

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]  
**不要满足单一的框架和代码库**

比起使用一个前端JavaScript框架更好的技巧是，在多个前端框架之间进行过渡，同时在转到第二个JS框架并询问它时获得经验：“我曾经在在上一个方法中，您会以哪种方式提供这种方法？”。  
我认为，该技能是迄今为止最重要的技能，这种迁移性的技能可以帮助你不依赖于某一个特定框架，帮助你可以快速迁移到不同的前端领域。即使他使用不同的技术或者以前没有使用过该技术，同样可以与他的队友一起解决问题。

**不要逃避后端的技术问题**

作为一位前端工程师，你往往只会接触到后端暴露出来的API接口，在其之下就是一个黑箱。如果你希望能够成为资深的工程师，你还需要更进一步，去理解后端的领域模型，例如用户、商品、交易等模型的设计，以及其背后对应的数据库设计。  
同时，你还需要对SQL能够熟练使用，进行数据库的操作，查找数据等等。理解后端的实现细节，也有助于将来BFF层的设计实现，如何对数据模型进行整合，字段进行裁剪，接口进行拆分和合并等等。

**理解打包工具原理**

Webpack，Parcel和其他使用Node和NPM生态系统来承载您的开发经验或授权您选择框架的工具，深入研究文档并了解其工作方式，如何跟踪文件并将其作为内部导入文件树处理， 导入文件，直到生成主index.js，了解使用代码拆分和优化选项如何提高性能，理解打包工具的实现以及相应的插件系统。

**定制化你的开发工具**

你的文本编辑器，Terminal，应该可以帮助您控制开发过程，监视Git分支，  
例如：在VS Code中使用Gitlens扩展名可以帮助您了解谁在代码中进行了哪些更改，以及何时进行了更改。

你的Terminal不仅对编写命令有帮助，而且对于了解分支状态，你做了什么更改，你的变更前后都有什么变化都非常有用，请在提交代码前使用编辑器检查一下代码变更，保证提交的代码尽量简洁。  
希望这些建议可以帮助到你们，如果有任何补充请多多交流。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200630113154528.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70