籠統的前端

VICHILY'S BLOG發表於2017-03-01
前端

籠統的前端，前端圖譜，前端工具大全

核心 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

CSS3

JS

jQuery

ES6

外掛

  • 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

Bower

Yarn

編輯器 Text Editors

WebStorm

VScode

SublimeText

Atom

HBuilder

JS框架 JS Frameworks

Backbone

AngularJs

React

Vue

UI框架 UI Frameworks

Bootstrap

Ionic

Foundation

FrozenUI

materializecss

mui

AntDesign

eleme

JS預處理 JS Preprocessors

TypeScript

CoffeeScript

過程自動化 Process Automation

Grunt

Gulp

模板引擎 Templating

Handlebars

Haml

Jade

構建工具 Build Tools

RequireJS

seajs

Browserify

Webpack

CSS前處理器 CSS Preprocessors

Sass

Less

stylus

版本控制 Version Control

Git

Svn

相關文章