前端知識圖譜與學習指南

前端開發全面知識庫，包括HTML5，CSS3和js的基本框架知識，以及DOM和BOM操做的基礎知識和一些基本工具和IDE。學習本篇，你將瞭解到如下知識。

核心 Core

HTML5

W3C www.w3school.com.cn/html5/

W3C www.w3.org/html/ig/zh/…

菜鳥教程 www.runoob.com/html/html5-…

HTML5中文門戶 www.html5cn.org/

CSS3

W3C CSS教程 www.w3school.com.cn/css/index.a… W3C CSS3教程 www.w3school.com.cn/css3/index.… 菜鳥教程CSS教程 www.runoob.com/css/css-tut… 菜鳥教程CSS3教程 www.runoob.com/css3/css3-t… CSS參考手冊 css.doyoe.com/

JS

W3C www.w3school.com.cn/js/ 菜鳥教程 www.runoob.com/js/js-tutor… 廖雪峯js教程 www.liaoxuefeng.com js標準參考教程-阮一峯http://javascript.ruanyifeng.com/

jQuery

W3C www.w3school.com.cn/jquery/

菜鳥教程 www.runoob.com/jquery/jque…

極客學院 wiki.jikexueyuan.com/project/jqu…

廖雪峯 www.liaoxuefeng.com/wiki/

參考手冊 www.css88.com/jqapi-1.9/

參考手冊 www.runoob.com/manual/jque…

ES6

阮一峯ES6 es6.ruanyifeng.com/

極客學院 wiki.jikexueyuan.com/project/es6…

JavaScript 標準參考  阮一峯http://javascript.ruanyifeng.com/advanced/ecmascript6.html

插件

parallel.js: 先後端通用的一個並行庫

zepto: 用於現代瀏覽器的兼容 jQuery 的庫

totoro: 穩定的跨瀏覽器測試工具

TheaterJS: 一個用於模擬人輸入狀態的 JS 庫

stellar.js: 前端用於實現異步滾動效果的庫，現已再也不維護

skrollr: 另外一款實現一步滾動的開源庫，使用人數衆多，可實現各類狂拽酷炫掉渣天的前端效果，看真相

Framework7: 前端框架，是開發人員能夠基於 web 技術構建 IOS7 程序

regulex: 用於生成 正則表達式 的可視化流程圖

markdown-it: 新型 Markdown 解析器，快速，支持插件

multiline: 用於 Javascript 中的多行文本，相似於 Ruby 的 HERE Doc

screenfull.js: 全屏插件，支持各大瀏覽器

lunr.js: 相似於 Solr, 可是用於瀏覽器上的全文搜索引擎，能夠爲 JSON 建立索引，離線也能夠使用

jquery.hotkeys: jQuery 插件，用於綁定熱鍵

breach_core: Javascript 編寫的 Browser (瀏覽器)

octocard: 用於生成 Github 信息卡片的庫

github-cards: 用於生成 Github 信息卡片的庫

money.js: 輕量級貨幣轉換庫，web 和 node 皆可用

accounting.js: 輕量級的數字、貨幣轉換庫

javascript-algorithms: Javascript 實現的各類算法集合

lazy.js: 相似於 underscore, 可是會延遲執行，某些場景下，性能會有很大的提高

seajs: 前端模塊加載器，解決模塊化、依賴等問題

jQuery-One-Page-Nav: 單頁應用中一個用於處理導航欄的庫

js.js: Javascript 實現的 javascript JIT

jquery-ui: jQuery 團隊開發的 UI 相關的前端庫，功能強大

todomvc: 分別基於 AngularJS/EmberJS/Backbone等實現的 TODO List, 幫助開發者選擇前端 MVC 庫

localForage: Mozilla 出品，用於離線存儲，基於IndexedDB, WebSQL 或者 localStorage, 提供一致的接口

EventEmitter: 瀏覽器版的 EventEmitter

jquery.serializeJSON: jQuery 插件，用於將 form 表單序列化成 JSON 數據

knockout: 前端 MVVM 框架，用於開發富前端應用

mermaid: 能夠根據文本生成流程圖，相似於 Markdown 的語法

js-sequence-diagrams: 另外一款能夠根據文本生成流程圖的庫，相似於 Markdown 的語法

flow: 一個用來檢測 Javascript 語法錯誤的庫， Facebook 出品

zoomooz: jQuery 插件，用來處理瀏覽器縮放

fancyBox: 一個用於放大縮小圖片、Web 內容或者多媒體元素的庫，優雅大方

mithril.js: 輕量型前端 MVC 框架，部分使用場景下性能優於 Angular.js 和 React

backbone: 強大的前端 MVC 庫，鼻祖級前端庫，最初爲了配合 Rails 來模塊化前端應用，兼容性良好 (兼容到 IE6)，插件豐富，性能良好

