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

时间  2020-04-09
标签 写给 初中 前端 高级 进阶 指南 繁體版
原文   原文链接

前言

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

笔者毕业于一个很普通的本科学校，非计算机专业，17年的时候刚毕业的时候还不知道本身的方向在哪（实习作过销售、运营、推广）。后来机缘巧合走上了开发这条路，第一年的时候 Java 和前端都作，慢慢发现了本身的兴趣所在转向前端。第二年的时候跳槽来到杭州，开始前端工程师的生涯。css

目前开发经验一共是2年8个月，目前带一个5人的团队，前任的组长让我带领团队的主要缘由是我的技术 + 沟通能力相对较好，可是在技术能力成长的背后须要怎么去走呢，相信有不少小伙伴会迷失方向。html

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

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

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

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

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

基础能力

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

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

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嵌套一把梭了，你须要把设计模式好好看一遍，在合适的场景下选择合适的设计模式。这里就推荐掘金小册吧，相信这篇小册会让你的工程能力获得质的飞跃，举例来讲，在Vue的源码中就用到了观察者模式、发布订阅模式、策略模式、适配器模式、发布订阅模式、工厂模式、组合模式、代理模式、门面模式等等。

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

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

基础算法

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

开发思想

你须要知道组合优于继承的思想，不要再满口都是oop，写什么都来个class extends了，在前端ui扁平化的前提下，真的没那么多须要继承的场景。
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

框架篇

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

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

Vue

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

熟练运用

  1. 对于Vue你必须很是熟练的运用，官网的api你基本上要所有过一遍。而且你要利用一些高级的api去实现巧妙的封装。举几个简单的例子。

  2. 你要知道怎么用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中nextTick的原理，而且知道为何要用微任务队列优于宏任务队列，结合你的eventloop知识深度思考。最后融入到你的异步合并优化的知识体系中去。
    Vue源码详解之nextTick：MutationObserver只是浮云，microtask才是核心！

  2. 你要能理解Vue中的高阶组件。关于这篇文章中为何slot-scope不生效的问题，你不能看他的文章讲解都一头雾水。（须要你具有源码知识）
    探索Vue高阶组件 | HcySunYang

  3. 对于Vuex和vue-router的使用必须很是熟练，知道何时该用Vuex，什么需求须要利用什么样的router钩子，这样才能hold住一个大型的项目，这个我以为仍是尽可能去学源码吧。

源码深刻

  1. 你不光要熟练运用Vue，因为Vue的源码写的很是精美，并且阅读难度不是很是大，不少人也选择去阅读Vue的源码。先推荐一个阿里巴巴的柒陌同窗掘金的小册，9.9元买不了吃亏，每章节还附带demo，很是适合入门源码：

  1. 视频课这里推荐黄轶老师的Vue源码课程。这里也包括了Vuex和vue-router的源码。
    Vue.js源码全方位深刻解析 （含Vue3.0源码分析）

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

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

Vue3展望

  1. Vue3已经发布了Alpha版本，你能够提早学习Hook相关的开发模式了，面向将来的异步请求管理是zeit/swr这种自定义Hook库所带来的。 在讲解以前，先举个例子，在Vue2中若是我须要请求一份数据，而且在loading和error时都展现对应的视图，通常来讲，咱们会这样写：
<template>
    <div v-if="error">failed to load</div>
    <div v-else-if="loading">loading...</div>
    <div v-else>hello {{fullName}}!</div>
</template>

