写给初中级前端的高级进阶指南（万字长文，路线明确）

2020-03-28 20:02:39　 作者: 匿名 浏览量：334次

我曾经一度很迷茫，在学了Vue、React的实战开发和应用以后，好像遇到了一些瓶颈，不知道该怎样继续深入下去。相信这也是很多一两年经验的前端工程师所遇到共同问题，这篇文章，笔者想结合自己的一些成长经历整理出一些路线，帮助各位初中级前端工程师少走一些弯路。

笔者毕业于一个很普通的本科学校，目前开发经验一共是2年8个月，目前带一个5人的团队，前任的组长让我带领团队的主要原因是个人技术 + 沟通能力相对较好，但是在技术能力成长的背后我也走了不少弯路。

这篇文章会提到非常非常多的学习路线和链接，如果你还在初中级的阶段，不必太焦虑，可以把这篇文章作为一个进阶的路线图，在未来的时日里朝着这个方向努力就好。
我也并不是说这篇文章是进阶高级工程师的唯一一条路线，如果你在业务上做的精进，亦或是能在沟通上八面玲珑，配合各方面力量把项目做的漂漂亮亮，那你也一样可以拥有这个头衔。本文只是我自己的一个成长路线总结。

本篇文章面对的人群是开发经验1到3年的初中级前端工程师，已经晋升高级前端的同学，欢迎你在评论区留下你的心得，补充我的一些缺失和不足。

基础能力

我整理了一篇中级前端的必备技术栈能力，写给女朋友的中级前端面试秘籍 。这篇文章里的技术栈当然都是需要扎实掌握的，（其实我自己也有一些漏缺，偷偷补一下）。

当然了，上进心十足的你不会一直满足于做中级前端，我们要继续向上，升职加薪，迎娶白富美！

JavaScript

原生js系列

冴羽大佬的这篇博客里，除了undescore的部分，你需要全部都能掌握。并且灵活的运用到开发中去。
JavaScript深入系列、JavaScript专题系列、ES6系列

完全熟练掌握eventLoop。

tasks-microtasks-queues-and-schedules

Promise

1. 你需要阅读Promise A+规范，注意其中的细节，并且灵活的运用到开发当中去。
   Promise A+ 英文文档

2. 你需要跟着精品教程手写一遍Promise，对里面的细节深入思考，并且把其中异步等待、错误处理等等细节融会贯通到你的开发思想里去。
   剖析Promise内部结构，一步一步实现一个完整的、能通过所有Test case的Promise类

3. 最后，对于promise的核心，异步的链式调用，你必须能写出来简化版的代码。
   最简实现Promise，支持异步链式调用（20行）

题外话，当时精炼这20行真的绕了我好久😂，但是搞明白了会有种恍然大悟的感觉。这种异步队列的技巧要融会贯通。

async await

对于Promise我们非常熟悉了，进一步延伸到async await，这是目前开发中非常非常常用的异步处理方式，我们最好是熟悉它的babel编译后的源码。

手写async await的最简实现（20行搞定）
babel对于async await配合generator函数，做的非常巧妙，这里面的思想我们也要去学习，如何递归的处理一个串行的promise链？

这个技巧在axios的源码里也有应用。平常经常用的拦截器，本质上就是一串promise的串行执行。

当然，如果你还有余力的话，也可以继续深入的去看generator函数的babel编译源码。不强制要求，毕竟generator函数在开发中已经用的非常少了。
ES6 系列之 Babel 将 Generator 编译成了什么样子

异常处理

你必须精通异步场景下的错误处理，这是高级工程师必备的技能，如果开发中的异常被你写的库给吞掉了，那岂不是可笑。
Callback Promise Generator Async-Await 和异常处理的演进

插件机制

你需要大概理解前端各个库中的插件机制是如何实现的，在你自己开发一些库的时候也能融入自己适合的插件机制。
Koa的洋葱中间件，Redux的中间件，Axios的拦截器让你迷惑吗？实现一个精简版的就彻底搞懂了。

设计模式

对于一些复杂场景，你的开发不能再是if else嵌套一把梭了，你需要把设计模式好好看一遍，在合适的场景下选择合适的设计模式。这里就推荐掘金小册吧，这个作者的质量我信得过。
JavaScript 设计模式核⼼原理与应⽤实践

基础算法

掌握一些基础算法核心思想或简单算法问题，比如排序。

开发思想

