8年前端开发的知识点沉淀(不知道会多少字，一直写下去吧...)

r囧r小猫 2022-01-12 02:05 133阅读 0赞

## 先啰嗦几句 ##

2011年开始从事前端，从一个页面的切图仔到如今还算合格的前端工程师，一路走来，我很清楚要学的很多，其中也学了很多，学的同时也丢了很多（身陷边学边丢，边丢边学的状态）。尤其这3年，前端领域可谓是百家齐放，四面开花。

可以说这是最好的时代也是最坏的时代。说它好，这是因为前端走在了混乱且正规化的道路上，前端开发也逐渐在各家公司至少在项目或产品的开发上受到足够的重视和尊重（针对开发者）；说它不好，是因为杂乱而繁多（语言、框架、组件包等），许多同行或多或少都有点进入了学不动了和产生一种迷茫的状态。个人观点，变总比不变好，因为乱（杂）而奠定了前端在项目或产品开发中的地位。至于如何去学和学习什么，那是个人学习方法或选择问题了（并不是因为前端社区繁荣产生这问题的，只能说前端社区繁荣将这类问题扩大了，这两个问题希望能拎清）。

我们得承认两点：

*  领域知识是不断更新的;
 *  每个人的资质各有不同（这里资质除了天赋还有后期努力）（你可以说我不努力但是不可以说我比隔壁家的笨）;

认清事实后，不妨学学中医里的**固本培元**的思想。什么意思呢？其实很简单，就是学好并实践好现有、稳定且必须知道的知识（固本），而对于新的、还不普及且不必学的可以选学，如果你觉得自己很有天赋另当别论。

很长一段时间里，我的野心比我的努力要大很多很多，php、python、go、科学计算等都想学，结果你肯定也知道了，就是什么都没学会，刚入门因为业务场景很少用（就是没用）不得不丢下了，进而陷入迷茫期。也是前段时间，决定忍住诱惑，慢慢从基础沉淀，虽然慢，但是学的很扎实也很快乐。

对于认不认同不打紧（这只是我们的认识观或方法论不同而已），重要的是找到适合自己的，你说呢？

> **说明** 下面的篇幅（图谱及说明）会随着时间长河的流动变得越来越长，希望这不会给你带来阅读压力，也希望你能有这个心理准备（或许你期待着越来越丰富），**好处是至少我在1-2天里会填补（更新或展开说明）这些图谱的细小知识点。本文本质就是在做就是前端知识罗列和调度（给出文章详情链接），希望对正在学前端或者已经在前端岗位上的你有些许帮助**。另外文中部分内容有和前人或后来者的文章相似、相同或相通之处还请多多包含和见谅。另外，文中所缺漏或有错的地方还请多多指出，你我共同成长（赠人玫瑰嘛）。

> **观点** 学而时习之，不亦乐乎。学习并在一定时刻应用（实践）它，不也是件快乐的事嘛。（划重点**在一定时刻将它用在实践中是件快乐的事**，回想一下，学过的东西在用它的时候是不是很快乐呢!!!???）

> **承诺** 本文我会持续更新，那什么时候结束呢？我现在的想法是到我退休那一刻或者说不在这行里折腾的那一刻，谢谢。

## 最近7日更新 ##

### 2019-06-20 ###

*  [Typescript 的成长环境][Typescript]
 *  [Typescript 基本类型][Typescript 1]

### 2019-06-19 ###

*  [Typescript 为什么选择她][Typescript 2]
 *  [Typescript 精彩履历][Typescript 3]

## 图例说明 ##

总览 -> 要做的 -> 正在做的 -> 已经完成 -> 再回到总览

## 前端总谱 ##

## 小程序 ##

## 微信公众号 ##

## 前端框架 ##

### Vue.js ###

### React.js ###

#### 源码分析(react 16.8.6) ####

*  [React 源码解析之唠叨两句][React]
 *  [React 源码解析之总览][React 1]
 *  [React 源码解析之ReactElement][React _ReactElement]
 *  [React 源码解析之React.Children][React _React.Children]

## HTML ##

## CSS ##

## ECMAScript(Javascript) ##

### ES6 ###

关于 ES6 只是先放阮一峰老师的 [ECMAScript 6入门][ECMAScript 6]。后期我会整理一本 gitbook 小书，倒不是会在阮一峰老师的基础上加更牛逼的东西什么的，而是做一些减法，因为整个文档看下来需要很长时间，小书只取常用的api（当然我会注明出处），这是我的个人喜好，选择性学习和书写（正在阅读的你也要看你喜好）。想要看详细的还是要看阮一峰老师的 [ECMAScript 6入门][ECMAScript 6]。

