前端工具大全

核心 Core

• HTML(HTML5)

• CSS(CSS3)

• JavaScript

• jQuery

• ES6

• 外掛

包管理工具 Package Managers

• NPM

• Bower

• Yarn

前端效能 Front-End Performance

• WebPagetest

• PerfBudget

• CriticalCSS

• Picturefill

編輯器 Text Editors

• WebStorm

• VScode

• Sublime Text

• Atom

• HBuilder

JS框架 JS Frameworks

• Backbone

• AngularJs

• React

• Vue

UI框架 UI Frameworks

• Bootstrap

• Ionic

• Foundation

• FrozenUI

• materializecss

• mui

• Ant Design

• eleme

JS預處理 JS Preprocessors

• TypeScript

• CoffeeScript

• Babel

響應式網頁 Responsible WEB Design

• 漸進增強、可訪問性

過程自動化 Process Automation

• Grunt

• Gulp

模板引擎 Templating

• Handlebars

• Haml

• Jade

程式碼質量 Code Quality

• JSCS

• ESLint

瀏覽器重新整理 Browser Refreshing

• LiveReload

• Guard

構建工具 Build Tools

• RequireJS

• seajs

• Browserify

• Webpack

CSS前處理器 CSS Preprocessors

• Sass

• Less

• stylus

後端 Back-End

• nodeJS

• PHP

版本控制 Version Control

• Git

• Svn

程式碼測試 Testing

CSS設計模式 OOCSS & Style Guides

• MVCSS

核心 Core

HTML5

• W3C http://www.w3school.com.cn/html5/

• W3C https://www.w3.org/html/ig/zh/wiki/HTML5

• 菜鳥教程 http://www.runoob.com/html/html5-intro.html

• HTML5中文門戶 http://www.html5cn.org/

CSS3

• W3C CSS教程 http://www.w3school.com.cn/css/index.asp

• W3C CSS3教程 http://www.w3school.com.cn/css3/index.asp

• 菜鳥教程CSS教程 http://www.runoob.com/css/css-tutorial.html

• 菜鳥教程CSS3教程 http://www.runoob.com/css3/css3-tutorial.html

• CSS參考手冊 http://css.doyoe.com/

JS

• W3C http://www.w3school.com.cn/js/

• 菜鳥教程 http://www.runoob.com/js/js-tutorial.html

• 廖雪峰js教程 http://www.liaoxuefeng.com

• js標準參考教程-阮一峰 http://javascript.ruanyifeng.com/

jQuery

• W3C http://www.w3school.com.cn/jquery/

• 菜鳥教程 http://www.runoob.com/jquery/jquery-tutorial.html

• 極客學院 http://wiki.jikexueyuan.com/project/jquery-tutorial/

• 廖雪峰 http://www.liaoxuefeng.com/wiki/

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

• 參考手冊 http://www.runoob.com/manual/jquery/

ES6

• 阮一峰ES6 http://es6.ruanyifeng.com/

• 極客學院 http://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 應用，支援主題