你需要知道组合优于继承的思想，不要再满口都是oop，写什么都来个class extends了，在前端ui扁平化的前提下，真的没那么多需要继承的场景。
https://medium.com/javascript-scene/master-the-javascript-interview-what-s-the-difference-between-class-prototypal-inheritance-e4cd0a7562e9

“…the problem with object-oriented languages is they’ve got all this implicit environment that they carry around with them. You wanted a banana but what you got was a gorilla holding the banana and the entire jungle.” ~ Joe Armstrong — “Coders at Work”

面向对象语言的问题在于它们带来了所有这些隐含的环境。
你想要一个香蕉，但你得到的是拿着香蕉和整个丛林的大猩猩。

代码规范

你需要熟读clean-code-javascript，并且深入结合到日常开发中，结合你们小组的场景制定自己的规范。
clean-code-javascript

框架篇

对于高级工程师来说，你必须要有一个你趁手的框架，它就像你手中的一把利剑，能够让你披荆斩棘，斩杀各种项目于马下。

下面我会分为Vue和React两个方面深入去讲。

Vue

Vue方面的话，我主要是师从黄轶老师，跟着他认真走，基本上在Vue这方面你可以做到基本无敌。

熟练运用

对于Vue你必须非常熟练的运用，官网的api你基本上要全部过一遍。并且你要利用一些高级的api去实现巧妙的封装。举几个简单的例子。

1. 你要知道怎么用slot-scope去做一些数据和ui分离的封装。
   以vue-promised这个库为例。
   Promised组件并不关注你的视图展示成什么样，它只是帮你管理异步流程，并且通过你传入的slot-scope，在合适的时机把数据回抛给你，并且帮你去展示你传入的视图。

<template>
  <Promised :promise="usersPromise">
    <!-- Use the "pending" slot to display a loading message -->
    <template v-slot:pending>
      <p>Loading...</p>
    </template>
    <!-- The default scoped slot will be used as the result -->
    <template v-slot="data">
      <ul>
        <li v-for="user in data">{{ user.name }}</li>
      </ul>
    </template>
    <!-- The "rejected" scoped slot will be used if there is an error -->
    <template v-slot:rejected="error">
      <p>Error: {{ error.message }}</p>
    </template>
  </Promised>
</template>

1. 你需要熟练的使用Vue.extends，配合项目做一些命令式api的封装。并且知道它为什么可以这样用。（需要具备源码知识）
   confirm组件

export const confirm = function(text, title, onConfirm = () => {}) {
  if (typeof title === "function") {
    onConfirm = title
    title = undefined
  }
  const ConfirmCtor = Vue.extend(Confirm)
  const getInstance = () => {
    if (!instanceCache) {
      instanceCache = new ConfirmCtor({
        propsData: {
          text,
          title,
          onConfirm
        }
      })
      // 生成dom
      instanceCache.$mount()
      document.body.appendChild(instanceCache.$el)
    } else {
      // 更新属性
      instanceCache.text = text
      instanceCache.title = title
      instanceCache.onConfirm = onConfirm
    }
    return instanceCache
  }
  const instance = getInstance()
  // 确保更新的prop渲染到dom
  // 确保动画效果
  Vue.nextTick(() => {
    instance.visible = true
  })
}

1. 你要开始使用JSX来编写你项目中的复杂组件了，比如在我的网易云音乐项目中，我遇到了一个复杂的音乐表格需求，支持搜索文字高亮、动态隐藏列等等。
   当然对于现在版本的Vue，JSX还是不太好用，有很多属性需要写嵌套对象，这会造成很多不必要的麻烦，比如没办法像React一样直接把外层组件传入的props透传下去，Vue3的rfc中提到会把vnode节点的属性进一步扁平化，我们期待得到接近于React的完美JSX开发体验吧。

    const tableAttrs = {
      attrs,
      on: {
        ...this.$listeners,
        ["row-click"]: this.onRowClick,
      },
      props: {
        ...props,
        headerCellClassName: "title-th",
        cellClassName: this.tableCellClassName,
        data: this.songs,
      },
    }

1. 你要能理解Vue中的高阶组件。关于这篇文章中为什么slot-scope不生效的问题，你不能于他的讲解一头雾水。（需要你具备源码知识）
   https://segmentfault.com/p/1210000012743259/read

2. 对于Vuex和vue-router的使用必须非常熟练，知道什么时候该用Vuex，什么需求需要利用什么样的router钩子，这样才能hold住一个大型的项目，这个我觉得还是尽量去学源码吧。

源码深入

