Web前端開發知識思惟導圖及彙總

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

 

 

 

 

下面就是牛人整理的前端知識體系大全，讓各位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基本功：佈局、盒子模型、選擇器優先級、HTML五、CSS三、Flexbox

重點在於對Web標準的理解、瀏覽器內核差別、兼容性、hack、CSS基本功：佈局、盒子模型、選擇器優先級及使用、document flow（文檔流）、清除浮動，hasLayout 和 塊格式化上下文 (block-formattin contexts) 、reflow&repaint、硬件加速、HTML5（離線 & 存儲，多媒體，Web Sockets ,Web Workers，History API2D/3D 繪圖）、CSS三、Flexbox、CSS預編譯、動畫、響應式佈局、移動端開發等

 

JavaScript：

 

數據類型、運算、對象、Function、繼承、閉包、做用域、原型鏈、事件、RegExp、JSON、Ajax、DOM、BOM、內存泄漏、跨域、異步裝載、模板引擎、前端MVC、路由、模塊化、Canvas、ECMAScript 六、Nodejs 

數據類型、面向對象、數組、DOM、BOM、Function、繼承、閉包、內置對象、做用域、跨域、原型鏈、、JSON、XMLHttpRequest、 RegExp、模塊化、內存泄漏、事件機制、異步裝載回調、模板引擎、前端MVC、NodeJS、JSON、ajax、框架、算法等

 

其餘：

 

移動端、響應式、自動化構建、HTTP、離線存儲、WEB安全、優化、重構、團隊協做、可維護、易用性、SEO、UED、架構、職業生涯、快速學習能力

 

引用 :https://www.25xt.com/html5css3/14622.html?from=timeline