Web前端开发知识思维导图及汇总

小葫芦姥姥 發表於 2019-8-2 15:25:00

一张图足以让你了解web前端工程师需要做哪些工作以及需要掌握哪些技能。
 
<img class="alignnone size-full wp-image-14623" src="http://www.25xt.com/wp-content/uploads/2017/03/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%BB%93%E6%9E%84%E5%9B%BE.jpg" alt="前端知识结构图" width="800" height="725">
 
 
 
下面就是牛人整理的前端知识体系大全，让各位APP设计师想要转行做前端开发的同学们提供一些参考的文案和网址。
 
1. 布局框架：
Bootstrap: http://getbootstrap.com/
Foundation: http://foundation.zurb.com/ 
Uikit: http://www.getuikit.com/ 
Web Components:http://css-tricks.com/modular-future-web-components//
2. 构建工具及包管理器：
Grunt: http://gruntjs.com/ 
Yeoman: http://yeoman.io/
Bower: http://bower.io/
NPM: https://www.npmjs.org/
 
3. 代码优化：
Google Closure Compiler:
CSS Lint: http://csslint.net/
JSHint: http://www.jshint.com/
JSLint: http://www.jslint.com/
 
4. CSS预处理器
Less: http://lesscss.org/
Sass: http://sass-lang.com/
 
5. 调试工具：
Chrome：https://developers.google.com/chrome-developer-tools/
Firebug: https://getfirebug.com/
HTTPWatch: http://www.httpwatch.com/
Fiddler: http://www.telerik.com/fiddler
IE Developer Toolbar:
Weinre: http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
 
6. 文档工具：
JSDoc: https://github.com/jsdoc3/jsdoc
Jekyll: http://jekyllrb.com/
 
7. IDE/文本编辑器 
WebStorm: http://www.jetbrains.com/webstorm/
 
8. 移动端手势事件库：
 
GMU: http://gmu.baidu.com/
Hammer.js:   http://eightmedia.github.io/hammer.js
QuoJS: http://quojs.tapquo.com/
Zepto: http://zeptojs.com/
Swipe: http://swipejs.com/
jQuery Mobile: http://jquerymobile.com/
KendoUI:http://www.telerik.com/kendo-ui
Goratchet:http://goratchet.com/
  
 
9. 思维导图
XMind:http://www.xmind.net/
  
10.模块加载器：
 
ESL: https://github.com/ecomfe/esl
RequireJS: http://requirejs.org/
SeaJS:http://seajs.org/docs/
 
11. 项目管理:
 
Github: https://github.com/
GitLab: https://about.gitlab.com/
Redmine: http://www.redmine.org/
 
12. 原型设计:
 
Axure RP: http://www.axure.com/
墨刀 
 
13. 富互联网应用框架
 
AngularJs: http://www.angularjs.org
Backbone: http://backbonejs.org/
AmpersandJShttp://ampersandjs.com//
Knockout: http://knockoutjs.com/
Underscore: http://underscorejs.org/
 
14. 模板引擎
 
EJS: http://www.embeddedjs.com/
Handlebars: http://handlebarsjs.com/
Jade: http://jade-lang.com/
Velocity: http://velocity.apache.org/
 
15. 测试框架
 
Jasmine: http://pivotal.github.io/jasmine/
QUnit: http://qunitjs.com/
mocha: http://visionmedia.github.io/mocha/
 
16. 版本控制
 
Git: http://git-scm.com/
Subversion: http://subversion.apache.org/
Mercurial(Hg): http://mercurial.selenic.com/
 
17. WEB框架/服务器
 
Node: http://nodejs.org/
Express: http://expressjs.com/
Apache: http://httpd.apache.org/
Nginx: http://nginx.org/
 
18. CommonJS
Component: http://component.io/
 
19. WEB安全
 
XSS(跨站脚本攻击):
CSRF(跨站点伪造请求攻击):
跨iframe攻击:
Clickjacking安全漏洞:
 
 
20. 代码规范
 
Code Guide: http://alloyteam.github.io/code-guide/
编写可维护的CSS: http://segmentfault.com/a/1190000000388784/
GJS编码规范指南: http://alloyteam.github.io/JX/doc/specification/google-javascript.xml
jQueryJS规范: http://contribute.jquery.org/style-guide/js/
 
 
21. HTML模块化
 
html5boilerplate: http://html5boilerplate.com/
 
22. CSS模块化
 
Normalize.css: http://necolas.github.io/normalize.css/
LESS:http://www.lesscss.net/
OOCSS:http://www.oocss.cc/ http://oocss.org 
CssReset:http://www.cssreset.com/
 
 
23. HTML5 Canvas
 
D3:http://d3js.org/
KINETIC: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、架构、职业生涯、快速学习能力
 
引用 :https://www.25xt.com/html5css3/14622.html?from=timeline 
来源：https://www.cnblogs.com/xdanny/p/11288784.html

頁: [1]

琼殿技术论坛's Archiver

Web前端开发知识思维导图及汇总