2019年最全的web前端知識體系彙總

必學(前端三劍客)
· HTML: https://developer.mozilla.org...

· CSS: https://developer.mozilla.org...

· JavaScript: https://developer.mozilla.org...

UI佈局框架

· Bootstrap: http://getbootstrap.com/

· antd: https://ant.design/index-cn

· Foundation: http://foundation.zurb.com/

· Uikit: http://www.getuikit.com/

· Web Components:http://css-tricks.com/modular...

構建工具/包管理器

· Grunt: http://gruntjs.com/

· Yeoman: http://yeoman.io/

· Bower: http://bower.io/

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

css預處理器

· Less: http://lesscss.org/

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

· Stylus: http://stylus-lang.com/

數據可視化

· Web圖形開發: https://developer.mozilla.org...

· Canvas: https://developer.mozilla.org...

· WebGL: https://developer.mozilla.org...

網絡

· HTTP: https://developer.mozilla.org...

· TCP/IP詳解卷1: 協議 http://www.52im.net/topic-tcp...

瀏覽器

· 瀏覽器API/DOM: https://developer.mozilla.org...

· 瀏覽器擴展: https://developer.mozilla.org...

調試工具

· Chrome：https://developers.google.com...

· Firebug: https://getfirebug.com/

· HTTPWatch: http://www.httpwatch.com/

· Fiddler: http://www.telerik.com/fiddler

· IE Developer Toolbar

· Weinre: http://people.apache.org/~pmu...

代碼優化

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

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

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

代碼規範

· Code Guide: http://alloyteam.github.io/co...

· 編寫可維護的CSS: http://segmentfault.com/a/119...

· GJS編碼規範指南: http://alloyteam.github.io/JX...

· jQueryJS規範: http://contribute.jquery.org/...

HTML模塊化

· html5boilerplate: http://html5boilerplate.com/

CSS模塊化

· Normalize.css: http://necolas.github.io/norm...

· OOCSS:http://www.oocss.cc/ http://oocss.org/

· CssReset:http://www.cssreset.com/

文檔工具

· JSDoc: https://github.com/jsdoc3/jsdoc

· Jekyll: http://jekyllrb.com/

模擬數據

· mockjs: http://mockjs.com/

WEB框架/服務器

· Node: http://nodejs.org/

· Express: http://expressjs.com/

· Egg: https://eggjs.org/zh-cn/

· ThinkJS: https://thinkjs.org/

· Apache: http://httpd.apache.org/

· Nginx: http://nginx.org/

WEB安全

· XSS(跨站腳本攻擊):

· CSRF(跨站點僞造請求攻擊):

· 跨iframe攻擊:

· Clickjacking安全漏洞:

測試框架

· Jasmine: http://pivotal.github.io/jasm...

· QUnit: http://qunitjs.com/

· mocha: http://visionmedia.github.io/...

編輯器

· WebStorm: http://www.jetbrains.com/webs...

· sublime text: http://www.sublimetext.com/

· vscode: https://code.visualstudio.com/

經常使用庫/框架

· ReactJs: https://reactjs.org/docs/gett...

· Redux: https://redux.js.org/

· React Router: https://github.com/ReactTrain...

· Mobx: https://mobx.js.org/

· Vue: https://cn.vuejs.org/

· vue-cli: https://cli.vuejs.org/zh/guid...

· vue-router: https://cn.vuejs.org/v2/guide...

· vuex: https://vuex.vuejs.org/

· Angular: https://angularjs.org/

· Angular(中文): https://www.angularjs.net.cn/

· jQuery: http://www.w3school.com.cn/jq...

· Axios: http://www.axios-js.com/

· GMU: http://gmu.baidu.com/

· Hammer.js: http://eightmedia.github.io/h...

· 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/

· D3:http://d3js.org/

· Three.js: https://threejs.org/

其餘庫

· KINETIC:http://kineticjs.com/

· Particles.js--web中建立炫酷的浮動粒子的庫:

· Fullpage.js—快速實現全屏滾動特性:

· Highlight.js—web 語法高亮:

· Waypoints.js—滾動到某個元素位置時觸發一個功能:

· Typed.js—打字機效果:

· Chart.js—使用 JavaScript 建立漂亮的圖表

· Instantclick—可以明顯加速網站加載時間，鼠標 hover 時預加載資源

· Chartist—另外一個圖表庫

· Motio—一個基於動畫和平移的雪碧圖庫

· Animsition—CSS 實現動畫過渡的 jQuery 插件

· Barba.js—流式頁面過渡

· TwentyTwenty—一個對比圖片的可視化 diff 工具

· Vivus.js—在 SVG 上繪製動畫

· Wow.js—滾動時展示動畫

· Scrolline.js—頁面滾動時顯示滾動進度

· Velocity.js—快速流暢的 JavaScript 動畫

· Animate on scroll—漂亮的頁面滾動元素動畫

· Handlebars.js—Javascript 模板

· jInvertScroll—視差滾動

· One page scroll—又一個頁面滾動庫

· Parallax.js—對智能設備方向變化作出響應的視差引擎

· Typeahead.js—搜索補全

· Dragdealer.js—炫酷拖拽

· Bounce.js—建立炫酷的 CSS3 動畫

· Pagepiling.js—全屏滾動

· Multiscroll.js—兩列垂直反向滾動

· Favico.js—動態 favicon

· Midnight.js—固定頭部切換效果

· Anime.js—動畫庫

· Keycode—獲取鍵盤按鍵的 JavaScriptkeycode

· Sortable—拖拽插件

· Flexdatalist—自動補全

· Slideout.js—移動應用側滑導航

· Jquerymy—使用 jQuery 實現雙向數據綁定

· Cleave.js—實時格式化輸入內容

· Page—客戶端單頁應用路由

· Selectize.js—用來添加 tag 的 Hybrid 選擇框

· Nice select—建立漂亮的選擇框的 jQuery 庫

· Tether—使用固定定位來建立相關元素

· Shepherd.js—爲應用建立新手引導

· Tooltip—tooltip 提示框

· Select2—Jquery 選擇框插件

· IziToast—通知彈窗實現
IziModal—模態框實現
·

在這裏小編建了一個前端學習交流扣扣羣：132667127，我本身整理的最新的前端資料和高級開發教程，若是有想須要的，能夠加羣一塊兒學習交流