1. 你不光要熟练运用Vue，由于Vue的源码写的非常精美，而且阅读难度不是非常大，很多人也选择去阅读Vue的源码。这里推荐黄轶老师的Vue源码课程。这里也包括了Vuex和vue-router的源码。
   Vue.js源码全方位深入解析 （含Vue3.0源码分析）

2. 推荐HcySunYang大佬的Vue逐行分析，需要下载git仓库，切到elegant分支自己本地启动。
   Vue逐行级别的源码分析

3. 当然，这个仓库的master分支也是宝藏，是这个作者的渲染器系列文章，脱离框架讲解了vnode和diff算法的本质
   组件的本质

Vue3源码

1. 不要脸的先推一篇自己的文章吧，细致了讲解了Vue3响应式的核心流程。
   带你彻底搞懂Vue3的Proxy响应式原理！TypeScript从零实现基于Proxy的响应式库。

2. 带你彻底搞懂Vue3的Proxy响应式原理！基于函数劫持实现Map和Set的响应式

3. 深度解析：Vue3如何巧妙的实现强大的computed

React

React已经进入了Hook为主的阶段，社区的各个库也都在积极拥抱Hook，虽然它还有很多陷阱和不足，但是这基本上是未来的方向没跑了。这篇文章里我会减少class组件的开发技巧的提及，毕竟好多不错的公司也已经全面拥抱Hook了。

熟练应用

你必须掌握官网中提到的所有技巧，就算没有使用过，你也要大概知道该在什么场景使用。

1. 深入理解React中的key
   understanding-reacts-key-prop

React Hook

你必须熟练掌握Hook的技巧，除了官网文档熟读以外：

1. 推荐Dan的博客，他就是Hook的代码实际编写者之一，看他怎么说够权威了吧？这里贴心的送上汉化版。
   useEffect 完整指南
   看完这篇以后，进入dan的博客主页，找出所有和Hook有关的，全部精读！

2. 推荐阿里大佬的精读周刊系列
   096.精读《useEffect 完全指南》.md
   注意！不是只看这一篇，而是这个仓库里所有有关于React Hook的文章都去看一遍，结合自己的思想分析。

3. Hook陷阱系列
   还是Dan老哥的文章，详细的讲清楚了所谓闭包陷阱产生的原因和设计中的权衡。
   函数式组件与类组件有何不同？

4. 去找一些社区的精品自定义hook，看看他们的开发和设计思路，有没有能融入自己的日常开发中去的。
   精读《Hooks 取数 - swr 源码》
   Umi Hooks - 助力拥抱 React Hooks
   React Hooks的体系设计之一 - 分层

React性能优化

React中优化组件重渲染，这里有几个隐含的知识点。
optimize-react-re-renders

React单元测试

1. 使用"@testing-library/react"测试组件，这个库相比起enzyme更好的原因在于，它更注重于站在用户的角度去测试一个组件，而不是测试这个组件的实现细节。

1. introducing-the-react-testing-library

2. Testing Implementation Details

2. 使用@testing-library/react-hooks测试自定义Hook
   how-to-test-custom-react-hooks

React和TypeScript结合使用

1. 这个仓库非常详细的介绍了如何把React和TypeScript结合，并且给出了一些进阶用法的示例，非常值得过一遍！
   react-typescript-cheatsheet

2. 这篇文章是蚂蚁金服数据体验技术部的同学带来的，其实除了这里面的技术文章以外，蚂蚁金服的同学也由非常生动给我们讲解了一个高级前端同学是如何去社区寻找方案，如何思考和落地到项目中的，由衷的佩服。
   React + Typescript 工程化治理实践

3. 微软的大佬带你写一个类型安全的组件，非常深入，非常过瘾…
   Writing Type-Safe Polymorphic React Components (Without Crashing TypeScript)

4. React + TypeScript 10个需要避免的错误模式。
   10-typescript-pro-tips-patterns-with-or-without-react

React代码抽象思考

1. 何时应该把代码拆分为组件？
   when-to-break-up-a-component-into-multiple-components

2. 仔细思考你的React应用中，状态应该放在什么位置，是组件自身，提升到父组件，亦或是局部context和redux，这会有益于提升应用的性能和可维护性。
   state-colocation-will-make-your-react-app-faster

3. 仔细思考React组件中的状态应该如何管理，优先使用派生状态，并且在适当的时候利用useMemo、reselect等库去优化他们。
   dont-sync-state-derive-it