jquery.smartbanner: smartbanner 是從 IOS6 開始支持的一個新特性, 這個插件提供了對早期 IOS4/5 和 Android 的支持

jquery.scrollTo: 在頁面上以一個元素爲起始以動畫的方式移動(ScrollTo)到另外一個元素， 支持回退等

jScrollPane: 自定義的滾動條，讓全部瀏覽器都顯示同樣的滾動條

onepage-scroll: 提供相似於 iPhone6 展現頁相似的效果，適用於單頁應用，兼容到 IE8

scrollMonitor: 前端插件用來監控元素的滾動事件(進入、退出等)，性能很好

ScrollMagic: 神奇的滾動交互效果插件，能夠在滾動的過程當中設置各類各樣的動態效果

infinite-scroll: 滾動加載，滾動到最下到自動加載， Paul Irish 大神之做

animatable: 僅僅依靠 border-width 和 background-position 實現的各類動態效果，看真相

Fluidbox: 頁面上內嵌圖片的放大縮小效果，相似於 Medium 中的效果

jquery-validation: jQuery 的一個插件，用於校驗 Form 表單

BigVideo.js: jQuery 的一個插件, 用於實現大背景(視頻、圖片)效果

emscripten: 一款基於 LLVM, 能夠將 C/C++ 轉換成 Javascript 的工具，使得 Javascript 能夠近乎 Native 的速度

qrcode-generator: 各類語言的二維碼生成工具

device.js: 一個能夠檢測設備類型的工具，可讓咱們根據不一樣的設備來爲其定製響應的 Javascript 和 CSS

jquery-qrcode: jQuery 插件，用來生成二維碼

Wookmark-jQuery: jQuery 的一個插件，能夠用來實現瀑布流的效果

isotope: 能夠用來過濾、排列布局，實現美觀的動態佈局切換效果，Demo

lazysizes: 功能強大的圖片延遲加載工具，能夠首先加載一個低質量的圖片，而後再加載高質量的圖片

progressbar.js: 簡潔美觀的進度條，扁平化

pigshell: 一個由 Javascript 實現的Shell, 將互聯網當作一個大的文件系統, 經過 cd/ls/cat…..等命令, 能夠訪問 Facebook/Twitter/Google Drive 等網絡服務

spectrum: Js實現的顏色選擇器 (Colorpicker)

jQuery.countdown: jQuery 倒計時插件

summernote: WYSIWYG 富文本編輯器

awesomplete: 很是輕型的一個自動補全 JS 庫, 沒有任何依賴, 配置簡單, 美觀

switchery: IOS 7 上 Switch 的 JS 實現, 支持 IE8 及以上瀏覽器

trix: Basecamp 公司出品的富文本編輯器，簡潔小巧

sensor.js: 在智能移動設備瀏覽器上，經過HTML5的api使用移動設備的功能。定位、運動、傾斜等

hyhyhy: 用於建立 基於 HTML5 的 演示文稿

swipebox: jQuery 插件，用於處理移動端的觸摸事件

FileAPI: 前端用戶處理文件（拖放、多文件上傳等）

Sortable: 現代瀏覽器上用於實現元素拖拽排序的功能，支持 Meteor, AngularJS, React，不依賴 jQuery

Swiper: 用於實現瀏覽器上的滑動切換效果，支持硬件加速

matter-js: 2D 物理效果引擎，碰撞、彈跳等

jQTouch: 用於輔助建立手機端的 Web 應用，支持主題、Zepto.js 等

snabbt.js: 一個利用 Javascript 和 CSS transform 的 animation 庫

c3: 基於 D3 的圖表庫

echarts: 企業級圖表庫，百度開發

parallax.js: 一個用於響應智能手機 orientation 的庫

jQuery-Animate-Enhanced: jQuery 動畫庫的一個加強，用於現代瀏覽器

wysihtml: 富文本編輯器，適用於現代瀏覽器

slip: 一個經過滑動或者拖拽來操控列表的庫

evil-icons: 一個矢量圖庫，提供 Ruby/Node 等支持

PhotoSwipe: JS 的一個圖片展現庫

focusable: 是頁面上一個元素高亮的庫，有圖有真相

firefox.html: Firefox 在瀏覽器端的實現 —— HTML 版的 Firefox

jquery-mobile: jQuery 團隊開發的用於輔助手機端 web app 開發的庫，基於 HTML5

mobile-angular-ui: 基於angularjs和bootstarp的web app開發框架

interact.js: 一個適用於現代瀏覽器的，用於處理 手勢、拖放、縮放等的庫

rebound-js: 實現部分物理效果，Facebook 出品

