├── .DS_Store ├── README.md └── images ├── .DS_Store ├── qrcode.jpg ├── skillMap.png └── skillMap_old.png /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hourong88/Frontend-Datlas/0339180de1ed29b4e1fa712ac5308cff7a22c1a1/.DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 🔥🔥前端技能图谱2024（更新中） 2 | === 3 | 以下是工作中对前端技术图谱的梳理，定期进行优化和迭代。 4 | 5 | 我信奉长期主义，坚持不懈的对前端进行广度和深度的探索和精进。 6 | 7 | 所以就有了这个脑图，通过结构梳理和定期输出，倒逼输入。 8 | 9 | 非常希望大家和我一起讨论，如果有关于相关技能有趣的文章和观点，欢迎在issue中留言。 10 | 11 | 如果感兴趣，可以点个star关注一下这个仓库的更新。 12 | 13 | 另外，下面的图我整理了很久，传上来纠结要不要全图加水印，加了感觉看着很别扭，就没加。希望大家引用的时候，署名来源就可以啦！感谢！ 14 | 15 | ## 2024更新 16 | 17 | 2023年更新了一版，没有同步到这里，详情可以点击：![前端技能图谱2023](https://zhuanlan.zhihu.com/p/367036716) 18 | 19 | 我从业十几年了，从前端小白到架构，现在在做AI+软硬件相关工作。差不多每个阶段，都会努力向上，到了瓶颈就换，比如从网络工程师，到推广，再到网页设计，到前端，到架构，再到AI+。 20 | 21 | 我自认为我不属于高精尖，每个领域做到80%就可以超过很多人了。**足够的宽度本身就成为了一种深度。** 22 | 23 | 回头看，我认为**重要的方法论**有： 24 | 25 | 1. **系统**。这个技能图谱就是系统化学习的典范，从我入行就在梳理，一直到现在，每一年补全我的行业知识盲区，打磨技能，我亦无他，惟手熟尔。 26 | 2. **组件化和模块化**。高质量的组件最终拼出来高质量的软件，不论是哪种框架，都在往更灵活组合方向发展，组件容易复用和维护。采用模块化设计，将代码分割成小而独立的模块，提升代码的可维护性。 27 | 3. **交互和通信**。研发中没有比前端更重交互了，前端直面用户，要有用户思维，需要重视用户体验。通信很重要，AI芯片的瓶颈也在通信，前端研发不复杂，复杂的是业务中和其他接口的通信和调试，做过最复杂的通信，6层嵌套，一周就解决那一个bug，希望大家好好学习网络通信。 28 | 29 | 总的来说，只要你热爱编程，能静下心能专注其中，系统学习达到娴熟，灵活变通，目前我还没见到这样的人有年龄危机的（可能难升职加薪，毕竟大环境在这，但也不是你的问题）养家糊口是没有问题的。 30 | 31 | 我只是单纯喜欢这件事，对钱和升职没有执念，做头部太累了。人是要生存的，若写代码能够养活自己，而恰好又是自己的兴趣所在，这就是一种比较理想的生存状态了。 32 | 33 | 34 | 35 | ### 2024年更新内容如下： 36 | 37 | - css部分：增加对CSS预处理器（如SASS、LESS）的介绍 38 | - css部分：完善flex 和 grid 39 | - 完善TS笔记 40 | - 性能优化 41 | - 添加SSR 42 | - 完善算法部分内容 43 | - 架构 44 | - 移动端与跨平台开发 45 | 46 | ## 瞄一瞄这 :point_down: 47 | 48 | 前端技能图谱，是对大前端知识框架的梳理 49 | 50 | ![前端技能图谱2020](https://github.com/hourong88/Frontend-Datlas/blob/master/images/skillMap.png) 51 | 52 | ## 专栏 :heart: 53 | 博客园：我的大部分技术文章都发在这[优前程](https://www.cnblogs.com/youqiancheng/)之前尝试过掘金，感觉用的不方便就弃更了，以后会专注博客园 54 | 55 | 公众号：优前程（优秀的前端工程师，优前程，有前程），扫描下方二维码关注，会分享一些思考 56 | 57 | ![公众号二维码](https://github.com/hourong88/Frontend-Datlas/blob/master/images/qrcode.jpg) 58 | 59 | 另外上面的思维导图，也有不全面的，大家可以在此基础上贡献，需要xmind源文件的，可以在公众号私信我，我都会看的，只是可能忙的时候不能及时回应。 60 | 61 | 62 | ## 内容 :star: 63 | ### HTML/CSS 64 | 1. [PC站与H5移动站最佳适配方案](https://www.cnblogs.com/youqiancheng/p/7193393.html) 65 | 2. [公用flex类](https://www.cnblogs.com/youqiancheng/p/11752686.html) 66 | 3. [常用css相关笔记](https://www.cnblogs.com/youqiancheng/p/10818873.html) 67 | 4. [前端CSS的基本素养](https://www.cnblogs.com/youqiancheng/p/7649471.html) 68 | 5. [JavaScript DOM编程艺术 笔记（一）](https://www.cnblogs.com/youqiancheng/p/10775063.html) 69 | 6. [JavaScript DOM编程艺术 笔记（二）语句操作](https://www.cnblogs.com/youqiancheng/p/10783910.html) 70 | 7. [JavaScript DOM编程艺术 笔记（三）函数](https://www.cnblogs.com/youqiancheng/p/10784223.html) 71 | 8. [JavaScript DOM编程艺术 笔记（四)](https://www.cnblogs.com/youqiancheng/p/10784755.html) 72 | 73 | ### JavaScript 74 | 1. [判断空对象，空数组（可用于容错处理）](https://www.cnblogs.com/youqiancheng/p/14657146.html) 75 | 2. [javascript jquery console调试方法说明](https://www.cnblogs.com/youqiancheng/p/10190606.html) 76 | 3. [搞懂闭包JavaScript的GC机制](https://www.cnblogs.com/youqiancheng/p/14668158.html) 77 | 4. [js执行过程之上下文对象(Context)](https://www.cnblogs.com/youqiancheng/p/14414981.html) 78 | 5. [搞懂Event Loop](https://www.cnblogs.com/youqiancheng/p/14675856.html) 79 | 6. [宏任务和微任务，同步异步，promis，await执行顺序](https://www.cnblogs.com/youqiancheng/p/14676047.html) 80 | 7. [ES6解构过程添加一个默认值和赋值一个新的值](https://www.cnblogs.com/youqiancheng/p/14661783.html) 81 | 8. [ES6变量声明方法 & 解构赋值](https://www.cnblogs.com/youqiancheng/p/10761901.html) 82 | 9. [ES6函数](https://www.cnblogs.com/youqiancheng/p/10762488.html) 83 | 10. [js 加密、解密算法类库](https://www.cnblogs.com/youqiancheng/p/14659206.html) 84 | 11. [moment日期处理类库](https://www.cnblogs.com/youqiancheng/p/14658640.html) 85 | 12. [js对时间戳的处理 获取时间，昨天，今天，明天，时间不同格式](https://www.cnblogs.com/youqiancheng/p/12073339.html) 86 | 13. [当天时间小案例--时间戳，获取年月日星期时分秒](https://www.cnblogs.com/youqiancheng/p/12073225.html) 87 | 14. [selectTree 改造](https://www.cnblogs.com/youqiancheng/p/11751756.html) 88 | 15. [用JS获取地址栏参数的方法（超级简单)](https://www.cnblogs.com/youqiancheng/p/10102579.html) 89 | 16. [eazyui 或bootstrap table表格里插入图片，点击查看大图](https://www.cnblogs.com/youqiancheng/p/7929213.html) 90 | 17. [JavaScript用策略模式消除if else 和 switch](https://www.cnblogs.com/youqiancheng/p/14668306.html) 91 | 92 | ### 网络原理 93 | 1. [Http 协议](https://www.cnblogs.com/youqiancheng/p/12098150.html) 94 | 2. [比较 GET 与 POST](https://www.cnblogs.com/youqiancheng/p/10768554.html) 95 | 3. [一文读懂计算机底层网络原理，包括TCP、UDP、header，什么是包、帧、段等关键问题](https://www.cnblogs.com/youqiancheng/p/14668281.html) 96 | 97 | ### 前端框架 98 | #### React 99 | 1. [关于react提问以及解答](https://www.cnblogs.com/youqiancheng/p/14662142.html) 100 | 2. [React中构造函数constractor，为什么要用super（props）](https://www.cnblogs.com/youqiancheng/p/11948880.html) 101 | 3. [深入理解React组件传值（组合和继承）](https://www.cnblogs.com/youqiancheng/p/11763846.html) 102 | 4. [初学者React入门概览](https://juejin.cn/post/6855517674068574222/) 103 | 5. [React生命周期函数（迭代合并：react 16.3）](https://www.cnblogs.com/youqiancheng/p/12092628.html) 104 | 6. [react，ES6的括号问题](https://www.cnblogs.com/youqiancheng/p/12155423.html) 105 | 7. [Dva框架从初识到上手](https://www.cnblogs.com/youqiancheng/p/11664496.html) 106 | 8. [React Hooks](https://www.cnblogs.com/youqiancheng/p/14344974.html) 107 | 9. [前后端分离，前端发送过来的请求是服务器的ip还是用户的ip](https://www.cnblogs.com/youqiancheng/p/14662152.html) 108 | 109 | #### Router 110 | 1. [ReactRouter中HashRouter和BrowserRouter的区别](https://www.cnblogs.com/youqiancheng/p/14662124.html) 111 | 112 | #### UI库 113 | 114 | 1. [antd从v3到v4](https://ant.design/docs/react/migration-v4-cn) 115 | 2. [antd国际化](https://ant.design/docs/react/i18n-cn) 116 | 3. [ant design TreeSelect支持搜索，切换value和title属性](https://www.cnblogs.com/youqiancheng/p/12167117.html) 117 | 4. [form表单调接口校验 比如后台验证用户名是否存在](https://www.cnblogs.com/youqiancheng/p/12156840.html) 118 | 5. [React结合AntD的upload组件写头像上传](https://www.cnblogs.com/youqiancheng/p/12092971.html) 119 | 120 | ##### 图表库 121 | 1. [echarts各个配置项详细说明总结](https://www.cnblogs.com/youqiancheng/p/12096584.html) 122 | 2. [React中用EChart写面积图](https://www.cnblogs.com/youqiancheng/p/12092753.html) 123 | 124 | #### Bootstrap 125 | 1. [Bootstrap table表格组件神器](https://www.cnblogs.com/youqiancheng/p/10813470.html) 126 | ### 前端工程化 127 | 1. [前端工程化总结](https://www.cnblogs.com/youqiancheng/p/14667767.html) 128 | 2. [前端业务](https://www.cnblogs.com/youqiancheng/p/14666633.html) 129 | #### 规范化 130 | 1. [代码整洁之道](https://www.cnblogs.com/youqiancheng/p/14661586.html) 131 | 2. [前端JavaScript编码规范 和react编码规范](https://www.cnblogs.com/youqiancheng/p/12167140.html) 132 | 3. [前端工作规范](https://www.cnblogs.com/youqiancheng/p/12083465.html) 133 | …… 134 | #### 自动化 135 | 1. [云效创建项目应用以及流水线的说明文档](https://www.cnblogs.com/youqiancheng/p/12083499.html) 136 | 2. [git stash详解](https://www.cnblogs.com/youqiancheng/p/12010185.html) 137 | 3. [【本博客所有关于git文章迭代汇总】git操作(暂存，回退，绑定远程等)，看这一篇就够了](https://www.cnblogs.com/youqiancheng/p/11753481.html) 138 | 4. [2021入门Webpack，看这篇就够了：Webpack.config.js 解析](https://www.cnblogs.com/youqiancheng/p/14473395.html) 139 | 5. [前端脚手架CLI生成模版命令工具（包括，npm包的发布，脚手架的搭建，注意事项，优化等）](https://www.cnblogs.com/youqiancheng/p/14344544.html) 140 | 141 | #### 组件化 142 | 1. [前端工程化&&自动化部署&&model抽离](https://www.cnblogs.com/youqiancheng/p/14662110.html) 143 | 144 | #### 模块化 145 | 1. [架构-微服务-中台](https://www.cnblogs.com/youqiancheng/p/14662078.html) 146 | 2. [前端架构设计：层次设计](https://www.cnblogs.com/youqiancheng/p/14473404.html) 147 | 148 | ### 计算机原理探究 149 | 1. [计算机科学模型-思维导图](https://www.cnblogs.com/youqiancheng/p/14658602.html) 150 | 2. [了解计算机操作系统](https://www.cnblogs.com/youqiancheng/p/14685441.html) 151 | 3. [浏览器渲染原理，以及重绘和回流（重排），基于他们的性能优化](https://www.cnblogs.com/youqiancheng/p/14676718.html) 152 | 153 | ### 学习与面试 154 | 1. [前端学习 永不止步](https://www.cnblogs.com/youqiancheng/p/10794451.html) 155 | 2. [前端参考书籍](https://www.cnblogs.com/youqiancheng/p/12083419.html) 156 | 3. [从零开始学习web前端技术路线图](https://www.cnblogs.com/youqiancheng/p/14472649.html) 157 | 4. [推荐职业规划书籍《你的降落伞是什么颜色》](https://www.cnblogs.com/youqiancheng/p/14667030.html) 158 | 5. [面试相关：简历和面试过程](https://www.cnblogs.com/youqiancheng/p/14666855.html) 159 | 6. [金三银四跳槽旺季，如何写好简历？](https://www.cnblogs.com/youqiancheng/p/14666813.html) 160 | …… 161 | ### 工具使用 162 | 1. [Chrome - JavaScript调试技巧总结（浏览器调试JS）](https://www.cnblogs.com/youqiancheng/p/14414518.html) 163 | 2. [精选！15个必备的 VSCode 插件（前端类）](https://www.cnblogs.com/youqiancheng/p/10794575.htm) 164 | 3. [Axure 原型图](https://www.cnblogs.com/youqiancheng/p/10515776.html) 165 | 4. [Windows CMD命令大全](https://www.cnblogs.com/youqiancheng/p/10477493.html) 166 | 5. [同步和异步详解](https://www.cnblogs.com/youqiancheng/p/11751652.html) 167 | 6. [macbook通过虚拟机连接远程linux](https://www.cnblogs.com/youqiancheng/p/14344775.html) 168 | 7. [苹果电脑开不了机，mac时间机器备份加速，以及识别不到u盘的方法](https://www.cnblogs.com/youqiancheng/p/14659370.html) 169 | 170 | …… 171 | ### Seo 172 | …… 173 | 174 | ### 算法 175 | …… 176 | -------------------------------------------------------------------------------- /images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hourong88/Frontend-Datlas/0339180de1ed29b4e1fa712ac5308cff7a22c1a1/images/.DS_Store -------------------------------------------------------------------------------- /images/qrcode.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hourong88/Frontend-Datlas/0339180de1ed29b4e1fa712ac5308cff7a22c1a1/images/qrcode.jpg -------------------------------------------------------------------------------- /images/skillMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hourong88/Frontend-Datlas/0339180de1ed29b4e1fa712ac5308cff7a22c1a1/images/skillMap.png -------------------------------------------------------------------------------- /images/skillMap_old.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hourong88/Frontend-Datlas/0339180de1ed29b4e1fa712ac5308cff7a22c1a1/images/skillMap_old.png --------------------------------------------------------------------------------