写给初中级前端的高级进阶指南

做者

我是 ssh，欢迎找我交个朋友，微信：sshsunlight，我喜欢分享前端的前沿趋势和一些有趣的事情。javascript

关注公众号「前端从进阶到入院」，精选超级优质的文章，助你前端成神之路。html

前言

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

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

本篇文章面对的人群是开发经验1到3年的初中级前端工程师，但愿能和大家交个心。java

已经晋升高级前端的同窗，欢迎你在评论区留下你的心得，补充个人一些缺失和不足。node

笔者本人 17 年毕业于一所普通的本科学校，20 年 6 月在三年经验的时候顺利经过面试进入大厂，职级是高级前端开发。react

个人 github 地址，欢迎 follow，我会持续更新一些值得你关注的项目。webpack

个人 blog 地址，这里会持续更新，点个 star 不失联！✨ios

个人公众号前端从进阶到入院，长期第一时间更新优质文章，还有技术氛围贼好的交流群欢迎你。git

基础能力

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

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

JavaScript

原生 js 系列

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

彻底熟练掌握 eventLoop。

tasks-microtasks-queues-and-schedules

Promise

你须要阅读 Promise A+规范，注意其中的细节，而且灵活的运用到开发当中去。
Promise A+ 英文文档
你须要跟着精品教程手写一遍 Promise，对里面的细节深刻思考，而且把其中异步等待、错误处理等等细节融会贯通到你的开发思想里去。
剖析 Promise 内部结构，一步一步实现一个完整的、能经过全部 Test case 的 Promise 类
最后，对于 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嵌套一把梭了，你须要把设计模式好好看一遍，在合适的场景下选择合适的设计模式。这里就推荐掘金小册吧，相信这篇小册会让你的工程能力获得质的飞跃，举例来讲，在 Vue 的源码中就用到了观察者模式、发布订阅模式、策略模式、适配器模式、发布订阅模式、工厂模式、组合模式、代理模式、门面模式等等。

而这些设计模式若是你没学习过可能很难想到如何应用在工程之中，可是若是你学习过，它就变成了你内在的工程能力，往大了说，也能够是架构能力的一部分。

在《设计模式》这本小册中咱们提到过，即便是在瞬息万变的前端领域，也存在一些具有“一次学习，终生受用”特性的知识。从工程的角度看，我推荐你们着重学习的是设计模式。 -修言

这里推荐掘金修言的设计模式小册。

开发思想

有时候组合是优于继承的，不光是面向对象编程能够实现复用，在某些场景下，组合的思想可能会更加简洁优雅。

medium.com/javascript-…

“…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

算法

算法这里我就不推荐各类小册，笔记，博文了。由于从我本身学习算法的经验来看，在没有太多的算法基础的状况下，文章基本上是很难真正的看进去并理解的，这里只推荐慕课网 bobo 老师的 LeetCode 真题课程，在这个课程里算法大牛 bobo 老师会很是细心的把各个算法作成动图，由浅入深给你讲解各类分类的 LeetCode 真题。这是我最近学到的最有收获的一门课程了。

因为这门课程是 C++ 为主要语言的（不影响理解课程），我也针对此课程维护了一个对应的 JavaScript 版题解仓库，在 Issue 里也根据标签分类整理了各个题型的讲解，欢迎 Star ✨。

算法对于前端来讲重要吗？也许你以为作题没用，可是我我的在作题后而且分门别类的整理好各个题型的思路和解法后，是能真切的感受到本身的代码能力在飞速提升的。

对于不少以为本身不够聪明，不敢去学习算法的同窗来讲，推荐 bobo 老师的这篇《天生不聪明》，也正是这篇文章激励我开始了算法学习的旅程。

在这里列一下前端须要掌握的基础算法知识，但愿能给你一个路线：

算法的复杂度分析。
排序算法，以及他们的区别和优化。
数组中的双指针、滑动窗口思想。
利用 Map 和 Set 处理查找表问题。
链表的各类问题。
利用递归和迭代法解决二叉树问题。
栈、队列、DFS、BFS。
回溯法、贪心算法、动态规划。

算法是底层的基础，把地基打扎实后，会让你在后续的职业生涯中大受裨益的。

