关于javascript:近-20-人爆肝数周写给初中级前端的万字高级进阶指南

🔥 这是什么？

笔者在学会 JS 以及框架的利用后，有一段时间不晓得该如何深刻上来，活无能，就是不晓得该学啥。置信这个问题也会有很多读者敌人遇到。

当然笔者目前曾经冲破了这个瓶颈，也成为了出名公司基础架构组的成员。因而想通过本人成长的经验及积攒的材料整顿出 一系列的学习路线及材料举荐，帮忙各位读者敌人解决这个问题。

仓库内容笔者为次要贡献者，另外还拉了将近 20 位资深前端开发做内容共建及审核，少数人员任职一线大厂 P6、P7，第一版耗时数周，大家国庆假期也没停歇，内容相对让各位看官称心。

此材料实用于小白入门、初中级进阶、高级查漏补缺。

内容每天都在更新，大家能够继续关注。

这里是 Github 链接，最新内容都会首先更新在 Github，如果你感觉内容对你有帮忙，能够点个 Star。

💻 如何应用

如果你是初中级工程师来说，笔者也举荐后行学习「前端外围学习门路」，次要是坚固根底，之后再筛选感兴趣的主题。

如果你是高级工程化，笔者举荐跳过「前端外围学习门路」，间接筛选感兴趣的主题学习即可。

以下所有知识点笔者都会帮忙读者敌人们将常识连贯起来，从而建设本人的常识体系而不是独自记忆涣散的知识点。

如何获取本文材料

笔者曾经将仓库内容里的重要材料整顿好了，另外还附赠了前端 10 万字的面试攻略，曾经帮忙上千人拿到 offer。大家能够关注【公众号】发送「材料」获取。

📖 目录

读者敌人能够返回 Github 浏览目录。

如何高效自学

自学是每个工程师都须要把握的一项技能。这个学习办法笔者百试百灵，学习任何技术都会用上这个思路。另外咱们还能通过这个思路拓宽本人的技术栈，将各个常识分割起来建设本人的常识体系，并且通过这种学习形式学到的常识也不容易忘记。

书籍举荐

以下书籍次要还是举荐了 JS 方面的，其它比如说框架、TS 等等技术会在各自章节为大家介绍。

高级

• JavaScript 高级程序设计（第 4 版）

进阶

• JavaScript 忍者秘籍（第 2 版）
• 你不晓得的 JS 三卷，该书英文版是开源的，并且作者曾经在写第二版，有能力浏览英文的读者举荐间接看 原著

高级

• JavaScript 悟道
• JavaScript 语言精华与编程实际（第 3 版）

上述书籍大家能够关注【公众号】发送「材料」获取，另外还附赠了前端 10 万字的面试攻略，曾经帮忙上千人拿到 offer。

前端外围学习门路

前端知识点很多这是公认的事件，然而咱们的确没必要把所有常识都去学习，那样只会贪多嚼不烂。咱们能把外围知识点、热门技术以及工作中须要用到的常识学好就曾经能战胜大部分前端工程师了，剩下的大家能够自行依据趣味抉择学习内容。

然而在学习其余内容之前，笔者强烈推荐各位务必肯定肯定先把根底打扎实了，根底不好真的不可能把本人技术往上拔高的。

为了保障大家学到的常识是正确的，下文中的文档资料笔者都应用了英文版本。因为在审核材料的过程中笔者发现不少中文文档都存在翻译谬误或者过期的状况。

如果你还是一位初学者，举荐先自行残缺浏览一至二本书后再依照该打算学习，因为以下打算并没有囊括 JS 的所有常识，而是列出了所有外围知识点。

对于书籍笔者举荐以下两本：

• JavaScript 高级程序设计（第 4 版）
• JavaScript 忍者秘籍（第 2 版）

JS 外围知识点

数据类型

JS 数据类型分为两大类及八种数据类型，留神别漏了 ES6 新增的 bigint。

• 文档：

  • JavaScript 数据类型和数据结构

类型判断

类型判断有好几种形式，别离为：

• typeof
• instanceof
• Object.prototype.toString
• isXXX，比方 isArray

• 文档

  • typeof
  • instanceof
  • Object.prototype.toString

