牛人整理的前端知识体系大全与前端思维导图
牛人整理的前端知识体系大全与前端思维导图
一张图足以让你了解web前端工程师需要做哪些工作以及需要掌握哪些技能。
下面就是牛人整理的前端知识体系大全，让各位APP设计师想要转行做前端开发的同学们提供一些参考的文案和网址。
1. 布局框架：
Bootstrap:
Foundation:
Uikit:
Web Components:
2. 构建工具及包管理器：
Grunt:
Yeoman:
Bower:
NPM:
3. 代码优化：
Google Closure Compiler:
CSS Lint:
JSHint:
JSLint:
4. CSS预处理器
Less:
Sass:
5. 调试工具：
Chrome：
Firebug:
HTTPWatch:
Fiddler:
IE Developer Toolbar:
Weinre:
6. 文档工具：
JSDoc:
Jekyll:
7. IDE/文本编辑器
WebStorm:
8. 移动端 手势事件库：
GMU:
Hammer.js:
QuoJS:
Zepto:
Swipe:
jQuery Mobile:
KendoUI:
Goratchet:
9. 思维导图
XMind:
10.模块加载器：
ESL:
RequireJS:
SeaJS:
11. 项目管理:
Github:
GitLab:
Redmine:
12. 原型设计:
Axure RP:
13. 富互联网应用框架
AngularJs:
Backbone:
AmpersandJS
Knockout:
Underscore:
14. 模板引擎
EJS:
Handlebars:
Jade:
Velocity:
15. 测试框架
Jasmine:
QUnit:
mocha:
16. 版本控制
Git:
Subversion:
Mercurial(Hg):
17. WEB框架/服务器
Node:
Express:
Apache:
Nginx:
- CommonJS
Component:
19. WEB安全
XSS(跨站脚本攻击):
CSRF(跨站点伪造请求攻击):
跨iframe攻击:
Clickjacking安全漏洞:
20. 代码规范
Code Guide:
编写可维护的CSS:
GJS编码规范指南:
jQueryJS规范:
21. HTML模块化
html5boilerplate:
22. CSS模块化
Normalize.css:
LESS:
OOCSS:
CssReset:
23. HTML5 Canvas
D3:
KINETIC:
第三部分：前端开发知识点：
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、架构、职业生涯、快速学习能力
原文地址：