这里也推荐个人整合文章前端算法进阶指南。

框架篇

对于高级工程师来讲，你必需要有一个你趁手的框架，它就像你手中的一把利剑，可以让你披荆斩棘，斩杀各类项目于马下。

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

Vue

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

熟练运用

对于 Vue 你必须很是熟练的运用，官网的 api 你基本上要所有过一遍。而且你要利用一些高级的 api 去实现巧妙的封装。举几个简单的例子。
你要知道怎么用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>
复制代码

你须要熟练的使用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;
  });
};
复制代码

你要开始使用JSX来编写你项目中的复杂组件了，好比在个人网易云音乐项目中，我遇到了一个复杂的音乐表格需求，支持搜索文字高亮、动态隐藏列等等。
固然对于如今版本的 Vue，JSX 仍是不太好用，有不少属性须要写嵌套对象，这会形成不少没必要要的麻烦，好比没办法像 React 同样直接把外层组件传入的 props 透传下去，Vue3 的 rfc 中提到会把 vnode 节点的属性进一步扁平化，咱们期待获得接近于 React 的完美 JSX 开发体验吧。
你要深刻了解 Vue 中 nextTick 的原理，而且知道为何要用微任务队列优于宏任务队列，结合你的 eventloop 知识深度思考。最后融入到你的异步合并优化的知识体系中去。
Vue 源码详解之 nextTick：MutationObserver 只是浮云，microtask 才是核心！
你要能理解 Vue 中的高阶组件。关于这篇文章中为何 slot-scope 不生效的问题，你不能看他的文章讲解都一头雾水。（须要你具有源码知识）
探索 Vue 高阶组件 | HcySunYang
推荐一下我本身总结的 Vue 高阶组件文章，里面涉及到了一些进阶的用法。
Vue 进阶必学之高阶组件 HOC
对于 Vuex 的使用必须很是熟练，知道何时该用 Vuex，知道怎么根据需求去编写 Vuex 的 plugin，合理的去使用 Vuex 的 subscribe 功能完成一些全局维度的封装，好比我对于 Vuex 中 action 的错误处理懒得一个个去try catch，就封装了一个vuex-error-plugin。代码很简单，重要的是去理解为何能这样作。这里用了 monkey patch 的作法，并非很好的实践，仅以此做为引子。
对于 vue-router 的使用必须很是熟练，知道什么需求须要利用什么样的 router 钩子，这样才能 hold 住一个大型的项目，这个我以为官方仓库里的进阶中文文档其实很好，不知道为何好像没放在官网。
vue-router-advanced
理解虚拟 DOM 的本质，虚拟 DOM 必定比真实 DOM 更快吗？这篇是尤雨溪的回答，看完这个答案，相信你会对虚拟 DOM 有更进一步的认识和理解。
网上都说操做真实 DOM 慢，但测试结果却比 React 更快，为何？

源码深刻

你不光要熟练运用 Vue，因为 Vue 的源码写的很是精美，并且阅读难度不是很是大，不少人也选择去阅读 Vue 的源码。视频课这里推荐黄轶老师的 Vue 源码课程。这里也包括了 Vuex 和 vue-router 的源码。
Vue.js 源码全方位深刻解析（含 Vue3.0 源码分析）
推荐 HcySunYang 大佬的 Vue 逐行分析，须要下载 git 仓库，切到 elegant 分支本身本地启动。
Vue 逐行级别的源码分析
固然，这个仓库的 master 分支也是宝藏，是这个做者的渲染器系列文章，脱离框架讲解了 vnode 和 diff 算法的本质
组件的本质

Vue3 展望

Vue3 已经发布了 Beta 版本，你能够提早学习Hook相关的开发模式了。这里推荐一下我写的这篇 Vue3 相关介绍：

Vue3 究竟好在哪里？（和 React Hook 的详细对比）

Vue3 源码

对于响应式部分，若是你已经很是熟悉 Vue2 的响应式原理了，那么 Vue3 的响应式原理对你来讲应该没有太大的难度。甚至在学习之中你会相互比较，知道 Vue3 为何这样作更好，Vue2 还有哪部分须要改进等等。