4. React Hooks的自定义hook中，如何利用reducer的模式提供更加灵活的数据管理，让用户拥有数据的控制权。
   the-state-reducer-pattern-with-react-hooks

代码质量

1. 在项目中集成Prettier + ESLint + Airbnb Style Guide
   integrating-prettier-eslint-airbnb-style-guide-in-vscode

2. 在项目中集成ESLint with Prettier, TypeScript

3. 如何重构一个过万Star开源项—BetterScroll，是由滴滴的大佬嵇智所带来的，无独有偶的是，这篇文章除了详细的介绍一个合格的开源项目应该做到的代码质量保证，测试流程，持续集成流程以外，也体现了他的一些思考深度，非常值得学习。
   如何重构一个过万Star开源项目—BetterScroll

构建工具

1. webpack基础和优化
   深入浅出webpack

2. 滴滴前端工程师的webpack深入源码分析系列，非常的优秀。
   webpack系列之一总览

社区讨论

作为一个合格的前端工程师，一定要积极的深入社区去了解最新的动向，比如在twitter上关注你喜欢的技术开发人员，如Dan、尤雨溪。

另外Github上的很多issue也是宝藏讨论，我就以最近我对于Vue3的学习简单的举几个例子。

1. 尤雨溪解释关于为什么在Vue3中不加入React时间切片功能？并且详细的分析了React和Vue3之间的一些细节差别，狠狠的吹了一波Vue3（爱了爱了）。
   Why remove time slicing from vue3?

2. Vue3的functional-api相关的rfc，尤大舌战群儒，深入浅出的为大家讲解了Vue3的设计思路等等。
   Amendment proposal to Function-based Component API

3. vue-composition-api的rfc文档，在国内资料还不齐全的情况下，我去阅读了
   vue-composition-api-rfc 英文版文档，对于里面的设计思路叹为观止，学到了非常非常多尤大的思想。

总之，对于你喜欢的仓库，都可以去看看它的issue有没有看起来感兴趣的讨论，你也会学到非常多的东西。并且你可以和作者保持思路上的同步，这是非常难得的一件事情。

我在狠狠的吸收了一波尤大对于Vue3 composition-api的设计思路的讲解，新旧模式的对比以后，这篇文章就是我对Vue3新模式的一些见解。
Vue3 Composition-Api + TypeScript + 新型状态管理模式探索。

并且由于它和React Hook在很多方面的思想也非常相近，这甚至对于我在React Hook上的使用也大有裨益，比如代码组织的思路上,

为什么Logical Concerns 优于Vue2和React Class Component的Option Types？看完detailed-design这个章节你就全部明白了，并且这会融入到你日常开发中去。

学习方法的转变

从初中级前端开始往高级前端进阶，有一个很重要的点，就是很多情况下国内社区能找到的资料已经不够用了，而且有很多优质资料也是从国外社区二手、三手翻译过来的，翻译质量也不能保证。

这就引申出我们进阶的第一个点，开始接受英文资料。

这里很多同学说，我的英文能力不行啊，看不懂。其实我想说，笔者的英语能力也很一般，从去年开始我立了个目标，就是带着划词翻译插件也要开始艰难的看英文文章和资料，遇到不懂的单词就划出来看两眼（没有刻意去背），第五六次遇见这个单词的时候，就差不多记得它是什么意思了。

半年左右的时间下来，（大概保持每周3篇以上的阅读量）能肉眼可见的感觉自己的英语能力在进步，很多时候不用划词翻译插件，也可以完整的阅读下来一段文章。

这里是我当时阅读英文优质文章的一些记录，

英文技术文章阅读

后面英文阅读慢慢成了一件比较自然的事情，也就没有再刻意去记录，前期可以用这种方式激励自己。

推荐两个英文站点吧，有很多高质量的前端文章。

dev.to
medium

medium可能需要借助一些科学工具才能查看，但是里面的会员付费以及作者激励机制使得文章非常的优质。登录自己的谷歌账号即可成为会员，前期可能首页不会推荐一些前端相关的文章，你可以自己去搜索关键字如Vue、React、Webpack，任何你兴趣的前端技术栈，不需要过多久你的首页就会出现前端的推荐内容。好好享受这个高质量的英文社区吧。

总结

本篇文章是我在这一年多的学习经历抽象中总结出来，还有很多东西我会陆续加入到这篇文章中去。

希望作为初中级前端工程师的你，能够有所收获。如果能够帮助到你就是我最大的满足。

未完待续… 持续更新中，可以点击阅读原文持续关注。谢谢大家！