8 years of front-end development knowledge precipitation (do not know how many words, keep writing it...)

BOM485480 2021-02-22 23:20:04
years front-end end development knowledge

Let's start with a few words

2011 I started working in front end in , From a page cut to a qualified front-end Engineer , Along the way , I know there's a lot to learn , And I learned a lot about it , At the same time, I lost a lot ( Trapped in learning and losing , The state of learning while losing ). Especially this 3 year , The front-end field can be described as a hundred companies in full bloom , Blooming all around .

It can be said that this is the best time and the worst time . Say it's good , This is because the front end is on the road of chaos and normalization , The front-end development has gradually received enough attention and respect from various companies, at least in the development of projects or products ( For developers ); Say it's not good , It's because of the clutter ( Language 、 frame 、 Component packages, etc ), Many colleagues are more or less unable to learn and have a confused state . Personal view , Better change than no change , Because of the chaos ( miscellaneous ) And established the front-end position in the project or product development . As for how to learn and what to learn , That's a question of personal learning methods or choices ( It's not the prosperity of the front-end community that causes this problem , It can only be said that the prosperity of the front-end community has expanded such problems , I hope these two problems can be clarified ). Insert picture description here
We have to admit two things :

Domain knowledge is constantly updated ;

Everyone's qualifications are different ( In addition to talent, there are also late efforts )( You can say I don't work hard, but you can't say I'm dumber than the one next door );

When you know the truth , We might as well learn the thought of strengthening the foundation and cultivating the yuan in traditional Chinese medicine . What does that mean ? It's very simple , Is to learn and practice the existing 、 Stable and necessary knowledge ( A solid foundation ), And for the new 、 Those that are not popular and do not need to learn can choose to learn , If you think you're talented, it's another matter .

For a long time , My ambition is much bigger than my efforts ,php、python、go、 I want to learn scientific computing and so on , As a result, you must know , I just didn't learn anything , Just started, because business scenarios are rarely used ( It just doesn't work ) I had to leave , And then fall into a period of confusion . Also some time ago , Decided to resist the temptation , Slowly precipitation from the foundation , Slow as it is , But I am very solid and happy .

It doesn't matter whether you agree or not ( It's just that our epistemology or methodology is different ), It's important to find what's right for you , What you think? ?

The next page is ( Atlas and description ) As time goes on, the river will flow longer and longer , I hope it doesn't put pressure on you to read , I also hope you can have this psychological preparation ( Maybe you're looking forward to getting richer ), The good thing is at least I'm 1-2 Days will fill in ( Update or expand the description ) These little knowledge points of the atlas . The essence of this paper is to do is to list and schedule the front-end knowledge ( Give a link to the article details ), Hope to help you who are learning front-end or already in front-end position .

explain Some of the contents of the article are similar to those of predecessors or latecomers 、 Please forgive me for the similarities and differences . in addition , Please point out the omissions or mistakes in the article , You and I grew up together ( Give someone a rose ).

Point of view Learn from time to time , joy . Learn and apply at a certain time ( practice ) it , It's also a happy thing .( It's a pleasure to use it in practice at a certain time , Think about it , Are the things you have learned very happy when you use them !!!???)

Recent updates

Last night, , Writing 【Hooks What did they say 】(react 16.8.6 The source code parsing , I want to talk about React Hooks 了 ) In the process of , Found this version of the application Typescript, And for Typescript The forgotten 7788 (4 I'm just getting familiar with it ), So in the next time ( I don't know for a few days ), Will list and update Typescript Learning notes , And then update 【react 16.8.6 The source code parsing 】.

ask : Predecessors and many sites ( Include Typescript Official website ) There are Typescript Course , Why do you make wheels ? It's very powerful ? It's still the loop flow ?

My way of thinking : What others say ( The predecessors and many sites mentioned above ) It's always someone else's , Hand over and record what you think is important , It's that simple .

I've been in the front end for years , This paper summarizes a set of intensive video and learning route for front-end learning , If there are partners interested in front-end development , Whether you want to change careers , Or college students , And those who want to improve their abilities at work web Front end party , Welcome to join my front-end development exchange group :603985993 I hope you can communicate sincerely !, Synchronization with enterprise requirements . Friends are learning to communicate in it , Every day, Daniel will regularly explain the front-end technology ! You can also follow my WeChat public account :【 Front end international students 】 Update the latest technical articles every day .


The overview -> Want to do -> What is being done -> Already completed -> Back to the Overview
 Insert picture description here
Front end score
 Insert picture description here
 Insert picture description here
WeChat official account
 Insert picture description here
The front frame
 Insert picture description here

undetermined …

 Insert picture description here
Source code analysis (react 16.8.6)

React Source code analysis of two nagging

React Overview of source code analysis

React Source code analysis ReactElement

React Source code analysis React.Children



 Insert picture description here

About ES6 Just let Mr. Ruan Yifeng go first ECMAScript 6 introduction . I'll sort out one later gitbook Little book , It's not that I will add something more powerful on the basis of teacher Ruan Yifeng , It's just doing some subtraction , Because it takes a long time to read the whole document , Small books only take common ones api( Of course, I'll point out the source ), This is my personal preference , Selective learning and writing ( What you are reading also depends on your preference ). If you want to see the details, you still need to see teacher Ruan Yifeng's ECMAScript 6 introduction .