• 举荐文章，Issue 也挺重要

  • JavaScript 专题之类型判断(上)
  • JavaScript 专题之类型判断(下)

类型转换

类型转换算是 JS 中状况繁冗且容易出错，然而开发中还常常会遇到的知识点。强行全副记忆容易忘记，举荐记忆及练习开发中的常见状况。

• 文档

  • ES 规范

    • 规范并不好读，如果读者英文程度欠佳，能够只浏览该大节内的表格内容。
  • 双等判断

• 举荐文章

  • You Don’t Know JS 书中对于类型转换的一章节
  • 几种根本类型简略的类型转换
  • JavaScript 深刻之头疼的类型转换(上)
  • JavaScript 深刻之头疼的类型转换(下)

this

this 算是不少初学者容易搞混的一个知识点，然而它很重要，务必把握。

• 文档

  • this

• 举荐文章

  • You Don’t Know JS 书中对于 this 的第一章节
  • You Don’t Know JS 书中对于 this 的第二章节
  • 深刻了解 js this 绑定 (无需死记硬背，尾部有总结和面试题解析)

闭包

闭包特地罕用，然而其实挺多工程师对于闭包的了解是谬误的。

• 文档

  • 闭包

• 举荐文章

  • You Don’t Know JS 第二版中对于闭包的解释，该版本暂无中文翻译，读者可用 DeepL 进行翻译。
  • JavaScript 的动态作用域链与“动静”闭包链
  • 知乎中对于闭包的探讨

作用域

作用域是指程序中定义变量的区域，该地位决定了变量的生命周期，也就是变量和函数的可拜访范畴。

• 文档

  • 作用域
  • 块作用域

• 举荐文章

  • JavaScript 深刻之词法作用域和动静作用域
  • JavaScript 深刻之作用域链
  • Variable scope, closure，另有 中文翻译版
  • You Don’t Know JS Yet: Scope & Closures
  • The battle between function scope and block scope

变量晋升

变量晋升（Hoisting）能够将变量和函数在编译阶段放入内存，从而在执行阶段时在申明前应用。

• 文档

  • JS 变量晋升，变量晋升的概念

• 举荐文章

  • JavsScript 变量晋升和函数晋升，深度解析变量晋升和函数晋升，举例说明各种状况下的变量晋升
  • 我用了两个月的工夫才了解 let，深度了解解析 let 和 val 的区别，和 let 的临时死区
  • JavaScript Scoping and Hoisting，JavaScript 中的作用域和函数申明和变量申明的晋升

new

new 操作符能够帮忙咱们构建出一个实例，并且绑定上 this。

• 文档

  • new

• 举荐文章

  • JS 的 new 到底是干什么的？
  • JavaScript 深刻之 new 的模仿实现

call、apply、bind

• 文档

  • call，call 的概念
  • apply，apply 的概念
  • bind，bind 的概念

• 举荐文章

  • JS 中的 call、apply、bind 办法详解，对这三个办法的应用、面试题及具体实现做了详解
  • call 和 apply 的模仿实现，模仿实现 call 和 apply，帮忙更好了解
  • bind 的模仿实现，模仿实现 bind，帮忙更好了解

原型

通过原型这种机制，JavaScript 中的对象从其余对象继承性能个性。

• 文档

  • 原型

• 举荐文章

  • You Don’t Know JS: this & Object Prototypes
  • 深刻了解 JavaScript 原型
  • 深度解析原型中的各个难点
  • Prototypes in JavaScript 需自备梯子

Class

class 只是原型链的语法糖，与其它语言中的类不是同一样货色。

• 文档

  • Class

• 举荐文章

  • 了解 JavaScript 的类
  • Babel 是如何编译 Class 上
  • Babel 是如何编译 Class 下
  • 给 ES6 class 说句公道话
  • 应该在 JavaScript 中应用 Class 吗？

继承

继承是面向对象语言（Object-Oriented Language）三大特色之一，在 JS 中也占有十分重要的位置。而想要实现继承有多种形式，它们都有各自的优缺点。

• 文档

  • 继承

• 举荐文章

  • JavaScript 深刻之继承的多种形式和优缺点
  • JavaScript 中的继承，需自备梯子
  • JS 类继承，另有 中文翻译版