Vue3 其实就是把实现换成了更增强大的 Proxy，而且把响应式部分作的更加的抽象，甚至能够，不得不说，Vue3 的响应式模型更加接近响应式类库的核心了，甚至react-easy-state等 React 的响应式状态管理库，也是用这套相似的核心作出来的。

再次强调，很是很是推荐学习 Vue3 的@vue/reactivity这个分包。

推一波本身的文章吧，细致了讲解了 Vue3 响应式的核心流程。

在学习以后，我把@vue/reactivity包轻松的集成到了 React 中，作了一个状态管理的库，这也另外一方面佐证了这个包的抽象程度：
40 行代码把 Vue3 的响应式集成进 React 作状态管理

React

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

熟练应用

你必须掌握官网中提到的全部技巧，就算没有使用过，你也要大概知道该在什么场景使用。
推荐 React 小书，虽然书中的不少 api 已经更新了，可是核心的设计思想仍是没有变
React.js 小书
关于熟练应用，其实掘金的小册里有几个宝藏
1. 诚身大佬（悄悄告诉你，他的职级很是高）的企业级管理系统小册，这个项目里的代码很是深刻，并且在抽象和优化方面也作的无可挑剔，本身抽象了acl权限管理系统和router路由管理，而且引入了reselect作性能优化，一年前我初次读的时候，不少地方懵懵懂懂，这一年下来我也从无到有经手了一套带acl和权限路由的管理系统后，才知道他的抽象能力有多强。真的是
  
  初闻不知曲中意，再闻已经是曲中人。
  
  React 组合式开发实践：打造企业管理系统五大核心模块
2. 三元大佬的 React Hooks 与 Immutable 数据流实战，深刻浅出的带你实现一个音乐播放器。三元你们都认识吧？那是神，神带大家写应用项目，不学能说得过去吗？ React Hooks 与 Immutable 数据流实战
深刻理解 React 中的key
understanding-reacts-key-prop

react 中为什么推荐设置 key
React 官方团队成员对于派生状态的思考：
you-probably-dont-need-derived-state

React Hook

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

推荐 Dan 的博客，他就是 Hook 的代码实际编写者之一，看他怎么说够权威了吧？这里贴心的送上汉化版。
useEffect 完整指南
看完这篇之后，进入dan 的博客主页，找出全部和 Hook 有关的，所有精读！
推荐黄子毅大佬的精读周刊系列
096.精读《useEffect 彻底指南》.md
注意！不是只看这一篇，而是这个仓库里全部有关于 React Hook 的文章都去看一遍，结合本身的思想分析。
Hook 陷阱系列仍是 Dan 老哥的文章，详细的讲清楚了所谓闭包陷阱产生的缘由和设计中的权衡。
函数式组件与类组件有何不一样？
去找一些社区的精品自定义 hook，看看他们的开发和设计思路，有没有能融入本身的平常开发中去的。
精读《Hooks 取数 - swr 源码》
Umi Hooks - 助力拥抱 React Hooks
React Hooks 的体系设计之一 - 分层

React 性能优化

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

如何对 React 函数式组件进行性能优化？这篇文章讲的很详细，值得仔细阅读一遍。如何对 React 函数式组件进行优化

React 单元测试

使用@testing-library/react测试组件，这个库相比起 enzyme 更好的缘由在于，它更注重于站在用户的角度去测试一个组件，而不是测试这个组件的实现细节。
Introducing The React Testing Library
Testing Implementation Details
使用@testing-library/react-hooks测试自定义 Hook
how-to-test-custom-react-hooks

React 和 TypeScript 结合使用

这个仓库很是详细的介绍了如何把 React 和 TypeScript 结合，而且给出了一些进阶用法的示例，很是值得过一遍！
react-typescript-cheatsheet
这篇文章是蚂蚁金服数据体验技术部的同窗带来的，其实除了这里面的技术文章之外，蚂蚁金服的同窗也由很是生动给咱们讲解了一个高级前端同窗是如何去社区寻找方案，如何思考和落地到项目中的，由衷的佩服。
React + Typescript 工程化治理实践
微软的大佬带你写一个类型安全的组件，很是深刻，很是过瘾...
Writing Type-Safe Polymorphic React Components (Without Crashing TypeScript)
React + TypeScript 10 个须要避免的错误模式。
10-typescript-pro-tips-patterns-with-or-without-react