Links to related materials

Typescript Official website

Typescript Chinese net


The way of interview
 Insert picture description here
 Insert picture description here
HTTP guide

Design patterns
 Insert picture description here
 Insert picture description here
npm scripts

npm script Why choose her

npm script Fall in love at first sight

npm script Running multiple commands

npm script Use of parameters

npm script Use of hook

npm script Use of environment variables

npm script Implementation of cross end compatibility

npm script The implementation of command completion

npm script File monitoring and automatic refresh

npm script Application of complex scenes

npm script Apply to git hooks in

npm script Practice

performance optimization

Front end security
 Insert picture description here
automated testing
 Insert picture description here
Algorithm and data structure
 Insert picture description here

Someone will ask. , Don't you also put yourself in the pit ? You are still very ambitious ?

First , I don't want to deny that . Make the front end , It's the drive choice , So it might be better than some front end ( That's what I got for my job , It's almost OK at work ) More enthusiasm , So I will keep learning ( Selective learning ) down . as for , Ambitious , It will take more time to work hard to fill the gap .

As for what to do if there is no enthusiasm in the future ?

I like traveling and reading . Travel takes money and time , A little extravagant . And reading takes time , This can be arranged reasonably . What I want to say is that I will do the front end and write articles ( Like this way ) Write it as a novel , So I'll stick to it . How to interpret and develop the future , It's better to do well and grasp the present first .


  1. How to insert an element into the specified index of an array?
  2. 配置证书使得ngnix能够发布https的可信网站
  3. HTTP接口调试利器!4.8万Star的HTTP命令行客户端!
  4. 前端url链接带的参数加密
  5. HTTP接口调试利器!4.8万Star的HTTP命令行客户端!
  6. Is react server components OK?
  7. Summary of front end basic knowledge (4) - webpack
  8. Sass nesting rule
  9. 前端三大框架:数据绑定与数据流
  10. axios 源码阅读(一)--探究基础能力的实现
  11. Javascript中的事件冒泡与捕获
  12. #研发解决方案#易车前端监控系统
  13. 【JS】877- 35 个 JavaScript 的奇葩知识,长见识了!
  14. #研发解决方案#易车前端监控系统
  15. 高性能 Nginx HTTPS 调优 - 如何为 HTTPS 提速 30%
  16. Front end, school recruitment, Taobao, guide
  17. Front end, social recruitment, Taobao, guide
  18. javascript 十大经典排序
  19. Draw a mellow cactus with the boneless technique of Meticulous Brushwork
  20. HTTP 1.x 學習筆記 —— Web 效能權威指南
  21. Vue3元件(九)Vue + element-Plus + json = 動態渲染的表單控制元件
  22. 我的 HTTP/1.1 好慢啊!
  23. Vue為何採用非同步渲染
  24. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for
  25. Front end monastery
  26. How to quickly understand a new front end project?
  27. webpack4.X核心工具库之tapable实例对象Hook
  28. webpack4.X核心工具库之tapable实例对象Hook
  29. C++使用libcurl进行http通讯
  30. Can be directly used in HTML special character table Unicode character set
  31. C++使用libcurl进行http通讯
  32. Java traverses list < string > and takes out the string elements in it, and splices them with ","
  33. Self taught web front end more than two months, talk about my harvest and progress, learning summary
  34. vue 中使用 css 变量
  35. 深入了解React中state和props的更新
  36. 百度分享不支持https的解决方案
  37. [practical] ABAP mail sending (HTML + attachment)
  38. [practical] ABAP mail sending (HTML + attachment)
  39. Teach you how to select products with less profit and competition in Amazon Product Development (1)
  40. 【微前端】微前端最终章-qiankun指南以及微前端整体探索
  41. 【微前端】微前端最终章-qiankun指南以及微前端整体探索
  42. Vue-Cli 创建vue3项目
  43. Go in the front of the progress of u boot v7.0 U disk boot disk production tools
  44. 使用NTLM的windows身份验证的nginx反向代理
  45. Rust教程:针对JavaScript开发人员的Rust简介
  46. 使用 Serverless Framework 部署个人博客到腾讯云
  47. #研發解決方案#易車前端監控系統
  48. Vue changes localhost to IP address and cannot access
  49. JavaScript进阶学习
  50. HTML5 from entry to proficient, realize annual salary 10W +, zero basic students must see
  51. Vue:vuex状态数据持久化插件vuex-persistedstate
  52. Vue source code analysis - start
  53. Vue -- the child component calls the method of the parent component and passes parameters --- props
  54. React-Native 获取设备当前网络状态 NetInfo
  55. 高性能 Nginx HTTPS 调优 - 如何为 HTTPS 提速 30%
  56. How to learn HTML5? How can Xiaobai start HTML5 quickly?
  57. HTML + CSS detailed tutorial, this article is enough, but also quickly save
  58. JavaScript高级:JavaScript面向对象,JavaScript内置对象,JavaScript BOM,JavaScript封装
  59. Why Vue uses asynchronous rendering
  60. JavaScript高级:JavaScript面向对象,JavaScript内置对象,JavaScript BOM,JavaScript封装