<script> import { createComponent, computed } from 'vue' export default { data() { // 集中式的data定义 若是有其余逻辑相关的数据就很容易混乱 return { data: { firstName: '', lastName: '' }, loading: false, error: false, }, }, async created() { try { // 管理loading this.loading = true // 取数据 const data = await this.$axios('/api/user') this.data = data } catch (e) { // 管理error this.error = true } finally { // 管理loading this.loading = false } }, computed() { // 没人知道这个fullName和哪一部分的异步请求有关 和哪一部分的data有关 除非仔细阅读 // 在组件大了之后更是如此 fullName() { return this.data.firstName + this.data.lastName } } } </script>
复制代码

这段代码，怎么样都谈不上优雅，凑合的把功能完成而已，而且对于loading、error等处理的可复用性为零。

数据和逻辑也被分散在了各个option中，这还只是一个逻辑，若是又多了一些逻辑，多了data、computed、methods？若是你是一个新接手这个文件的人，你如何迅速的分辨清楚这个method是和某两个data中的字段关联起来的？

让咱们把zeit/swr的逻辑照搬到Vue3中，

看一下swr在Vue3中的表现：

<template>
    <div v-if="error">failed to load</div>
    <div v-else-if="loading">loading...</div>
    <div v-else>hello {{fullName}}!</div>
</template>

<script> import { createComponent, computed } from 'vue' import useSWR from 'vue-swr' export default createComponent({ setup() { // useSWR帮你管理好了取数、缓存、甚至标签页聚焦从新请求、甚至Suspense... const { data, loading, error } = useSWR('/api/user', fetcher) // 轻松的定义计算属性 const fullName = computed(() => data.firstName + data.lastName) return { data, fullName, loading, error } } }) </script>
复制代码

就是这么简单，对吗？逻辑更加聚合了。

有人要问，所有逻辑都写在setup里了，这是面条式代码！并且针对我上面提出的代码逻辑分散的问题，哪里进步了。

那么咱们用自定义hook把逻辑统一抽出来？

<template>
    <div v-if="error">failed to load</div>
    <div v-else-if="loading">loading...</div>
    <div v-else>hello {{fullName}}!</div>
</template>

<script> import { createComponent, computed } from 'vue' import useSWR from 'vue-swr' export default createComponent({ setup() { return { ...useName() } } }) // 姓名相关逻辑 function useName() { // useSWR帮你管理好了取数、缓存、甚至标签页聚焦从新请求、甚至Suspense... const { data, loading, error } = useSWR('/api/user', fetcher) // 轻松的定义计算属性 const fullName = computed(() => data.firstName + data.lastName) return { data, fullName, loading, error } } </script>
复制代码

这下好了，useName这个hook甚至成为了一个全部组件均可以共用的hook。在Vue2里，你怎么抽取？难道用mixins？

那么你应该看这篇知乎：为什么不要用mixins来实现组件复用

Vue3源码

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

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

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

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

  1. 带你完全搞懂Vue3的Proxy响应式原理！TypeScript从零实现基于Proxy的响应式库。

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

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

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

React

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

熟练应用

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

  2. 推荐React小书，虽然书中的不少api已经更新了，可是核心的设计思想仍是没有变
    React.js 小书

  3. 关于熟练应用，其实掘金的小册里有几个宝藏

    1. 诚身大佬（悄悄告诉你，他的职级很是高）的企业级管理系统小册，这个项目里的代码很是深刻，并且在抽象和优化方面也作的无可挑剔，本身抽象了acl权限管理系统和router路由管理，而且引入了reselect作性能优化，一年前我初次读的时候，不少地方懵懵懂懂，这一年下来我也从无到有经手了一套带acl和权限路由的管理系统后，才知道他的抽象能力有多强。真的是

      初闻不知曲中意，再闻已经是曲中人。

      React 组合式开发实践：打造企业管理系统五大核心模块

    2. 三元大佬的React Hooks 与 Immutable 数据流实战，深刻浅出的带你实现一个音乐播放器。三元你们都认识吧？那是神，神带大家写应用项目，不学能说得过去吗？ React Hooks 与 Immutable 数据流实战

  4. 深刻理解React中的key
    understanding-reacts-key-prop

    react中为什么推荐设置key

  5. React官方团队成员对于派生状态的思考：
    you-probably-dont-need-derived-state

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函数式组件进行性能优化？这篇文章讲的很详细，值得仔细阅读一遍。 [juejin.im/post/5dd337…](如何对 React 函数式组件进行优化)

React单元测试

  1. 使用@testing-library/react测试组件，这个库相比起enzyme更好的缘由在于，它更注重于站在用户的角度去测试一个组件，而不是测试这个组件的实现细节。
    Introducing The React Testing Library
    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

TypeScript

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

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

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

入门

  1. 掘金的小册，深刻浅出TypeScript：从基础知识到类型编程，讲解的很是通俗易懂。

  1. 除了官方文档之外，还有一些比较好的中文入门教程。
    TypeScript Handbook入门教程

  2. TypeScript Deep Dive 很是高质量的英文入门教学。
    TypeScript Deep Dive

  3. 工具泛型在平常开发中都很是的经常使用，必须熟练掌握。
    TS 一些工具泛型的使用及其实现

  4. 视频课程，仍是黄轶大佬的，而且这个课程对于单元测试、前端手写框架、以及网络请求原理都很是有帮助。
    基于TypeScript从零重构axios

进阶

  1. 这五篇文章里借助很是多的案例，为咱们讲解了ts的一些高级用法，请务必反复在ide里尝试，理解，不懂的概念及时回到文档中补习。
    巧用 TypeScript系列 一共五篇

  2. TS进阶很是重要的一点，条件类型，不少泛型推导都须要借助它的力量。
    conditional-types-in-typescript

  3. 以及上面那个大佬博客中的全部TS文章。
    mariusschulz.com

实战

  1. 一个参数简化的实战，涉及到的高级知识点很是多。

    1. 🎉TypeScript的高级类型（Advanced Type）
    2. 🎉Conditional Types (条件类型)
    3. 🎉Distributive conditional types (分布条件类型)
    4. 🎉Mapped types（映射类型）
    5. 🎉函数重载
      TypeScript 参数简化实战

  2. 实现一个简化版的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的呢？

若是你看到源码里的这段代码，你只有基础的话，保证懵逼。

// 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的使用）。
力扣面试题

代码质量

代码风格

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

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

高质量架构

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

Git提交信息

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

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

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

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

构建工具

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

性能优化

  1. 推荐修言大佬的一本小册，真的是讲的很好很好了，从webpack到网络到dom操做，全方位的带你作一些性能优化实战。这本小册我当时看的时候真的是彻底停不下来，修言大佬的风格既轻松又幽默。可是讲解的东西却能让你受益不浅。

  1. 谷歌开发者性能优化章节，不用多说了吧？很权威了。左侧菜单栏里还有更多相关内容，能够按需选择学习。
    user-centric-performance-metrics

  2. 详谈合成层，合成层这个东西离咱们忽远忽近，可能你的一个不当心的操做就形成层爆炸，固然须要仔细关注啦。起码，在性能遇到瓶颈的时候，你能够打开chrome的layer面板，看看你的页面究竟是怎么样的一个层分布。
    详谈层合成（composite）

  3. 刘博文大佬的性能优化指南，很是清晰的讲解了网页优化的几个重要的注意点。
    让你的网页更丝滑

社区讨论

做为一个合格的前端工程师，必定要积极的深刻社区去了解最新的动向，好比在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

Vue3composition-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.关注公众号「前端从进阶到入院」便可加我好友，我拉你进「前端进阶交流群」，你们一块儿共同交流和进步。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程