模块化

这块常识必会，最好理解下模块化的前世今生以及对 ES6 的原生模块化有个深刻的了解。

• 文档

  • Modules

• 举荐文章

  • 【深度全面】前端 JavaScript 模块化标准进化论，记录了 JS 模块化的进化之路
  • JavaScript modules，由浅入深解释 JS 模块化
  • ES modules: A cartoon deep-dive，一篇对 JS 模块化深刻解释的文章，另有 中文版

Promise

• 文档

  • Promise
  • Promises/A+ 标准
• 举荐文章
• Callbacks Vs Promises and basics of JS，需自备梯子
• 最简实现 Promise，反对异步链式调用（20 行）
• 100 行代码实现 Promises/A+ 标准
• Github
• promise-fun

迭代器与生成器

• 文档

  • 迭代器与生成器

• 举荐文章

  • [[译] 什么是 JavaScript 生成器？如何应用生成器？](https://juejin.cn/post/684490…)
  • Understanding Generators in ES6 JavaScript with Examples，需自备梯子
  • A Simple Guide to ES6 Iterators in JavaScript with Examples，需自备梯子

async await

• 文档

  • async
  • await

• 举荐文章

  • 手写 async await 的最简实现（20 行）
  • Babel 将 Generator 编译成了什么样子

事件循环

大家都晓得 JS 是一门单线程的非阻塞的脚本语言。这也就意味着，代码在执行的任何时候只有一个主线程来解决所有的工作。所以弄懂事件循环机制对咱们学习 JS 至关重要。

• 文档

  • 事件循环

• 举荐文章

  • 这一次，彻底弄懂 JavaScript 执行机制
  • 一次弄懂 Event Loop
  • JavaScript 的工作原理，需自备梯子，另有 中文翻译版。

• 事件循环可视化

  • Loupe

节流与防抖

节流指间断触发事件的状况下，在某个时间段内，函数只会执行一次。
防抖指在事件被触发肯定工夫后再执行回调函数，如果在肯定工夫内该事件又被反复触发，则重启计时。

• 举荐文章

  • 函数防抖与函数节流
  • 浅谈 JS 防抖和节流
  • Debounce – How to Delay a Function in JavaScript
  • Debouncing and Throttling in JavaScript

柯里化

柯里化就是将接管多个参数的函数转换成接管一个参数的函数。

• 举荐文章

  • 柯里化（Currying）
  • JavaScript 专题之函数柯里化
  • Understanding Currying in JavaScript，需自备梯子，另有 中文翻译版

垃圾回收

JavaScrip 在变量被创立时分配内存，并在对象不再应用时主动开释内存，这个过程被称为垃圾回收。另外咱们次要学习 V8 引擎下的垃圾回收机制。

• 文档

  • 内存治理 & 垃圾回收

• 举荐文章

  • 深刻了解 Chrome V8 垃圾回收机制，该文章的参考文献也可浏览下
  • GC in v8
  • JavaScript 工作原理：内存治理 + 解决常见的 4 种内存透露，另有中文版

其余零散但重要的知识点

• 0.1 + 0.2 !== 0.3，JS 浮点数会造成的问题

如果你感觉以上内容对你有帮忙，能够返回 Github 点个 Star 反对一下。

HTML

语义化

html 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析。在没有引入款式 CCS 款式的时候也能以一种能够分辨进去大抵示意内容的文档格局显示，并且是容易浏览的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使浏览源代码的人对网站更容易将网站分块，便于浏览保护了解。

• 文档

  • HTML 中的语义，什么是 HTML 语义化，HTML 语义化有什么益处

• 举荐文章

  • IFE-NOTE：页面构造语义化，HTML5 语义化中的页面构造语义化的一些教训和了解
  • 对于 HTML 语义和前端架构，HTML 语义化在开发中配合 CSS 结构化类名的应用构建可重用和可组合的组件

CSS

• 举荐文章

  • 一文梳理 CSS 必会知识点

盒子模型

在 CSS 中，所有的元素都被一个个的“盒子（box）”突围着，咱们宽泛地应用两种“盒子”—— 块级盒子 (block box) 和 内联盒子 (inline box)，了解这些“盒子”的基本原理，是咱们应用 CSS 实现精确布局、解决元素排列的要害。

• 文档

  • CSS 盒子模型，官网文档深刻理解 CSS 盒子模型

• 举荐文章

  • CSS 盒模型之内边距、边框、外边距 十九问，通过举例说明盒子模型各种常见状态和问题
  • CSS Box Model，盒子模型的一些标准介绍
  • CSS 盒模型详解（图文教程），通过图片和例子阐明盒子模型的各个局部和在页面上的表现形式

选择器

CSS 中，选择器用来指定网页上咱们想要款式化的 HTML 元素。CSS 选择器提供了很多种办法，所以在抉择要款式化的元素时，咱们能够做到很精密的境地。

CSS 选择器是 CSS 规定的第一局部。它是元素和其余局部组合起来通知浏览器哪个 HTML 元素该当是被选为利用规定中的 CSS 属性值的形式。选择器所抉择的元素，叫做“选择器的对象”。

• 文档

  • CSS 选择器，官网文档具体地讲授选择器的不同应用形式，并理解它们的工作原理。

• 举荐文章

  • 30 个你必须熟记的 CSS 选择器，开发中罕用的 CSS 选择器，熟练掌握当前能够很大水平进步 CSS 的编码体验
  • 深刻解析 CSS 款式优先级，具体介绍了 CSS 款式的权重优先级，防止写反复款式和款式被笼罩不失效的问题

Flex

• 文档

  • flexbox

• 举荐文章

  • A Complete Guide to Flexbox
  • Flexbox 布局中鲜为人知的细节

• 实战

  • FLEXBOX FROGGY 一个趣味性小游戏学习 Flex 的网站

grid

• 文档

  • grid

• 举荐文档

  • A Complete Guide to Grid
  • 最弱小的 CSS 布局 —— Grid 布局

其余

• 举荐文档

  • 详谈层合成（composite)
  • 挪动设施如何实现真正 1px 的线？

