前端开发人员必须了解的七大技能图谱

左手的ㄟ右手 2022-09-23 08:41 157阅读 0赞

网上学习资源参差不齐、分散无系统，给爱学习、努力想提高的你是不是造成很多困扰呢？ 与其他学习平台不同，CSDN知识库不是随机地、一股脑地向您推算大量文章，而是首先梳理各技术领域知识图谱，再以此为基础，收集、筛选出每个技术分支所涉及的各个技术点的解析类、动手实践类文章，内容更系统化、更有针对性。无论您正关注哪个技术领域，这里都可以找到你所需要的。（[如果没找到您所需要的，欢迎向我们反馈，我们不会让您等太久。][Link 1]）

今天我们先从前端开发领域着手，看看前端开发者可以在这里得到什么？

**各核心技术知识图谱大曝光，知识库精华资源强力推荐**

### [HTML5知识库][HTML5] ###

![图片描述][20160713091341224]

[HTML5知识图谱][HTML5 1]

知识图谱由前端技术专家、CSDN博客专家侯志强（[@yisuowushinian][yisuowushinian]）绘制，全栈工程师、架构师、Android和HTML5专家张西涛（[@offbye][offbye]）、HTML5研发工程师谷震平（[@guzhenping][guzhenping]）等多位HTML5领域专家、开发高手担任特邀编辑参与内容审核，已收录各核心技术点下精华文章145篇及其他优秀学习资源（视频课程、实践Demo、图书）。[想为HTML知识库贡献一份力，马上申请成为HTML5知识库特邀编辑>>][HTML_HTML5]

**内容精选：**

*  [HTML5+CSS3实现类似网易云音乐的移动版播放器][HTML5_CSS3]
 *  [逼真的HTML5 3D水波动画 可多视角浏览][HTML5 3D_]
 *  [HTML5 Canvas绘制转盘抽奖][HTML5 Canvas]
 *  [HTML网页之坦克大战游戏][HTML]
 *  [让HTML5来为你定位][HTML5 2]
 *  [炫酷实用的10个HTML5动画应用][10_HTML5]
 *  [HTML5 3D衣服摇摆动画特效][HTML5 3D]
 *  [避坑宝典：如何选择HTML5游戏引擎][HTML5 3]
 *  [Hybrid H5跨平台性思考][Hybrid H5]
 *  [HTML5游戏开发专题视频集][HTML5 4]

### CSS3知识库 ###

![图片描述][20160713091357693]

CSS3知识图谱

知识图谱由前端技术专家、CSDN博客专家侯志强（[@yisuowushinian][yisuowushinian]）绘制，目前各知识节点下的优秀文章已提取完成，进一步的内容筛优正在进行。

如果您正专注于CSS技术研究，平时热爱阅读相关技术文章，也热忠于技术分享，[欢迎您加入CSDN CSS3知识库内容审核特邀编辑团队][HTML_HTML5]，与我们携手共同完成CSS3知识库。

### [JavaScript知识库][JavaScript] ###

![图片描述][20160713091413063]

[JavaScript知识图谱][JavaScript 1]

知识图谱由Java高级工程师王成委（[@jaune161][jaune161]）绘制，腾讯前端高级工程师黄丹华（[@danhuang2012][danhuang2012]），东南大学移动通信国家重点实验室研究生肖果平（[@i10630226][i10630226]），CSDN专栏达人、前端技术开发者李刚（[@ligang2585116][ligang2585116]），前端技术开发者袁康（[@u011043843][u011043843]）等多位领域专家、开发高手，担任特邀编辑参与内容审核，已收录各核心技术点下精华文章1000多篇及其他优秀学习资源（视频课程、实践Demo、图书）。[想为JavaScript知识库贡献一份力，马上申请成为JavaScript知识库特邀编辑>>][HTML_HTML5]

**内容精选：**

*  [全面解析JavaScript中的事件绑定、事件冒泡、事件捕获和事件执行顺序][JavaScript 2]
 *  [利用滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件][window.onscroll_position_fixed_IE6]
 *  [解析Javascript事件冒泡机制][Javascript]
 *  [深入了解JavaScript闭包及其机制][JavaScript 3]
 *  [JavaScript中的event对象之总结][JavaScript_event]
 *  [全面解析Javascript中事件捕获、事件冒泡以及事件委托机制][Javascript 1]