basket.js: 基於 LocalStorage 的資源加載器，能夠用來緩存 script 和 css, 手機端使用速度快於瀏覽器直接緩存

iscroll: 高性能的滾動(scroll)處理庫，功能強大，支持各類事件，不依賴任何的庫，且插件豐富, 大衆點評的手機端列表滾動就是用這個庫處理的

metrics-graphics: 基於 D3 的圖表庫，簡潔、高效，Mozilla 出品

accessible-html5-video-player: Paypal 出品的 Video 播放器

loading: 幾種 Loading 效果，基於 SVG

flippant.js: 一款可以漂亮的網頁元素翻轉效果庫，代碼許久不更新，不過做爲源碼學習仍是不錯的

move.js: 基於 CSS3 的前端動畫框架

scrollReveal.js: 使元素以很是酷帥的方式進入畫布 (Viewpoint)，看 Demo

Modernizr: 一個用來檢測 HTML5 和 CSS3 支持狀況的庫

foundation: 另外一款前端模版框架，相似於 Bootstrap

Flat-UI: Bootstrap 的一款主題，簡潔美觀

iCheck: 一款漂亮的 Checkbox 插件

Swipe: 很是輕量級的一個圖片滑動切換效果庫, 性能良好, 尤爲是對手機的支持, 壓縮後的大小約 5kb

slick: 功能異常強大的一個圖片滑動切換效果庫

SocialButtons: 漂亮的社交按鈕

sweetalert: 一個很是美觀的用於替換瀏覽器默認 alert 的庫

web-animations-js: Javascript 實現的 Web Animation API

vivus: 能夠動態描繪 SVG 的 JS 庫, 支持多種動畫

plyr: 輕量, 小巧, 美觀的 HTML5 視頻播放器

timesheet.js: 基於 HTML5 & CSS3 時間表

slideout: 一個很是美觀的側滑菜單

包管理工具 Package Managers

NPM

菜鳥教程NPM 使用介紹 www.runoob.com/nodejs/node…

淘寶 NPM 鏡像 npm.taobao.org/

npm 模塊安裝機制簡介 www.ruanyifeng.com/blog/2016/0…

npm包搜索地址 www.npmjs.com/

Bower

Bower中文網 www.bowercn.com/

Bower：客戶端庫管理工具-阮一峯 javascript.ruanyifeng.com/tool/bower.…

Yarn

yarn中文網 yarnpkg.com/zh-Hans/快速、…

YARN 簡介 www.ibm.com/developerwo…

編輯器 Text Editors

WebStorm

官網下載 www.jetbrains.com/webstorm/do…

前端網破解版下載 www.qdfuns.com/tools

VScode

官網下載 code.visualstudio.com/

vscode 插件精選 - 獻給全部前端工程師https://segmentfault.com/a/1190000006697219

SublimeText

官網下載 www.sublimetext.com/

前端網破解版插件版下載 www.qdfuns.com/tools

SublimeCodeIntel: Sublime Text 的代碼補全工具，支持多種語言

Emmet：一個用於提升開發效率的編輯器插件，前身是Zen coding

SublimeLinter: 一個提供代碼質量檢測的插件

SublimeTmpl：快速新建指定的模版文件

Syntax-highlighting-for-Sass：sass代碼高亮插件

MarkdownEditing: Sublime Text 強大的 Markdown 擴展, 提供快捷鍵, 主題等

ApplySyntax: 輔助檢測語法插件

CTags: Sublime Text Ctags 支持插件, 須要安裝 ctags

sublime-react: React 代碼高亮

Atom

官網下載 atom.io/

HBuilder

官網下載 www.dcloud.io/

JS框架 JS Frameworks

Backbone

Backbone.js API中文文檔http://www.css88.com/doc/backbone/

AngularJs

中文官方文檔https://angular.cn/

angularjs中文網http://www.apjs.net/

angularjs教程http://www.angularjs.net.cn/

Angular 基礎入門http://www.cnblogs.com/micua/p/angular-essential.html

angular-masonry: Masonry 的 AngularJS 插件，用於瀑布流

angular-schema-form: 根據 JSON 生成響應的 Form 表單

restangular: Angular 中用來處理 RESTful API 的插件，可替代 $resource

ng-cordova: Cordova 經常使用組件的 Angular 版本

angular-translate: Angular 的國際化 (I18n)

ng-inspector: Chrome 插件，用於調試 Angular

angularjs-style-guide: AngularJS 代碼風格

ngReact: React 的 Angular 插件，能夠在 Angular 中使用 React Components

material: Google Material Design 效果的 Angular 實現

angular-local-storage: Angular 插件, 提供了對 localStorage 的友好支持, 並對不支持的瀏覽器使用 cookie 優雅降級

angular-filter: 一組有用的 Angular Filters