## Typescript ##

国际惯例：Github 地址，欢迎 Star

? [ruizhengyun/typescript-note][ruizhengyun_typescript-note] ?

Typescript 小书目录

*  [Typescript 为什么选择她][Typescript 2]
 *  [Typescript 精彩履历][Typescript 3]
 *  [Typescript 的成长环境][Typescript]
 *  [Typescript 基本类型][Typescript 1]

## Node.js ##

## 面试之道 ##

## 浏览器 ##

## HTTP 指南 ##

## 设计模式 ##

## 工程化 ##

### npm scripts ###

*  [npm script 为什么选择她][npm script]
 *  [npm script 一见钟情][npm script 1]
 *  [npm script 多命令的运行][npm script 2]
 *  [npm script 参数的使用][npm script 3]
 *  [npm script 钩子的使用][npm script 4]
 *  [npm script 环境变量的使用][npm script 5]
 *  [npm script 跨端兼容的实现][npm script 6]
 *  [npm script 命令补全的实现][npm script 7]
 *  [npm script 的文件监听和自动刷新][npm script 8]
 *  [npm script 复杂场景的应用][npm script 9]
 *  [npm script 应用在 git hooks 中][npm script _ git hooks]
 *  [npm script 的实践][npm script 10]

## 性能优化 ##

## 前端安全 ##

## 自动化测试 ##

## 工具调试 ##

## 算法与数据结构 ##

## 最后彩蛋（也不容错过） ##

这块主要罗列我的一些想法和看法，还有广大前端伙伴的建议与观点（包括本文评论），这里会有认可、理解、分歧、碰撞、火花等情况，但越是这样说明大家都希望在前端道路上走的更远更高，总有一些适合你的，希望对坚持在前端路上的我们都有所帮助。

发现这块篇幅慢慢增长，见她有点喧宾夺主之势，所以决定将其整理成一片文章（伴随时间流逝而持续更新）。

[行走在前端路上的一些想法][Link 1]

转载于:https://juejin.im/post/5d0878aaf265da1b83338f74

[Typescript]: https://juejin.im/post/5d0ab9ae6fb9a07eb74b41a8
[Typescript 1]: https://juejin.im/post/5d0b9e1f51882531fc431d60
[Typescript 2]: https://juejin.im/post/5d09f3625188257b951c0fbe
[Typescript 3]: https://juejin.im/post/5d0a0ce16fb9a07efc498ce4
[React]: https://juejin.im/post/5cc6e2846fb9a032374f58f8
[React 1]: https://juejin.im/post/5cc7d9be6fb9a032050e4c2f
[React _ReactElement]: https://juejin.im/post/5cc81edc6fb9a0321a1508e6
[React _React.Children]: https://juejin.im/post/5cc9c06ee51d453acd5050a7
[ECMAScript 6]: https://link.juejin.im?target=http%3A%2F%2Fes6.ruanyifeng.com%2F
[ruizhengyun_typescript-note]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fruizhengyun%2Ftypescript-note
[npm script]: https://juejin.im/post/5ceb44ac51882564b9341208
[npm script 1]: https://juejin.im/post/5ceb48bbf265da1ba2523c77
[npm script 2]: https://juejin.im/post/5ceb4a2a6fb9a07ea567cd41
[npm script 3]: https://juejin.im/post/5cec935b6fb9a07ee1690857
[npm script 4]: https://juejin.im/post/5cecc71cf265da1bc552437b
[npm script 5]: https://juejin.im/post/5cee32476fb9a07ee4634596
[npm script 6]: https://juejin.im/post/5cf881d36fb9a07ef63fcd19
[npm script 7]: https://juejin.im/post/5cf47f105188253a2b01c981
[npm script 8]: https://juejin.im/post/5cfb289be51d45777a12615e
[npm script 9]: https://juejin.im/post/5cfd0a1451882502f9490fb8
[npm script _ git hooks]: https://juejin.im/post/5cfe0d6d6fb9a07ed657c7dc
[npm script 10]: https://juejin.im/post/5d0202fd6fb9a07ebe74b9ff
[Link 1]: https://juejin.im/post/5d0ae9896fb9a07f0a2de59c