React 代码抽象思考

什么时候应该把代码拆分为组件？
when-to-break-up-a-component-into-multiple-components
仔细思考你的 React 应用中，状态应该放在什么位置，是组件自身，提高到父组件，亦或是局部 context 和 redux，这会有益于提高应用的性能和可维护性。
state-colocation-will-make-your-react-app-faster
仔细思考 React 组件中的状态应该如何管理，优先使用派生状态，而且在适当的时候利用 useMemo、reselect 等库去优化他们。
dont-sync-state-derive-it
React Hooks 的自定义 hook 中，如何利用 reducer 的模式提供更加灵活的数据管理，让用户拥有数据的控制权。
the-state-reducer-pattern-with-react-hooks

TypeScript

自从 Vue3 横空出世以来，TypeScript 好像忽然就火了。这是一件好事，推进前端去学习强类型语言，开发更加严谨。而且第三方包的 ts 类型支持的加入，让咱们甚至不少时候都再也不须要打开文档对着 api 撸了。

关于 TypeScript 学习，其实几个月前我还对于这门 JavaScript 的超集一窍不通，通过两三个月的静心学习，我可以去理解一些相对复杂的类型了，

能够说 TypeScript 的学习和学一个库或者学一个框架是彻底不一样的，

入门

除了官方文档之外，还有一些比较好的中文入门教程。
TypeScript Handbook 入门教程
TypeScript Deep Dive 很是高质量的英文入门教学。
TypeScript Deep Dive
工具泛型在平常开发中都很是的经常使用，必须熟练掌握。
TS 一些工具泛型的使用及其实现
视频课程，仍是黄轶大佬的，而且这个课程对于单元测试、前端手写框架、以及网络请求原理都很是有帮助。
基于 TypeScript 从零重构 axios

进阶

这五篇文章里借助很是多的案例，为咱们讲解了 ts 的一些高级用法，请务必反复在 ide 里尝试，理解，不懂的概念及时回到文档中补习。
巧用 TypeScript 系列一共五篇
TS 进阶很是重要的一点，条件类型，不少泛型推导都须要借助它的力量。
conditional-types-in-typescript
以及上面那个大佬博客中的全部 TS 文章。
mariusschulz.com

实战

一个参数简化的实战，涉及到的高级知识点很是多。
1. 🎉TypeScript 的高级类型（Advanced Type）
2. 🎉Conditional Types (条件类型)
3. 🎉Distributive conditional types (分布条件类型)
4. 🎉Mapped types（映射类型）
5. 🎉 函数重载
  TypeScript 参数简化实战
实现一个简化版的 Vuex，一样知识点结合满满。
1. 🎉TypeScript 的高级类型（Advanced Type）
2. 🎉TypeScript 中利用泛型进行反向类型推导。(Generics)
3. 🎉Mapped types（映射类型）
4. 🎉Distributive Conditional Types（条件类型分配）
5. 🎉TypeScript 中 Infer 的实战应用（Vue3 源码里 infer 的一个很重要的使用）
  TS 实现智能类型推导的简化版 Vuex

刻意训练

它几乎是一门新的语言（在类型世界里来讲），须要你花费很大的精力去学好它。

我对于 TypeScript 的学习建议其实就是一个关键词：刻意训练，在过基础概念的时候，不厌其烦的在vscode中敲击，理解，思考。在基础概念过完之后去寻找实践文章，好比我上面进阶和实战部分推荐的几篇，继续刻意训练，必定要堆积代码量，学习一门新的语言是不可能靠看文档得到成功的。

我会创建一个仓库，专门记录我遇到的TypeScript 的有趣代码，本身动手敲一遍，而且深刻理解。

能力分级

其实 TypeScript 的能力也是两级分化的，平常写业务来讲，你定义一些 interface，配合 React.FC 这种官方内置的类型也就跑通了，没什么特别难的点。

可是若是是造轮子呢？若是你本身写了一个工具库，而且类型比较复杂，你能保证推导出来吗？亦或者就拿 Vue3 来讲，ref 是一个很复杂的嵌套类型，

假如咱们这样定义一个值const value = ref(ref(2))，对于嵌套的 ref，Vue3 会作一层拆包，也就是说其实ref.value会是 2，

