前端知识解构脑图（一张）和工具

深碍√TFBOYSˉ_ 2022-12-27 08:22 53阅读 0赞

一张图足以让你了解web前端工程师需要做哪些工作以及需要掌握哪些技能。

![前端知识结构图][58a7b905590b5296d81521db257ae8fe.png]

下面就是牛人整理的前端知识体系大全，让各位APP设计师想要转行做前端开发的同学们提供一些参考的文案和网址。

**1. 布局框架：**

Bootstrap: [http://getbootstrap.com/][http_getbootstrap.com]

Foundation: [http://foundation.zurb.com/][http_foundation.zurb.com]

Uikit: [http://www.getuikit.com/][http_www.getuikit.com]

Web Components:[http://css-tricks.com/modular-future-web-components//][http_css-tricks.com_modular-future-web-components]

**2. 构建工具及包管理器：**

Grunt: [http://gruntjs.com/][http_gruntjs.com]

Yeoman: [http://yeoman.io/][http_yeoman.io]

Bower: [http://bower.io/][http_bower.io]

NPM: [https://www.npmjs.org/][https_www.npmjs.org]

**3. 代码优化：**

Google Closure Compiler:

CSS Lint: [http://csslint.net/][http_csslint.net]

JSHint: [http://www.jshint.com/][http_www.jshint.com]

JSLint: [http://www.jslint.com/][http_www.jslint.com]

**4. CSS预处理器**

Less: [http://lesscss.org/][http_lesscss.org]

Sass: [http://sass-lang.com/][http_sass-lang.com]

**5. 调试工具：**

Chrome：[https://developers.google.com/chrome-developer-tools/][https_developers.google.com_chrome-developer-tools]

Firebug: [https://getfirebug.com/][https_getfirebug.com]

HTTPWatch: [http://www.httpwatch.com/][http_www.httpwatch.com]

Fiddler: [http://www.telerik.com/fiddler][http_www.telerik.com_fiddler]

IE Developer Toolbar:

Weinre: [http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html][http_people.apache.org_pmuellr_weinre_docs_latest_Home.html]

**6. 文档工具：**

JSDoc: [https://github.com/jsdoc3/jsdoc][https_github.com_jsdoc3_jsdoc]

Jekyll: [http://jekyllrb.com/][http_jekyllrb.com]

**7. IDE/文本编辑器**

WebStorm: [http://www.jetbrains.com/webstorm/][http_www.jetbrains.com_webstorm]

**8. 移动端 手势事件库：**

GMU: [http://gmu.baidu.com/][http_gmu.baidu.com]

Hammer.js:   [http://eightmedia.github.io/hammer.js][http_eightmedia.github.io_hammer.js]

QuoJS: [http://quojs.tapquo.com/][http_quojs.tapquo.com]

Zepto: [http://zeptojs.com/][http_zeptojs.com]

Swipe: [http://swipejs.com/][http_swipejs.com]

jQuery Mobile: [http://jquerymobile.com/][http_jquerymobile.com]

KendoUI:[http://www.telerik.com/kendo-ui][http_www.telerik.com_kendo-ui]

Goratchet:[http://goratchet.com/][http_goratchet.com]

**9. 思维导图**

XMind:[http://www.xmind.net/][http_www.xmind.net]

**10.模块加载器：**

ESL: [https://github.com/ecomfe/esl][https_github.com_ecomfe_esl]

RequireJS: [http://requirejs.org/][http_requirejs.org]

SeaJS:[http://seajs.org/docs/][http_seajs.org_docs]

**11. 项目管理:**

Github: [https://github.com/][https_github.com]

GitLab: [https://about.gitlab.com/][https_about.gitlab.com]

Redmine: [http://www.redmine.org/][http_www.redmine.org]

**1****2. 原型设计:**

Axure RP: [http://www.axure.com/][http_www.axure.com]

**13. 富互联网应用框架**

AngularJs: [http://www.angularjs.org][http_www.angularjs.org]

Backbone: [http://backbonejs.org/][http_backbonejs.org]

AmpersandJS[http://ampersandjs.com//][http_ampersandjs.com]

Knockout: [http://knockoutjs.com/][http_knockoutjs.com]

Underscore: [http://underscorejs.org/][http_underscorejs.org]

**14. 模板引擎**

EJS: [http://www.embeddedjs.com/][http_www.embeddedjs.com]

Handlebars: [http://handlebarsjs.com/][http_handlebarsjs.com]

Jade: [http://jade-lang.com/][http_jade-lang.com]

Velocity: [http://velocity.apache.org/][http_velocity.apache.org]

**15. 测试框架**

Jasmine: [http://pivotal.github.io/jasmine/][http_pivotal.github.io_jasmine]

QUnit: [http://qunitjs.com/][http_qunitjs.com]

mocha: [http://visionmedia.github.io/mocha/][http_visionmedia.github.io_mocha]

**16. 版本控制**

Git: [http://git-scm.com/][http_git-scm.com]

Subversion: [http://subversion.apache.org/][http_subversion.apache.org]

Mercurial(Hg): [http://mercurial.selenic.com/][http_mercurial.selenic.com]

**17. WEB框架/服务器**

Node: [http://nodejs.org/][http_nodejs.org]

Express: [http://expressjs.com/][http_expressjs.com]

Apache: [http://httpd.apache.org/][http_httpd.apache.org]

Nginx: [http://nginx.org/][http_nginx.org]

**18. CommonJS**

Component: [http://component.io/][http_component.io]

**19. WEB安全**

XSS(跨站脚本攻击):

CSRF(跨站点伪造请求攻击):

跨iframe攻击:

Clickjacking安全漏洞:

**20. 代码规范**

Code Guide: [http://alloyteam.github.io/code-guide/][http_alloyteam.github.io_code-guide]

编写可维护的CSS: [http://segmentfault.com/a/1190000000388784/][http_segmentfault.com_a_1190000000388784]

GJS编码规范指南: [http://alloyteam.github.io/JX/doc/specification/google-javascript.xml][http_alloyteam.github.io_JX_doc_specification_google-javascript.xml]

jQueryJS规范: [http://contribute.jquery.org/style-guide/js/][http_contribute.jquery.org_style-guide_js]

**21. HTML模块化**

html5boilerplate: [http://html5boilerplate.com/][http_html5boilerplate.com]

**22. CSS模块化**

Normalize.css: [http://necolas.github.io/normalize.css/][http_necolas.github.io_normalize.css]

LESS:[http://www.lesscss.net/][http_www.lesscss.net]

OOCSS:[http://www.oocss.cc/][http_www.oocss.cc] [http://oocss.org/][http_oocss.org]

CssReset:[http://www.cssreset.com/][http_www.cssreset.com]

**23. HTML5 Canvas**

D3:[http://d3js.org/][http_d3js.org]

KINETIC:[http://kineticjs.com/][http_kineticjs.com]

**第三部分：前端开发知识点：**

HTML&CSS：

对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、HTML5、CSS3、Flexbox

重点在于对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、document flow（文档流）、清除浮动，hasLayout 和 块格式化上下文 (block-formattin contexts) 、reflow&repaint、硬件加速、HTML5（离线 & 存储，多媒体，Web Sockets ,Web Workers，History API2D/3D 绘图）、CSS3、Flexbox、CSS预编译、动画、响应式布局、移动端开发等

JavaScript：

数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs

数据类型、面向对象、数组、DOM、BOM、Function、继承、闭包、内置对象、作用域、跨域、原型链、、JSON、XMLHttpRequest、 RegExp、模块化、内存泄漏、事件机制、异步装载回调、模板引擎、前端MVC、NodeJS、JSON、ajax、框架、算法等

其他：

移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力

[58a7b905590b5296d81521db257ae8fe.png]: /images/20221120/5a96e469d9dc43a3ae883b79f87ecf2f.png
[http_getbootstrap.com]: http://getbootstrap.com/
[http_foundation.zurb.com]: http://foundation.zurb.com/
[http_www.getuikit.com]: http://www.getuikit.com/
[http_css-tricks.com_modular-future-web-components]: http://css-tricks.com/modular-future-web-components//
[http_gruntjs.com]: http://gruntjs.com/
[http_yeoman.io]: http://yeoman.io/
[http_bower.io]: http://bower.io/
[https_www.npmjs.org]: https://www.npmjs.org/
[http_csslint.net]: http://csslint.net/
[http_www.jshint.com]: http://www.jshint.com/
[http_www.jslint.com]: http://www.jslint.com/
[http_lesscss.org]: http://lesscss.org/
[http_sass-lang.com]: http://sass-lang.com/
[https_developers.google.com_chrome-developer-tools]: https://developers.google.com/chrome-developer-tools/
[https_getfirebug.com]: https://getfirebug.com/
[http_www.httpwatch.com]: http://www.httpwatch.com/
[http_www.telerik.com_fiddler]: http://www.telerik.com/fiddler
[http_people.apache.org_pmuellr_weinre_docs_latest_Home.html]: http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
[https_github.com_jsdoc3_jsdoc]: https://github.com/jsdoc3/jsdoc
[http_jekyllrb.com]: http://jekyllrb.com/
[http_www.jetbrains.com_webstorm]: http://www.jetbrains.com/webstorm/
[http_gmu.baidu.com]: http://gmu.baidu.com/
[http_eightmedia.github.io_hammer.js]: http://eightmedia.github.io/hammer.js
[http_quojs.tapquo.com]: http://quojs.tapquo.com/
[http_zeptojs.com]: http://zeptojs.com/
[http_swipejs.com]: http://swipejs.com/
[http_jquerymobile.com]: http://jquerymobile.com/
[http_www.telerik.com_kendo-ui]: http://www.telerik.com/kendo-ui
[http_goratchet.com]: http://goratchet.com/
[http_www.xmind.net]: http://www.xmind.net/
[https_github.com_ecomfe_esl]: https://github.com/ecomfe/esl
[http_requirejs.org]: http://requirejs.org/
[http_seajs.org_docs]: http://seajs.org/docs/
[https_github.com]: https://github.com/
[https_about.gitlab.com]: https://about.gitlab.com/
[http_www.redmine.org]: http://www.redmine.org/
[http_www.axure.com]: http://www.axure.com/
[http_www.angularjs.org]: http://www.angularjs.org/
[http_backbonejs.org]: http://backbonejs.org/
[http_ampersandjs.com]: http://ampersandjs.com//
[http_knockoutjs.com]: http://knockoutjs.com/
[http_underscorejs.org]: http://underscorejs.org/
[http_www.embeddedjs.com]: http://www.embeddedjs.com/
[http_handlebarsjs.com]: http://handlebarsjs.com/
[http_jade-lang.com]: http://jade-lang.com/
[http_velocity.apache.org]: http://velocity.apache.org/
[http_pivotal.github.io_jasmine]: http://pivotal.github.io/jasmine/
[http_qunitjs.com]: http://qunitjs.com/
[http_visionmedia.github.io_mocha]: http://visionmedia.github.io/mocha/
[http_git-scm.com]: http://git-scm.com/
[http_subversion.apache.org]: http://subversion.apache.org/
[http_mercurial.selenic.com]: http://mercurial.selenic.com/
[http_nodejs.org]: http://nodejs.org/
[http_expressjs.com]: http://expressjs.com/
[http_httpd.apache.org]: http://httpd.apache.org/
[http_nginx.org]: http://nginx.org/
[http_component.io]: http://component.io/
[http_alloyteam.github.io_code-guide]: http://alloyteam.github.io/code-guide/
[http_segmentfault.com_a_1190000000388784]: http://segmentfault.com/a/1190000000388784/
[http_alloyteam.github.io_JX_doc_specification_google-javascript.xml]: http://alloyteam.github.io/JX/doc/specification/google-javascript.xml
[http_contribute.jquery.org_style-guide_js]: http://contribute.jquery.org/style-guide/js/
[http_html5boilerplate.com]: http://html5boilerplate.com/
[http_necolas.github.io_normalize.css]: http://necolas.github.io/normalize.css/
[http_www.lesscss.net]: http://www.lesscss.net/
[http_www.oocss.cc]: http://www.oocss.cc/
[http_oocss.org]: http://oocss.org/
[http_www.cssreset.com]: http://www.cssreset.com/
[http_d3js.org]: http://d3js.org/
[http_kineticjs.com]: http://kineticjs.com/