前端組件整理

工具類

• 方便操作對象，數組等的工具庫
  • underscore.js
  • lo-dash 與underscore.js的api基本一致。與underscore比其優勢是，效率高；可自定義構建
  • Sugar 在原生對象上增加一些工具方法
  • functional.js 提夠了一些Curry的支持
  • bacon.js 函數式編程，cool
  • streamjs 用流的方式來對數組，對象進行系列操作
• 異步流程控制
  • 發布訂閱
    • eventproxy 朴靈出品
    • Arbiter.js
  • q Promise風格的
  • Async.js
• 時間庫
  • moment
  • datejs
• 瀏覽器探測
  • Bowser 探測具體瀏覽器和版本
  • ua-parser-js 探測具體瀏覽器和版本，操作系統，設備類型等
• 調試
  • JavaScript Debug 對console.log的簡單封裝，當瀏覽器不支持console.log時，輸出在一個頁面元素里
  • log 讓控制台輸出的log有樣式
• uri.js uri操作
• cookie 增刪改cookie的工具庫
• BigDecimal.js 提高精度的數字操作

瀏覽器增強類

讓一些舊瀏覽器變牛逼的庫

• Selectivizr 讓IE 6-8支持一些css3選擇器
• ieBetter 讓ie6-8有高級瀏覽器的特性
• ExplorerCanvas 讓IE8-的瀏覽器支持canvas

選擇器增強

• Lining.js 讓瀏覽器實現類似::nth-line(), ::nth-last-line()的效果

未歸類

• prefixfree 用了它，寫css時，就不需要加瀏覽器的前綴了

表單類

• jquery-file-upload 上傳文件組件
• zTree 文件樹形視圖控件

表單驗證

• jquery-validation
• jQuery-Validation-Engine

表單元素美化

• uniform 提供對下拉框，單，復選框，按鈕等表單元素的美化
• select2 多選下拉框
• DropKick 下拉框，單，多選。外觀比uniform好
• switchery ios7風格的開關組件
• nouislider 用滾動條來設置/控制（音量等）

圖片類

• holderjs 生成占位圖片
• lazyload
• imagesLoaded 選取的圖片都加載好后執行回調

瀏覽圖片

• fancybox 彈出查看圖片，視屏等等 demo
• yoxview 彈出查看圖片，圖片尺寸縮放很自然

圖片牆

• wookmark

UI組件類

數據可視化(圖表)

• Echarts 百度出品
• highcharts 功能強大。是收費的。
• Plottable.JS 基於D3的一個圖表庫
• flot 文檔不給力
• chartJs 中文文檔 demo很漂亮，很清晰。比較輕量級。
• ichartJs 中國的一個家伙搞的，感覺還不錯。

待辦事宜日歷

• full calendar 支持脫放的方式來改變待辦事宜的時間
• Simple Events Calendar 外觀很喜歡。收費 5$

時間選取組件

• jQuery ui datepicker 經典，不是很好看
• pickadate 輕量級，手機友好的，漂亮。但貌似只能在彈出層中顯示，而沒有下拉這種方式顯示。
• zebra-datepicker 可配置性很強。但貌似只能在彈出在右上方。。。
• bootstrap-datepicker bootstrap風格。
• dateRangePicker 選取時間段。bootstrap風格。該組件依賴Twitter Bootstrap, Moment.js和jQuery.

自定義滾動條

• perfect scrollbar 輕量級的滾動條。外觀與mac上chrome的滾動條一樣。
• iscroll 在移動設備上用不錯

表格組件

• datatables 表格可交互（對內容進行排序，刪除等）
• backgrid 各種功能，帶分頁，可編輯表格內容。很棒。
• excellentexport 把表格的內容生成excel。兼容 Firefox, Chrome, IE6+

選取顏色

• Spectrum

編輯器

• ace 代碼編輯器，可以用來做demo演示
• ckeditor
• ueditor 百度做的
• tinymce 對html內容進行實時的編輯
• summernote 在移動設備上用不錯

HTML5播放器

• jwplayer 被大量網站使用
• html5media 簡單的h5player，輕量級
• jplayer 功能強太，可換膚

展示

• Impress.js 各種旋轉，和奇特的體驗
• fullPage 全屏顯示。用滾輪來翻頁
• turn.js 做一本書，帶漂亮的翻頁的效果

幻燈

• coin-slider 兼容IE6。蠻好的~。不過其切換方式是一塊塊的。不能配置切換方式。。。
• wowslider 幻燈切換時各種很炫的效果。收費。
• cycle2 普通的幻燈，竟然不支持垂直滾動。。。
• jcarousel 普通的幻燈，不兼容IE6
• reveal 3d滾動。做ppt相當不錯
• nodePPT 國人做的，做ppt也相當不錯。有些方面比 reveal做的還好。頂！
• roundabout 3d切換，看的后面圖片的邊

彈出框

• Magnific-Popup 兼容PC，Mobile。還不錯，有5k+的star
• layer 國人開發的，兼容ie6+。不喜歡其調用方式。

動畫效果

• jQuery.Marquee 跑馬燈效果
• quickflip 卡片翻轉效果
• 卡片翻轉效果2 兼容性可以。寫的比較簡單：1，只支持x方向翻轉 2,類名都是規定好的 3，只能被調用一次。 需要改寫一下。我的改進版見這里
• TheaterJS 模擬兩個人在屏幕上對話
• midnight.js 文字顏色隨着背景變，屌炸了
• color-animation jquery的顏色漸變動畫插件。jquery的動畫不支持顏色值的變化。改庫提供了這個支持。
• transit 對元素進行css的變換

視覺差插件

• scrollorama 比較簡單
• superscrollorama 能做的效果更多，但要用第三方Tween的庫，使用起來比較復雜。
• scrolldeck

flash

• swfobj 能夠自動檢測PC、Mac機器上各種主流瀏覽器對Flash插件的支持情況。它使得插入Flash媒體資源盡量簡捷、安全。而且它是非常符合搜索引擎優化的原則的。此外，它能夠避免您的HTML、XHTML中出現object、embed等非標准標簽，從而符合更加標准。

用戶體驗增強類

• Intro.js 用來介紹網站的功能很不錯。也可以做新手引導。
• blockUI Lolding組件。
• simple-hint 提示信息。用css做的。兼容性IE 9+。
• dotdotdot 文字溢出時，添加在文字末尾加省略號
• jQuery-menu-aim 二級菜單的切換如Amazon主頁上一樣迅速
• AnythingZoomer 放大鏡功能
• 美化/高亮語法代碼
  • google-code-prettify
  • DlHighlight 僅支持JavaScript、CSS、XML、HTML 這4語法高亮
• please 按要求隨機舒服的顏色

其他類

• Ink 響應式html郵件框架
• 性能測試
• 抓取，解析RSS內容（不能跨域，所以后台要做代理，所謂的解析Rss其實就是解析xml）
  • jFeed
  • jRss 簡單版的jFeed
• scriptcam 與攝像頭交互

Bootstrap相關類

• 免費皮膚
  • AdminLTE

JS Plugins倉庫

• jster
• node modules

本文參與騰訊雲自媒體分享計划，歡迎正在閱讀的你也加入，一起分享。