那么它是如何让 ts 提示出 value 的类型是 number 的呢？

若是你看到源码里的这段代码，你只有基础的话，保证懵逼。
Vue3 跟着尤雨溪学 TypeScript 之 Ref 类型从零实现

// Recursively unwraps nested value bindings.
export type UnwrapRef<T> = {
  cRef: T extends ComputedRef<infer V> ? UnwrapRef<V> : T
  ref: T extends Ref<infer V> ? UnwrapRef<V> : T
  array: T
  object: { [K in keyof T]: UnwrapRef<T[K]> }
}[T extends ComputedRef<any>
  ? 'cRef'
  : T extends Array<any>
    ? 'array'
    : T extends Ref | Function | CollectionTypes | BaseTypes
      ? 'ref' // bail out on types that shouldn't be unwrapped
      : T extends object ? 'object' : 'ref']
复制代码

业务开发人员

若是短时间内你对本身的要求是能上手业务，那么你理解 TypeScript 基础的interface和type编写和泛型的普通使用（能够理解为类型系统里的函数传参）也已经足够。

框架开发人员

可是长期来看，若是你的目的是可以本身编写一些类型完善的库或框架，或者说你在公司扮演前端架构师、轮子专家等等角色，常常须要写一些偏底层的库给你的小伙伴们使用，那么你必须深刻学习，这样才能作到给你的框架使用用户完美的类型体验。

面试题

TypeScript 相关的面试题我见得很少，不过力扣中国的面试题算是难度偏高的，其中有一道 TS 的面试题，能够说是实用性和难度都有所兼顾，简单来讲就是解包。

// 解开参数和返回值中的Promise
asyncMethod<T, U>(input: Promise<T>): Promise<Action<U>>
 ↓
asyncMethod<T, U>(input: T): Action<U>

// 解开参数中的Action
syncMethod<T, U>(action: Action<T>): Action<U>
 ↓
syncMethod<T, U>(action: T): Action<U>
复制代码

我在高强度学习了两三个月 TS 的状况下，已经能把这道题目相对轻松的解出来，相信这也是说明个人学习路线没有走偏（题解就不放了，尊重面试题，其实就是考察了映射类型和infer的使用）。
力扣面试题

代码质量

代码风格

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

高质量架构

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

Git 提交信息

不少新手在提交 Git 信息的时候会写的很随意，好比fix、test、修复，这么糊弄的话是会被 leader 揍的！

[译]如何撰写 Git 提交信息

Git-Commit-Log 规范（Angular 规范）

commitizen规范流程的 commit 工具，规范的 commit 格式也会让工具帮你生成友好的changelog

构建工具

webpack 基础和优化
深刻浅出 webpack
滴滴前端工程师的 webpack 深刻源码分析系列，很是的优秀。
webpack 系列之一总览

性能优化

推荐修言大佬的性能优化小册，这个真的是讲的深刻浅出，从webpack到网络到dom操做，全方位的带你作一些性能优化实战。这本小册我当时看的时候真的是彻底停不下来，修言大佬的风格既轻松又幽默。可是讲解的东西却能让你受益不浅。
谷歌开发者性能优化章节，不用多说了吧？很权威了。左侧菜单栏里还有更多相关内容，能够按需选择学习。
user-centric-performance-metrics
详谈合成层，合成层这个东西离咱们忽远忽近，可能你的一个不当心的操做就形成层爆炸，固然须要仔细关注啦。起码，在性能遇到瓶颈的时候，你能够打开 chrome 的layer面板，看看你的页面究竟是怎么样的一个层分布。
详谈层合成（composite）
刘博文大佬的性能优化指南，很是清晰的讲解了网页优化的几个重要的注意点。
让你的网页更丝滑

社区讨论

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

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

为何 Vue3 不须要时间切片？

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

Vue3 的`composition-api`到底好在哪？

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

Vue3`composition-api`的第一手文档

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

总之，对于你喜欢的仓库，均可以去看看它的 issue 有没有看起来感兴趣的讨论，你也会学到很是多的东西。而且你能够和做者保持思路上的同步，这是很是可贵的一件事情。

关于 Hook 的一些收获

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

