牛人整理的前端知識(shí)體系大全與前端知識(shí)結(jié)構(gòu)圖

一張圖足以讓你了解web前端工程師需要做哪些工作以及需要掌握哪些技能。

前端知識(shí)結(jié)構(gòu)圖

 

下面就是牛人整理的前端知識(shí)體系大全,讓各位APP設(shè)計(jì)師想要轉(zhuǎn)行做前端開發(fā)的同學(xué)們提供一些參考的文案和網(wǎng)址。

 

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. 構(gòu)建工具及包管理器:

Grunt:?http://gruntjs.com/

Yeoman:?http://yeoman.io/

Bower:?http://bower.io/

NPM:?https://www.npmjs.org/

 

3. 代碼優(yōu)化:

Google Closure Compiler:

CSS Lint:?http://csslint.net/

JSHint:?http://www.jshint.com/

JSLint:?http://www.jslint.com/

 

4. CSS預(yù)處理器

Less:?http://lesscss.org/

Sass:?http://sass-lang.com/

 

 

5. 調(diào)試工具:

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. 移動(dòng)端 手勢事件庫:

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. 思維導(dǎo)圖

XMind:http://www.xmind.net/

 

 

10.模塊加載器:

ESL: https://github.com/ecomfe/esl

RequireJS:?http://requirejs.org/

SeaJS:http://seajs.org/docs/

 

11. 項(xiàng)目管理:

Github:?https://github.com/

GitLab:?https://about.gitlab.com/

Redmine:?http://www.redmine.org/

 

 

12. 原型設(shè)計(jì):

Axure RP:?http://www.axure.com/

 

13. 富互聯(lián)網(wǎng)應(yīng)用框架

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框架/服務(wù)器

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(跨站點(diǎn)偽造請(qǐng)求攻擊):

跨iframe攻擊:

Clickjacking安全漏洞:

 

 

20. 代碼規(guī)范

Code Guide:?http://alloyteam.github.io/code-guide/

編寫可維護(hù)的CSS:?http://segmentfault.com/a/1190000000388784/

GJS編碼規(guī)范指南:?http://alloyteam.github.io/JX/doc/specification/google-javascript.xml

jQueryJS規(guī)范:?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/

 

 

第三部分:前端開發(fā)知識(shí)點(diǎn):

HTML&CSS:

對(duì)Web標(biāo)準(zhǔn)的理解、瀏覽器內(nèi)核差異、兼容性、hack、CSS基本功:布局、盒子模型、選擇器優(yōu)先級(jí)、HTML5、CSS3、Flexbox

重點(diǎn)在于對(duì)Web標(biāo)準(zhǔn)的理解、瀏覽器內(nèi)核差異、兼容性、hack、CSS基本功:布局、盒子模型、選擇器優(yōu)先級(jí)及使用、document flow(文檔流)、清除浮動(dòng),hasLayout 和 塊格式化上下文 (block-formattin contexts) 、reflow&repaint、硬件加速、HTML5(離線 & 存儲(chǔ),多媒體,Web Sockets ,Web Workers,History API2D/3D 繪圖)、CSS3、Flexbox、CSS預(yù)編譯、動(dòng)畫、響應(yīng)式布局、移動(dòng)端開發(fā)等

JavaScript:

數(shù)據(jù)類型、運(yùn)算、對(duì)象、Function、繼承、閉包、作用域、原型鏈、事件、RegExp、JSON、Ajax、DOM、BOM、內(nèi)存泄漏、跨域、異步裝載、模板引擎、前端MVC、路由、模塊化、Canvas、ECMAScript 6、Nodejs

數(shù)據(jù)類型、面向?qū)ο蟆?shù)組、DOM、BOM、Function、繼承、閉包、內(nèi)置對(duì)象、作用域、跨域、原型鏈、、JSON、XMLHttpRequest、 RegExp、模塊化、內(nèi)存泄漏、事件機(jī)制、異步裝載回調(diào)、模板引擎、前端MVC、NodeJS、JSON、ajax、框架、算法等

 

其他:

移動(dòng)端、響應(yīng)式、自動(dòng)化構(gòu)建、HTTP、離線存儲(chǔ)、WEB安全、優(yōu)化、重構(gòu)、團(tuán)隊(duì)協(xié)作、可維護(hù)、易用性、SEO、UED、架構(gòu)、職業(yè)生涯、快速學(xué)習(xí)能力

每天更新,
全站高品質(zhì)素材免費(fèi)下載!