bindonce: Angular 插件, 用於減小 Watcher 的數量, 提高性能

React

英文官方文檔https://facebook.github.io/react/docs/hello-world.html

中文官方文檔http://reactjs.cn/react/docs/getting-started-zh-CN.html

gitbooks手冊https://hulufei.gitbooks.io/react-tutorial/content/introduction.html

阮一峯react入門http://www.ruanyifeng.com/blog/2015/03/react.html

阮一峯React Router入門http://www.ruanyifeng.com/blog/2016/05/react_router.html

React Router 中文文檔https://react-guide.github.io/react-router-cn/

react-redux 中文文檔http://cn.redux.js.org/docs/react-redux/index.html

阮一峯Redux 入門教程http://www.ruanyifeng.com/blog

react: React 框架源代碼

react-native: Facebook 出品的使用 React 開發 IOS 原生應用的框架

react-hot-loader: 實時調整 React 組件效果

grunt-react: React 的 Grunt 組件, 用於將 JSX 編譯成 JS

touchstonejs: 基於 React 的手機應用前端框架

essential-react: 基於 React, ES6, React-Router的一個應用腳手架

react-router: React 路由解決方案

Vue

vue官方http://cn.vuejs.org/

vuex官方http://vuex.vuejs.org/zh-cn/

vue-router官方https://router.vuejs.org/zh-cn/

UI框架 UI Frameworks

Bootstrap

最受歡迎的 HTML、CSS 和 JS 框架 v3.bootcss.com/

Ionic

一款接近原生的Html5移動App開發框架 會html css js就能夠開發apphttp://www.ionic.wang/

Foundation

Foundation 中文網 迄今爲止最好的響應式前端框架http://www.foundcss.com

FrozenUI

移動端服務的前端框架http://frozenui.github.io/

materializecss

基於Material Design的主流前端響應式框架http://www.materializecss.cn/

mui

最接近原生APP體驗的高性能前端框架http://dev.dcloud.net.cn/mui/

AntDesign

和react配合的UI框架https://ant.design

eleme

和vue配合的UI框架http://element.eleme.io/

JS預處理 JS Preprocessors

TypeScript

TypeScript 入門教程 菜鳥教程http://www.runoob.com/

TypeScript中文網https://www.tslang.cn/

TypeScript教程gitbookhttps://www.gitbook.com/

CoffeeScript

CoffeeScript 中文http://coffee-script.org/

CoffeeScript 實用手冊

極客學院http://wiki.jikexueyuan.com/project/coffeescript/

過程自動化 Process Automation

Grunt

Grunt中文網http://www.gruntjs.net/

Gulp

gulp.js 中文網http://www.gulpjs.com.cn/

gulp詳細入門教程http://www.ydcss.com/

前端構建工具gulpjs的使用介紹及技巧http://www.cnblogs.com/2050/p/4198792.html

Gulp開發教程https://www.w3ctech.com/topic/134

模板引擎 Templating

Handlebars

handlebarsjs官網http://handlebarsjs.com/

Handlebars中文文檔http://www.360doc.com/content/

Handlebars.js 中文文檔http://keenwon.com/992.html

Handlebars的使用方法文檔整理http://www.tuicool.com/articles/fqQFN3

Haml

haml官方文檔https://github.com/haml/haml

haml入門http://blog.csdn.net/napoay/article/details/50491363

Jade

Jade 官方的英文文檔http://www.w3cplus.com/html/how-to-use-jade.html

Jade的使用http://www.w3cplus.com/html/how-to-use-jade.html

帶你學習Jade模板引擎視頻http://www.imooc.com/learn/259

構建工具 Build Tools

RequireJS

RequireJS 英文網http://requirejs.org/

RequireJS 中文網http://requirejs.cn/

require.js的用法-阮一峯http://www.ruanyifeng.com/blog

seajs

seajs文檔http://seajs.org/docs/ SeaJS從入門到原理http://www.tuicool.com/articles/FfEJv2u

Browserify

官網http://browserify.org/

githubhttps://github.com/substack/node-browserify/

Webpack

Webpack 中文指南http://webpackdoc.com/

webpack的實例http://www.vichily.com

webpack的入門http://www.vichily.com

一小時包教會 —— webpack 入門指南http://www.w2bc.com/Article/50764

CSS預處理器 CSS Preprocessors

Sass

sass入門http://www.w3cplus.com/sassguide/

sass參考手冊http://sass.bootcss.com/docs/sass-reference/

SASS用法指南-阮一峯http://www.ruanyifeng.com/blog/

Less

less中文網http://lesscss.cn/

less快速入門http://less.bootcss.com/

stylus

stylus中文文檔-張鑫旭http://www.zhangxinxu.com/jq/stylus/