### [jQuery知识库][jQuery] ###

![图片描述][20160713091429016]

[jQuery知识图谱][jQuery 1]

图谱由CSDN博客专家郭晓湉（[@XTQueen\_up][XTQueen_up]）绘制，网易杭州研究院前端开发工程师刘放（[@mevicky][mevicky]）、CSDN博客专家胡旭（[@itmyhome][itmyhome]）、广发证券前端开发工程师李泽扬、CSDN博客专家吴士龙（[@u013047005][u013047005]）等多位领域专家、开发高手，担任特邀编辑参与内容审核，已收录各核心技术点下精华文章300多篇及其他优秀学习资源（视频课程、实践Demo、图书）。[想为jQuery知识库贡献一份力，马上申请成为jQuery知识库特邀编辑>>][HTML_HTML5]

**内容精选：**

*  [jQuery+Ajax实现Select动态定数据][jQuery_Ajax_Select]
 *  [一步一步带你了解jQuery过滤选择器：基本过滤选择器、内容过滤选择器、可见性过滤选择器][jQuery 2]
 *  [使用jQuery.makeArray() 将多种类型转换成JavaScript原生Array][jQuery.makeArray_ _JavaScript_Array]
 *  [jQuery案例分析：Item9动画效果实现过程][jQuery_Item9]
 *  [使用jQuery让事件动起来][jQuery 3]

### [Node.js知识库][Node.js] ###

![图片描述][20160713091447273]

[Node.js知识图谱][Node.js 1]

知识图谱由腾讯前端高级工程师黄丹华（[@danhuang2012][danhuang2012]）绘制，《Nodejs开发加密货币》作者朱志文（[@imfly][imfly]）、杭州聚火瓶技术有限公司技术负责人李智（[@www19940501a][www19940501a]）、深圳塔塔互动网络科技技术合伙人稻帅（[@enson16855][enson16855]）、CSDN专栏作者李锴（[@u010668495][u010668495]）等多位领域专家、开发高手，担任特邀编辑参与内容审核，已收录各核心技术点下精华文章200多篇及其他优秀学习资源（视频课程、实践Demo、图书）。[想为Node.js知识库贡献一份力，马上申请成为Node.js知识库特邀编辑>>][HTML_HTML5]

**内容精选：**

*  [为高负载网络优化Nginx和Node.js][Nginx_Node.js]
 *  [深入理解Node.js异步编程][Node.js 2]
 *  [Node.js错误处理最佳实践][Node.js 3]
 *  [Node.js的Connect框架的代码重写与改进][Node.js_Connect]
 *  [深入理解Node.js的HTTP模块][Node.js_HTTP]
 *  [Node.js应用之静态文件分发器][Node.js 4]

### [AngularJS知识库][AngularJS] ###

![图片描述][20160713091506117]

[AngularJS知识图谱][AngularJS 1]

知识图谱由广发证券前端开发工程师李泽扬绘制，CSDN专栏达人孙华强（[@sunhuaqiang1][sunhuaqiang1])、江荣波（[@Rongbo\_J][Rongbo_J]）等多位领域专家、开发高手，担任特邀编辑参与内容审核，已收录各核心技术点下精华文章300多篇及其他优秀学习资源（视频课程、实践Demo、图书）。[想为AngularJS知识库贡献一份力，马上申请成为AngularJS知识库特邀编辑>>][HTML_HTML5]

**内容精选：**

*  [深入理解AngularJS UI-Router][AngularJS UI-Router]
 *  [跨域解决方案——使用AngularJS和jQuery进行Ajax请求的差异][AngularJS_jQuery_Ajax]
 *  [AngularJS在大型单页面应用中的性能优化][AngularJS 2]
 *  [Grunt搭建AngularJS项目][Grunt_AngularJS]
 *  [AngularJS指令参数详解][AngularJS 3]
 *  [AngularJS中Provider、Service和Factory之间的不同][AngularJS_Provider_Service_Factory]
 *  [Angular自定义指令][Angular]
 *  [AngularJS的启动过程分析][AngularJS 4]
 *  [AngularJS中的Transclude][AngularJS_Transclude]