在 Vue2 里，能够经过plugin先体验composition-api，截取这篇文章对应的实战项目中的一小部分代码吧：

<template>
  <Books :books="booksAvaluable" :loading="loading" />
</template>

<script lang="ts">
import { createComponent } from '@vue/composition-api';
import Books from '@/components/Books.vue';
import { useAsync } from '@/hooks';
import { getBooks } from '@/hacks/fetch';
import { useBookListInject } from '@/context';
export default createComponent({
  name: 'books',
  setup() {
    const { books, setBooks, booksAvaluable } = useBookListInject();
    const loading = useAsync(async () => {
      const requestBooks = await getBooks();
      setBooks(requestBooks);
    });
    return { booksAvaluable, loading };
  },
  components: {
    Books,
  },
});
</script>

<style>
.content {
  max-width: 700px;
  margin: auto;
}
</style>
复制代码

本实战对应仓库：

vue-bookshelf

而且因为它和React Hook在不少方面的思想也很是相近，这甚至对于我在React Hook上的使用也大有裨益，好比代码组织的思路上，

在第一次使用Hook开发的时候，大部分人可能仍是会保留着之前的思想，把state集中起来定义在代码的前一大段，把computed集中定义在第二段，把mutation定义在第三段，若是不看尤大对于设计思想的讲解，我也一直是在这样作。

可是为何 Logical Concerns 优于 Vue2 和 React Class Component 的 Option Types？看完detailed-design这个章节你就所有明白了，而且这会融入到你平常开发中去。

总之，看完这篇之后，我果断的把公司里的首屏组件的一坨代码直接抽成了 n 个自定义 hook，维护效率提高简直像是坐火箭。

固然，社区里的宝藏 issue 确定不止这些，我只是简单的列出了几个，但就是这几个都让个人技术视野开阔了不少，而且是真正的融入到公司的业务实战中去，是具备业务价值的。但愿你养成看 issue，紧跟英文社区的习惯，Github issue 里单纯的技术探讨氛围，真的是国内不多有社区能够媲美的。

function AppInner({ children }) {
  const [menus, setMenus] = useState({});

  // 用户信息
  const user = useUser();

  // 主题能力
  useTheme();

  // 权限获取
  useAuth({
    setMenus,
  });

  // 动态菜单也须要用到菜单的能力
  useDynamicMenus({
    menus,
    setMenus,
  });

  return (
    <Context.Provider value={user}> <Layout routers={backgrounds}>{children}</Layout> </Context.Provider>
  );
}
复制代码

能够看到，Hook在代码组织的方面有着得天独厚的优点，甚至各个模块之间值的传递都是那么的天然，仅仅是函数传参而已。
总之，社区推出一些新的东西，它总归是解决了以前的一些痛点。咱们跟着大佬的思路走，必定有肉吃。

Tree Shaking 的 Issue

相学长的文章你的 Tree-Shaking 并没什么卵用中，也详细的描述了他对于反作用的一些探寻过程，在UglifyJS 的 Issue中找到了最终的答案，而后贡献给中文社区，这些内容最开始不会在任何中文社区里出现，只有靠你去探寻和发现。

学习方法的转变

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

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

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

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

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

英文技术文章阅读

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

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

dev.to
medium

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

关于实践

社区有不少大佬实力很强，可是对新手写的代码嗤之以鼻，认为有 any 的就不叫 TypeScript、认为没有单元测试就没资格丢到 Github 上去。这种言论其实也不怪他们，他们也只是对开源软件的要求高到偏执而已。可是对于新手学习来讲，这种言论很容易对你们形成打击，致使不敢写 ts，写的东西不敢放出来。其实大可没必要，工业聚 对于这些观点就发表了一篇很好的见解，让我以为深受打动，也就是这篇文章开始，我慢慢的把旧项目用 ts 改造起来，慢慢的进步。

Vue 3.0 公开代码以后……

总结

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

但愿做为初中级前端工程师的你，可以有所收获。若是可以帮助到你就是我最大的知足。

未完待续... 持续更新中。

❤️ 感谢你们

1.若是本文对你有帮助，就点个赞支持下吧，你的「赞」是我创做的动力。

2.关注公众号「前端从进阶到入院」，精选超级优质的文章，助你前端成神之路。