框架

框架个别选其一深刻学习即可。

虚构 DOM

Virtual DOM 也就是虚构节点。通过 JS 的 Object 对象模仿 DOM 中的实在节点对象，再通过特定的 render 办法将其渲染成实在的 DOM 节点。

• 文档

  • React 官网介绍

• 举荐文章

  • Virtual Dom 和 Diff 算法在 React 中是如何工作的？，需自备梯子
  • React 外围知识点 — Virtual Dom 与 Diff

路由

路由在 SPA 架构中都有被用到，理论原理就是使用 hash 及 history 相干的 API 实现。

• 文档

  • hashchange
  • history

• 举荐文章

  • 前端路由简介以及 vue-router 实现原理，对前端路由及 Vue-Route 库原理做了解释，几个框架的路由库原理都统一

React

学习框架务必从文档登程，起码熟读一遍布本人写过一些初步的 Demo 之后再思考学习别的材料。

React 举荐学习门路

大家能够跟着以上学习门路学习，其中除了概念相干的内容是必须学习之外，生态相干的内容大家能够在应用时再学习。

React 举荐学习材料

• React 学习之道，能够 0 元购买
• React 生命周期

如何编写一个组件

• 文档

  • React 官网文档

• 举荐文章

  • [[译]React 函数组件和类组件的差别](https://jishuin.proginn.com/p…)
  • 寫 React Components 該留神的 6 個中央與技巧
  • 编写高效且可读组件的 5 个最佳实际
  • designing-react-components-best-practices
  • React 复合组件

受控组件和非受控组件

• 受控组件：在 HTML 中，表单元素（如 input、textarea 和 select）通常本人保护 state，并依据用户输出进行更新。而在 React 中，可变状态（mutable state）通常保留在组件的 state 属性中，并且只能通过应用 setState() 或者 props 来更新
• 非受控组件：是一个存储其本人的外部状态，并且您应用查问 DOM ref，当你须要它来找到它的以后值，这有点像传统的 HTML

• 文档

  • React 官网文档

• 举荐文章

  • 受控和非受控组件真的那么难了解吗
  • [[译]受控组件 & 非受控组件](https://www.baobangdong.cn/co…)

高阶组件（HOC）

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 本身不是 React API 的一部分，它是一种基于 React 的组合个性而造成的设计模式。

具体而言，高阶组件是参数为组件，返回值为新组件的函数。

• 文档

  • React 官网文档

• 举荐文章

  • React 高阶组件 (HOC) 入门指南
  • hoc 库 recompose
  • 精读 React 高阶组件

Hooks

Hook 是 React 16.8 的新增个性。它能够让你在不编写类组件的状况下应用 React 的个性。

• 文档

  • React Hooks 官网文档

• 举荐文章

  • 彻底了解 React hook useCallback 和 useMemo 的区别
  • React hooks 最佳实际

合成事件

合成事件（SyntheticEvent）是 React 模仿原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。React 依据 W3C 标准 定义了合成事件。须要留神的是 v16 和 17 版本中的合成事件有差别。

• 文档

  • React 官网文档

• 举荐文章

  • 摸索 React 合成事件
  • 大佬，怎么办？降级 React17，Toast 组件不能用了
  • What’s the Difference Between Synthetic React Events and JavaScript Events?，需自备梯子
  • React 17 removes event pooling in the modern browsers

React 路由

• react-router，React 申明式路由
• reach router，下一代的 React 路由

React 状态治理

React 状态治理堪称百花齐放百家争鸣，远远不止笔者列的这些库。然而实际上很多我的项目齐全是不须要用到状态治理的，反而是减少编码复杂度，其实利用 React Context 或者 react-query 这类接口申请库就能很好地满足需要了。

• redux，JS 利用的状态容器，提供可预测的状态治理
• mobx，简略，可扩大的状态治理库
• recoil，React 状态治理库
• xstate，无限状态机
• zustand，简略、疾速和可扩大的骨状态治理解决方案

React 接口申请

• axios，传统接口申请库
• react-query，用于获取、缓存和更新 React 中异步数据的 Hooks 接口申请库
• swr，用于数据申请的 React Hooks 库

React SSR

• nest.js，一个渐进式的 Node.js 框架，用于构建高效、牢靠和可扩大的服务端利用。

React 单测

• jest，优雅、简洁的 JavaScript 测试框架，单测必选项
• react-testing-library，简略且残缺的 React DOM 测试工具

React CSS 计划

• styled-components，CSS in JS 计划
• tailwindcss，Atom CSS 计划

React 原理

• react-source-code-debug，学习如何调试源码
• react-illustration-series，图解 react 源码，用大量配图的形式，致力于将 react 原理表述分明
• just-react，「React 技术揭秘」，一本自顶向下的 React 源码剖析书
• tiny-react，基于 React17 精简而来的最小版实现

Blog 举荐

• Dan Abramov，React 外围开发者的 Blog

Vue

学习框架务必从文档登程，起码熟读一遍布本人写过一些初步的 Demo 之后再思考学习别的材料。

对于 Vue 来说，官网文档内容相当齐全，并且全家桶也都是官网出的，因而无需头疼技术栈选型。

Vue 举荐学习门路

目前 3.0 生态并不欠缺，在公司外部根本须要先相熟 2.0 的写法，因而举荐老手先学习 2.0 的内容。

• 老手向：Vue 2.0 的倡议学习程序，尤雨溪本人写的学习门路，时至今日也不过时

Vue 举荐学习材料

• awesome-vue
• vue-patterns，有用的 Vue 模式、技巧、提醒以及有帮忙的精选链接

Vue 原理

• vue-analysis，黄老师出品
• vue-design，官网人员出品，域名已过期，须要大家自行在仓库内浏览内容。尽管麻烦了点，然而品质相对过关

浏览器

个别说到浏览器，常指的都是 Chrome。浏览器作为前端不可或缺的载体，咱们势必须要好好学习及把握其相干的常识。

另外浏览器中波及到的知识面很多，与 JS 执行机制、网络、性能优化、平安等畛域都有关联，因而大家在学习这部分的内容时须要多与之前学习的常识分割起来。

架构

• Inside look at modern web browser，这是一个 Google 出的系列专栏，共有四篇文章，内容上到浏览器的整体架构，下至页面的渲染规定都说了一遍，另有 中文翻译

整体流程

• 浏览器的工作原理：旧式网络浏览器幕后揭秘，这尽管是一篇 11 年的文章，然而内容在现在也不过时，文章广为流传
• 当···时产生了什么？，经典面试题，文中对于这个流程里的相干内容力求尽可能具体，不脱漏任何细节
• 从输出 URL 到页面加载实现的过程中都产生了什么事件？，这篇文章波及了大量网络及硬件常识

渲染相干

• 浏览器的渲染原理简介，左耳朵耗子出品，如果上文「浏览器的工作原理：旧式网络浏览器幕后揭秘」感觉太长不看或者看完感觉没看懂什么，那么能够来浏览下本文，起码能从中学会一些能用在工作上的货色
• 浏览器的回流与重绘 (Reflow & Repaint)

JS 执行机制

• 从浏览器多过程到 JS 单线程，JS 运行机制最全面的一次梳理，超长文，这篇文章能让你对过程线程，浏览器多过程、浏览器内核多线程、JS 单线程、JS 运行机制有个不错的了解

缓存

• 文档
• 彻底了解浏览器的缓存机制，浏览器缓存机制与性能优化非亲非故

Devtools

• Chrome DevTools，Google 出的 DevTools 的应用说明书，对于每个性能的应用都有具体的介绍，看啥文章都不如看这个
• Chrome_Devtools_Tricks，介绍了 Chrome DevTools 的应用技巧，从不同的情景来阐明应该如何搭配应用 Chrome DevTools 中的小技巧，适宜英文不怎么好的读者浏览

浏览器平安

• 文档
• 一文读懂 Web 平安，简略介绍了一些前端须要留神的平安常识
• the-book-of-secret-knowledge，如果你对平安畛域有趣味，能够浏览下这个仓库的内容

性能优化

性能优化是一个系统性工程，波及到的方面很多，不仅仅只是大家常说的动态文件和代码优化那么简略。

大家学习这部分内容的时候能够先从举荐的文章中理解具体有哪些性能优化伎俩及具体方法，而后依据这些内容去试验。

举荐书籍

其实性能优化相干的书籍市面上出的不多，优良的也都是好几年前的老书了，看不看也无所谓了。

• Web 性能权威指南，豆瓣 8.9 分，老书
• 高性能网站建设进阶指南，豆瓣 8.9 分，老书

举荐网站

• web.dev，Google 自家的 blog，你能在这下面学到很多性能优化及如何做好用户体验的常识，其实很多市面上的文章内容都有这个网站的影子

整体优化倡议

• 前端性能优化 24 条倡议（2020），相似现代版雅虎军规
• 前端性能优化之旅，系统性介绍性能优化的伎俩，参考资料也值得学习
• Front-End Performance Checklist 2021，一本很火的收费 PDF，蕴含了很多性能优化相干的 Checklist
• React 性能优化 | 包含原理、技巧、Demo、工具应用

性能指标

• 文档
• 还在看那些老掉牙的性能优化文章么？这些最新性能指标理解下，文章会介绍谷歌提倡的七个用户体验指标（也能够认为是性能指标）
• 做性能优化时，咱们关注哪些指标？

性能监控

• 前端搞工程化：从零打造性能检测库「源码 + 视频」，光会性能优化的伎俩还是不够的，如何体现优化的价值也是至关重要的

TypeScript

TypeScript 是为开发大型利用而设计的，并且 TypeScript 可转译成 JavaScript。因为 TypeScript 是 JavaScript 的严格超集，任何现有的 JavaScript 程序都是非法的 TypeScript 程序。

文档

• TypeScript 官网文档

举荐文章

• TypeScript 入门教程
• TypeScript 的另一面：类型编程
• TypeScript Deep Dive 另有中文版

举荐开源我的项目

• TypeScript-for-Beginner-Programmers 需自备梯子
• type-challenges
• TypeScript exercises

Electron

Electron 是一个能够应用 Web 技术如 JavaScript、HTML 和 CSS 来创立跨平台原生桌面利用的框架。借助 Electron，咱们能够应用纯 JavaScript 来调用丰盛的原生 APIs。

文档

• Electron 官网
• Electron 中文教程

举荐文章

• 分享这半年的 Electron 利用开发和优化教训
• 用 JS 开发跨平台桌面利用，从原理到实际
• Building a desktop application with Electron 需翻墙拜访

举荐开源我的项目

• Electron 资源
• Electron Playground
• electron-vue-cloud-music
• electron-builder

组件库

组件库顾名思义指的就是将多个公共模块或者可复用的组件提取整合生成的一个仓库

知名度较广的组件库：

• antd
• elementUI

相干文档：

• lerna
• angular commit 标准
• yarn
• css variables

举荐文章：

• 从 0 到 1，搭建一个体系欠缺的前端 React 组件库
• 如何标准你的 Git commit？
• 基于 lerna 和 yarn workspace 的 monorepo 工作流
• FusionNext 可配置能力从 Sass 体系降级为反对 Css Variable

微前端

是一种相似于微服务的架构，它将微服务的理念利用于浏览器端，行将单页面前端利用由繁多的单体利用转变为多个小型前端利用聚合为一的利用。

劣势：

• 代码库更小，更内聚、可维护性更高
• 松耦合、自治的团队可扩展性更好
• 渐进地降级、更新甚至重写局部前端性能成为了可能
• 独立开发部署，放大变更范畴，进而升高相干危险

框架：

• single-spa
• 蚂蚁 - 乾坤
• 淘系 -icestark
• 字节 -Garfish
• 京东 -micro-app
• Bit
• EMP – Micro Frontends solution 基于 webpack 5 & module federation

举荐文章：

• 从零到一实现企业级微前端框架，保姆级教学
• 字节跳动是如何落地微前端的
• What Are Micro Frontends?
• Bifrost 微前端框架及其在美团闪购中的实际
• 每日优鲜供应链前端团队微前端革新
• 微前端在美团外卖的实际
• How We Build Micro Frontends
• Revolutionizing Micro Frontends with Webpack 5, Module Federation and Bit

举荐学习材料

• microfrontend-resources，🔥 对于微前端的各类材料举荐

跨端框架

跨端的最次要的含意就是一套代码多端运行，缩小重复劳动

目前看来，国内比拟风行的是小程序, H5, App 三端跨的框架，uniapp 及 taro 是其中做的比拟出彩的两个框架。当然在 taro3.0 之前（以下次要是说小程序），taro 跟 uniapp 都是应用编译时做更多的事件，编译成小程序可能运行的代码。

而在 taro3.0 之后变成了与 remax 雷同的思维，在运行时做更多的事件，保障了原框架代码可能齐全应用，而不须要为了转换成其余小程序时做兼容。

• awesome-remax
• 美团自研 react 跨端
• 京东 taro

监控

当业务进入稳固，最须要做的必定是对于业务线上的各种性能、异样及惯例业务进行监控，防止在上线之后成为瞎子。

目前市场比拟闻名的监控零碎：

• sentry
• ali node
• bugly
• mixpanel
• 听云

举荐开源库：

• rrweb，提供像素级的录制与回放，帮忙正确定位问题是如何产生的
• monitor，👀 一款轻量级的收集页面的用户点击行为、路由跳转、接口报错、代码报错、并上报服务端的 SDK
• mitojs 下面 monitor 作者新保护的库。全新插拔式的监控 SDK，代码架构更清晰，配置项更丰盛，高度可定制化

举荐文章：

• 美团可视化埋点计划
• 如何进行 web 性能监控？
• 蚂蚁金服如何把前端性能监控做到极致?
• 如何做前端异样监控？
• 前端监控平台系列：JS SDK（已开源）

日常充电

• Best-websites-a-programmer-should-visit，优良的工程师都应该浏览的网站

CSS 日常充电

• You-need-to-know-css
• CSS Inspiration
• CSS Tricks
• spinkit 需自备梯子
• animista

Github 优良学习材料

JS 优良学习材料

• 33-js-concepts
• JavaScript 平安指南
• What the f*ck JavaScript?，乏味的 JavaScript 示例列表，附有解释
• clean-code-javascript，适应于 JavaScript 的优雅代码倡议

React 优良学习材料

• react-philosophies，React 哲学，内容为写 React 代码时思考的事件

代码款式及平安

• secguide，面向开发人员梳理的代码平安指南

生产力工具

流程图

• whimsical

最初

内容其实目前只能算作是第一版，并不欠缺，欢送大家参加投稿内容，这里是仓库链接