### [React知识库][React] ###

![图片描述][20160713091524649]

[React知识图谱][React 1]

知识图谱由蚂蚁金服前端工程师林展新绘制，jQuery WeUI作者李宏训（[@lihongxun945][lihongxun945]）、React技术开发者李明明（[@limm33][limm33]）、移动开发者余勃（[@yubo\_725][yubo_725]）等多位领域专家、开发高手，担任特邀编辑参与内容审核，已收录各核心技术点下精华文章300多篇及其他优秀学习资源（视频课程、实践Demo、图书）。[想为React知识库贡献一份力，马上申请成为React知识库特邀编辑>>][HTML_HTML5]

**内容精选：**

*  [深入理解React 核心语法：JSX][React _JSX]
 *  [学习React，所必须了解的组件Key][React_Key]
 *  [React组件生命周期详述][React 2]
 *  [React中ClassSet的用法][React_ClassSet]
 *  [探秘React Flux架构][React Flux]
 *  [轻松入门React Webpack][React Webpack]
 *  [React服务器端渲染][React 3]
 *  [从React Router谈谈路由的那些事][React Router]

[Link 1]: http://geek.csdn.net/news/detail/80706
[HTML5]: http://lib.csdn.net/base/html5
[20160713091341224]: /images/20220720/62961a186bc546cb92a4e609b8b98362.png
[HTML5 1]: http://lib.csdn.net/base/html5/structure
[yisuowushinian]: http://blog.csdn.net/yisuowushinian
[offbye]: http://blog.csdn.net/offbye
[guzhenping]: http://blog.csdn.net/guzhenping
[HTML_HTML5]: http://lib.csdn.net/experts/invite
[HTML5_CSS3]: http://blog.csdn.net/petrelselina/article/details/50709693
[HTML5 3D_]: http://geek.csdn.net/news/detail/62077
[HTML5 Canvas]: http://geek.csdn.net/news/detail/62361
[HTML]: http://blog.csdn.net/qq_21792169/article/details/50962008
[HTML5 2]: http://geek.csdn.net/news/detail/64299
[10_HTML5]: http://geek.csdn.net/news/detail/61336
[HTML5 3D]: http://geek.csdn.net/news/detail/61719
[HTML5 3]: http://geek.csdn.net/news/detail/71492
[Hybrid H5]: http://geek.csdn.net/news/detail/86296
[HTML5 4]: http://geek.csdn.net/news/detail/63194
[20160713091357693]: /images/20220720/374964d92bfe4af19eb4a8bbdceb8f77.png
[JavaScript]: http://lib.csdn.net/base/javascript
[20160713091413063]: /images/20220720/03448c2e4bad405688c998ff881b9752.png
[JavaScript 1]: http://lib.csdn.net/base/javascript/structure
[jaune161]: http://blog.csdn.net/jaune161
[danhuang2012]: http://blog.csdn.net/dan_blog
[i10630226]: http://blog.csdn.net/i10630226
[ligang2585116]: http://blog.csdn.net/ligang2585116
[u011043843]: http://blog.csdn.net/u011043843
[JavaScript 2]: http://lib.csdn.net/article/javascript/6265?knId=505
[window.onscroll_position_fixed_IE6]: http://lib.csdn.net/article/javascript/28924?knId=781
[Javascript]: http://lib.csdn.net/article/javascript/6264?knId=505
[JavaScript 3]: http://lib.csdn.net/article/javascript/12370?knId=495
[JavaScript_event]: http://lib.csdn.net/article/javascript/28911?knId=781
[Javascript 1]: http://lib.csdn.net/article/javascript/24058?knId=505
[jQuery]: http://lib.csdn.net/base/jquery
[20160713091429016]: /images/20220720/b7a78b0a2aaa478194129021acdd4393.png
[jQuery 1]: http://lib.csdn.net/base/jquery/structure
[XTQueen_up]: http://blog.csdn.net/xtqueen
[mevicky]: http://blog.csdn.net/mevicky
[itmyhome]: http://blog.csdn.net/itmyhome1990
[u013047005]: http://blog.csdn.net/wsl211511
[jQuery_Ajax_Select]: http://lib.csdn.net/article/jquery/26631?knId=647
[jQuery 2]: http://lib.csdn.net/article/jquery/7658?knId=664
[jQuery.makeArray_ _JavaScript_Array]: http://lib.csdn.net/article/jquery/26639?knId=654
[jQuery_Item9]: http://lib.csdn.net/article/jquery/12714?knId=669
[jQuery 3]: http://lib.csdn.net/article/jquery/12700?knId=645
[Node.js]: http://lib.csdn.net/base/nodejs
[20160713091447273]: /images/20220720/6ec6645689f3470e8bb1e5d98d2756a7.png
[Node.js 1]: http://lib.csdn.net/base/nodejs/structure
[imfly]: http://blog.csdn.net/imfly
[www19940501a]: http://blog.csdn.net/edagarli
[enson16855]: http://blog.csdn.net/enson16855
[u010668495]: http://blog.csdn.net/u010668495
[Nginx_Node.js]: http://lib.csdn.net/article/nodejs/12123?knId=798
[Node.js 2]: http://lib.csdn.net/article/nodejs/12128?knId=798
[Node.js 3]: http://lib.csdn.net/article/nodejs/12153?knId=802
[Node.js_Connect]: http://lib.csdn.net/article/nodejs/12145?knId=799
[Node.js_HTTP]: http://lib.csdn.net/article/nodejs/12126?knId=798
[Node.js 4]: http://blog.csdn.net/yanghua_kobe/article/details/6877518
[AngularJS]: http://lib.csdn.net/base/angularjs
[20160713091506117]: /images/20220720/2913441e920d46a5969a41c9e818dc29.png
[AngularJS 1]: http://geek.csdn.net/news/detail/[http://lib.csdn.net/base/angularjs]%28http://lib.csdn.net/base/angularjs/structure%29
[sunhuaqiang1]: http://blog.csdn.net/sunhuaqiang1
[Rongbo_J]: http://blog.csdn.net/Rongbo_J
[AngularJS UI-Router]: http://blog.csdn.net/u011127925/article/details/47292887
[AngularJS_jQuery_Ajax]: http://blog.csdn.net/u011366705/article/details/49533539
[AngularJS 2]: http://blog.csdn.net/qianqianyixiao1/article/details/50675090
[Grunt_AngularJS]: http://blog.csdn.net/ch717828/article/details/50339087
[AngularJS 3]: http://blog.csdn.net/kongjiea/article/details/49840035
[AngularJS_Provider_Service_Factory]: http://blog.csdn.net/ltyisangel/article/details/50162451
[Angular]: http://blog.csdn.net/GAMEloft9/article/details/50848016
[AngularJS 4]: http://blog.csdn.net/yijinyiyjy/article/details/46771559
[AngularJS_Transclude]: http://blog.csdn.net/u013510614/article/details/50703781
[React]: http://lib.csdn.net/base/react
[20160713091524649]: /images/20220720/ecc97b79e3e54ecc9627d65a165234b4.png
[React 1]: http://lib.csdn.net/base/react/structure
[lihongxun945]: http://blog.csdn.net/lihongxun945
[limm33]: http://blog.csdn.net/limm33
[yubo_725]: http://blog.csdn.net/yubo_725
[React _JSX]: http://lib.csdn.net/article/react/12863?knId=673
[React_Key]: http://lib.csdn.net/article/react/10828?knId=680
[React 2]: http://lib.csdn.net/article/react/13331?knId=681
[React_ClassSet]: http://lib.csdn.net/article/react/12201?knId=685
[React Flux]: http://lib.csdn.net/article/react/17871?knId=689
[React Webpack]: http://lib.csdn.net/article/react/17865?knId=693
[React 3]: http://lib.csdn.net/article/react/12196?knId=682
[React Router]: http://lib.csdn.net/article/react/17851?knId=688