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

短命女 2022-07-21 11:21 178阅读 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]

--------------------

更多内容请关注[CSDN知识库][CSDN]。该产品汇集了领域专家们精心绘制的各重点技术领域的知识图谱，及由特邀编辑（领域专家）从海量数据中层层筛选出的精华内容和资源（学习视频、实践Demo、图书）。知识图谱可以帮助开发者全局把控该技术领域，而精选内容更能让开发者从技术细节加深了解该领域的每个核心技术点。扫描以下二维码，获取更多CSDN知识库内容。

转自：http://geek.csdn.net/news/detail/88239

[Link 1]: http://geek.csdn.net/news/detail/80706
[HTML5]: http://lib.csdn.net/base/html5
[20160713091341224]: /images/20220720/1ea91d1a1bb94f768322b796792a11c3.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/b98c27ee090a432cb3e17fbad49399c7.png
[JavaScript]: http://lib.csdn.net/base/javascript
[20160713091413063]: /images/20220720/2e64d9e813f240d48cc20fab2758d2c8.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/347a62f4bf47480c8d115e62aa312507.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/945e97419edb41749476310a83e4a252.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/237e9bf72ac444639f7492dd29dc24a7.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/6120331f49814f628e8d44df02ef2332.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
[CSDN]: http://lib.csdn.net/