前端常用插件
1.一個純 JavaScript 的圖表庫 ECharts ★Star 19690
ECharts,一個純 Javascript 的圖表庫,可以流暢的運行在 PC 和移動設備上,兼容當前絕大部分瀏覽器(IE8/9/10/11,Chrome,Firefox,Safari等),底層依賴輕量級的 Canvas 類庫 ZRender,提供直觀,生動,可交互,可高度個性化定制的數據可視化圖表。ECharts 3 中更是加入了更多豐富的交互功能以及更多的可視化效果,並且對移動端做了深度的優化。
ECharts 提供了常規的折線圖,柱狀圖,散點圖,餅圖,K線圖,用於統計的盒形圖,用於地理數據可視化的地圖,熱力圖,線圖,用於關系數據可視化的關系圖,treemap,多維數據可視化的平行坐標,還有用於 BI 的漏斗圖,儀表盤,並且支持圖與圖之間的混搭。
(詳情:https://github.com/ecomfe/echarts)
2、網絡幻燈片 nodePPT ★Star 4001
nodePPT 是使用 nodejs 寫的網絡幻燈片。基於 GFM 的 markdown 語法編寫,支持 html 混排,再復雜的 demo 也可以做!支持18種轉場動畫,可以設置單頁動畫,有 overview 模式,雙屏模式,socket 遠程控制,搖一搖換頁,使用 ipad 控制做分享更酷(詳情:https://github.com/ksky521/nodeppt)
3、開源自動駕駛平台 ApolloAuto ★Star 3732

Apollo (阿波羅)是一個開放的、完整的、安全的平台,將幫助汽車行業及自動駕駛領域的合作伙伴結合車輛和硬件系統,快速搭建一套屬於自己的自動駕駛系統。Apollo 是百度重點打造的 AI 開放平台之一,計划主要包含 4 個技術模塊:定位/感知模塊、車輛規划與運營(AI+大數據,精准控制車輛,適合不同路況)、軟件運營框架(支持英特爾、英偉達等多種芯片)。(詳情:https://github.com/ApolloAuto/apollo )
4、人工智能軟件 WARP-CTC ★Star 2857

WARP-CTC 是百度硅谷 AI 研究所 (SVAIL) 開源的百度關鍵。 上圖顯示了 CTC 計算輸出序列 “THE CAT” 的概率,作為可以映射到 “THE CAT” 的輸入序列的所有可能對齊的總和,考慮到標簽可能會被復制,因為它們可能會超過幾個輸入數據的時間步長(由圖像底部的譜圖表示)。由於所涉及的組合,顯式地計算所有這些概率的總和將是非常昂貴的,但是 CTC 使用動態規划大大降低了計算的復雜度。因為 CTC 是一個可以區分的功能,它可以用於深層神經網絡的標准SGD訓練。(詳情:https://github.com/baidu-research/warp-ctc)
5、前端集成解決方案 FIS ★Star 2800
F.I.S(FIS)所提供的集成解決方案依托於一套靈活高效的編譯工具,F.I.S 借助該編譯平台對前端開發資源進行整合。接觸 F.I.S,可以從該平台入手。
前端團隊發展大多會經歷規范設計、技術選型、系統拆分、性能優化等階段,我們將其中的技術需求總結為前端集成解決方案。通常,一套完整的前端技術解決方案包括四個方向:

(詳情:https://github.com/fex-team/fis)
6、富文本 Web 編輯器 UEditor ★Star 2797

UEditor 是由百度 Web 前端研發部開發所見即所得富文本 Web 編輯器,具有輕量,可定制,注重用戶體驗等特點。兼容 Mozilla, MSIE,FireFox, Maxthon,Safari 和 Chrome,實現瀏覽器無差別化(詳情:https://github.com/fex-team/ueditor)
7、分布式配置管理平台 Disconf ★Star 2643

Distributed Configuration Management Platform (分布式配置管理平台),如今 百度、滴滴打車、銀聯、網易、拉勾網 等知名互聯網公司都在使用!(詳情:https://github.com/knightliao/disconf)
8、輕量級Canvas類庫 zrender ★Star 2000
zrender(ZlevelRender) 是一個輕量級的 Canvas 類庫,MVC封裝,數據驅動,提供類 Dom 事件模型,讓 canvas 繪圖大不同!MVC 核心封裝實現圖形倉庫、視圖渲染和交互控制(詳情:https://github.com/ecomfe/zrender)
9、分布式表格系統 Tera ★Star 1395

Tera 是一個高性能、可伸縮的數據庫系統,被設計用來管理搜索引擎萬億量級的超鏈與網頁信息。為實現數據的實時分析與高效訪問,我們使用按行鍵、列名和時間戳全局排序的三維數據模型組織數據,使用多級 Cache 系統,充分利用新一代服務器硬件大內存、SSD 盤和萬兆網卡的性能優勢,做到模型靈活的同時,實現了高吞吐與水平擴展。(詳情:https://github.com/baidu/tera)
10、iSlider ★Star 1245
iSlider 是個非常平滑的滑塊,支持移動端 WebApp,HTML5App 和混合型的 App。 iSlider是移動端的滑動組件的最佳解決方案。他和普通的 Web 端的滑動插件有很大不同,面向的用戶和解決的問題也有很大差別,iSlider 的出現,解決的根本問題是內容的分屏顯示,通過滑動操作來表示上一頁內容或是下一頁內容。而 iSlider 是用最優雅的方式去解決,盡可能的節省內存,提高性能。(詳情:http://be-fe.github.io/iSlider/)
11、移動端組件庫 GMU ★Star 1090
GMU(Global MobileUI)是百度前端通用組開發的移動端組件庫,具有代碼體積小、簡單、易用等特點,組件內部處理了很多移動端的 bug,覆蓋機型廣,能大大減少開發交互型組件的工作量,非常適合移動端網站項目。(詳情:https://github.com/fex-team/GMU)
12、地圖可視化工具 Mapv ★Star 1048
Mapv 是一款基於百度地圖的大數據可視化開源庫,可以用來展示大量的點、線、面的數據,每種數據也有不同的展示類型,如直接打點、熱力圖、網格、聚合等方式展示數據。 Mapv 使用 canvas 開發,支持現在被稱為“現代”瀏覽器, 通常兼容除了 IE8 及 IE 以下版本的其他大部分瀏覽器。(詳情:http://mapv.baidu.com/)
13、Javascript庫 Tangram ★Star 939
Tangram 是 Baidu 開發的一套簡單可依賴的 Javascript 庫,它的特點:
* 體積小巧,性能優良,使用簡單。
* 模塊化架構,方便定制與擴展。
* 適合團隊開發,豐富的中文文檔和本地技術優化,適合中國用戶。
* 經過專業QA團隊的測試以及百度各大產品線的應用,質量有保障。
14、企業級標准加載器 ESL ★Star 675
ESL 是一個瀏覽器端、符合 AMD 的標准加載器,適合用於現代 Web 瀏覽器端應用的入口與模塊管理。(詳情:https://github.com/ecomfe/esl)
15、前端應用開發平台 EDP ★Star 464
EDP 是基於 Node 的前端應用開發平台,是一個企業級前端應用的開發平台,提供了常用的項目管理工具、包管理工具、調試工具、構建工具、代碼生成工具、代碼檢測工具等一系列開發時的支持,並允許用戶自定義自己的擴展。(詳情:https://github.com/ecomfe/edp)
16、WebGL 類庫 Qtek ★Star 448

Qtek (WebGL Graphic Library) 是一個高品質的 WebGL 類庫(物理組件:https://github.com/pissang/qtek-physics)
17、前端代碼風格工具 FECS ★Star 427
FECS 是基於 Node.js 的前端代碼風格工具。基於 Stream,文件流轉十分迅速,支持四大語言,前端代碼質量有保障。 包含 HTML、CSS、JavaScript與 Less 代碼的檢查與修復。(詳情:http://fecs.baidu.com/)
18、jQuery 插件 SlipHover ★Star 388

SlipHover 是一個基於 jQuery 的插件,它能夠感知鼠標移動方向,並在相應的方向(或反方向)以動畫的方式顯示出一個遮罩層,用來顯示標題或描述,應用到幻燈片或相冊中是個不錯的選擇。 SlipHover 還支持自定義遮罩高度、動畫時間、字體顏色、背景顏色、文字排版等等。(詳情:https://github.com/wayou/SlipHover)
19、前端移動框架 Saber ★Star 331

Saber 是模塊化、組合式 的前端移動框架。她是提供了 JavaScript 模塊、CSS 樣式庫 與 開發平台 的完整前端解決方案。最擅長做移動端 SPA (SinglePage App) 項目。(詳情:https://github.com/ecomfe/saber)
20、Web 應用的框架 ER ★Star 273

ER 是百度公司的一個富瀏覽器端 Web 應用的框架,適用於並能很方便地構建一個整站式的 AJAX Web 應用。ER 具有如下特性:
1. 通過 hash 實現路徑的管理,支持瀏覽器的前進和后退功能,以及URL的可訪問性。
2. 提供精簡、核心的 Action、Model 和 View 的抽象,使得構建 RIA 應用變得簡單可行。
3. 提供可配置式的數據加載方案,提供靈活且完善的數據獲取 功能。
4. 提供支持基本邏輯和數據綁定的模板引擎,提供模板嵌套和母板頁。
5.不依賴任何第三方庫,模塊精簡、可切分及獨立運行。(詳情:https://github.com/ecomfe/er)
21、集群操作系統 Galaxy ★Star 272

Galaxy 是一個數據中心操作系統,目標是最大化資源的利用率與降低應用部署運維代價,支持萬台集群資源調度與管理,目前主要服務於百度網頁搜索離線架構業務,解決分布式文件系統,分布式表格系統,以及上層計算模塊運維與部署問題。(詳情:https://github.com/baidu/galaxy)
22、前端統計框架 ALog ★Star 267
經常一個頁面中就會並行着多個統計模塊:有性能相關的、有點擊相關的、有業務相關的......而 ALog 能夠使用一些少量簡單的 API 將這些復雜的統計模塊統一組織起來,減少統計模塊加載對產品的影響;並行多個統計模塊(詳情:https://github.com/fex-team/alogs
23、基於 SVG 的矢量圖形庫Kity ★Star 228
Kity 是一個基於 SVG 的矢量圖形庫,幫助你快速在頁面上創建和使用矢量元素。在 Kity 里,所有圖形,以及交換的數據,都是以強類型的對象出現的,可以非常方便地使用和拓展它們。 可以繪制任意矢量圖形,並且還具備強大的填充能力。(詳情:https://github.com/fex-team/kity)
24、protobuf 的 Java 開發包 jprotobuf ★Star 224
jprotobuf 是針對 Java 程序開發一套簡易類庫,目的是簡化 Java 語言對 protobuf 類庫的使用。使用 jprotobuf 可以無需再去了解 .proto 文件操作與語法,直接使用 Java 注解定義字段類型即可。基於 Canvas,純 JavaScript 圖表庫,提供直觀,生動,可交互,可個性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗,賦予了用戶對數據進行挖掘、整合的能力。(詳情:https://github.com/fex-team/jprotobuf )
25、CSS 樣式工具庫 Rider ★Star 163
Rider 是一個基於 Stylus 與后處理器、無侵入風格的 CSS 樣式工具庫。提供了以下功能:樣式初始化、順時針簡寫、緩動函數、圖片、排版、單位轉換、形狀、動畫、響應式工具。(詳情:https://github.com/ecomfe/rider)
26、JS模板引擎 baiduTemplate ★Star 135
baiduTemplate 應用於:前端使用的模板系統或后端 JavaScript 環境發布頁面。它提供一套模板語法,用戶可以寫一個模板區塊,每次根據傳入的數據,生成對應數據產生的 HTML 片段,渲染不同的效果。
(詳情:https://github.com/BaiduFE/BaiduTemplate)
27、輕量級UI組件 Magic ★Star 110
Magic 是用 JavaScript 腳本開發的輕量級UI組件,具有性能高效、代碼量小、支持多種初始化方式等方面的優勢,Web 前端開發者可以使用 Magic 快速搭建前端功能比較復雜的網站。Magic 的每個組件都有非常豐富的接口和事件處理,網站也提供了詳細的使用文檔和 Demo 演示。Web 前端開發者可以通過定制組件、初始化方式和插件獲得最輕量級版本。 Magic 的底層為高效的 Tangram 庫。(詳情:https://github.com/BaiduFE/Magic)
28、公式編輯器 KityFormula ★Star 105
Kity Formula 提供了一個非常簡單的公式呈現和存儲方案。你可以選擇 Kity Formula 的附屬項目中提供的解析器來完成各種公式表示法到可視化公式的轉換, 你也可以直接使用 Kity Formula 以編程的方式來構建一個公式,這種方式更加靈活,也可以根據這種方式開發出適合自己的解析器。(詳情:https://github.com/fex-team/kityformula)
29、服務虛擬化 Terminator ★Star 70
服務虛擬化指的就是虛擬出不穩定、不可用、未開發完全的服務。Terminator 實現了以下兩種方式:針對協議的通用樁,可以預先設置請求對應的返回值以及匹配條件,這樣系統未開發完之前可以使用這個樁來代替真實的服務;錄制回放方式,在第三方服務可用的時候將鏈路上的數據錄制下來,當不穩定或者不可用時,回放當時錄制的數據。Terminator 中每個鏈路可以看成是一個代理,運行在兩個服務之間。(詳情:https://github.com/BaiduQA/terminator)
30、3D 可視化庫 ECharts-X ★Star 41

ECharts-X 是 ECharts 團隊推出的全新 3D 可視化庫,它是基於 ECharts 的擴展,底層深度整合了 WebGL 庫 QTEK 和 Canvas2D 庫 ZRender。(詳情:https://github.com/pissang/echarts-x)
31、面向 C/C++ 語言的構建工具 Broc ★Star 71
broc 是一款面向 C/C++ 語言的構建工具,提供了編譯、分支依賴、依賴模塊下載等功能。不同於make, cmake等以庫文件鏈接的編譯方式,broc 將依賴庫源代碼與程序源代碼一並同時進行編譯,這種方式可以避免程序源代碼與依賴庫編譯選項或平台不一致導致的軟件兼容性問題;broc 支持編譯結束后自動運行單元測試用例;借助 Jenkinsbroc https://github.com/baidu/broc)
32.jquery
JQuery是輕量級的js庫 ,它兼容CSS3,還兼容各種瀏覽器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后續版本將不再支持IE6/7/8瀏覽器。
強大的選擇器
出色的DOM操作的封裝
可靠的事件處理機制
完善的ajax
不污染頂級變量
出色的瀏覽器兼容性
鏈式操作方式
隱式迭代
行為層與結構層分離
豐富的插件支持
33. touch.js
移動設備上的手勢識別與事件庫,由百度雲Clouda團隊開發維護
官網:http://touch.code.baidu.com/ 下載地址:http://touch.code.baidu.com/touch-0.2.14.min.js
輕量級插件
優秀的單指旋轉手勢
基於原生事件
支持事件代理 , 性能更好
API簡單 2、zepto.js下的touch模塊 針對移動設備原生touch事件封裝的手勢識別事件模塊 官網:http://www.bootcss.com/p/zeptojs/ 下載地址: https://github.com/madrobby/zepto/blob/master/src/touch.js
34、zepto.js(1.0.0 ~ 1.1.6 )
Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫, 它與jquery有着類似的api
官網:http://www.bootcss.com/p/zeptojs/ 下載地址:http://www.bootcss.com/p/zeptojs/
輕量級,壓縮后大小只有 5~ 10k , 但功能齊全
不支持低版本 IE(<10) ,移動端網頁開發首選 , 但不支持 wp系統手機
API仿照JQuery , 上手方便
包含polyfill,zepto,detect,event,ajax,form,fx 這7個就是標准版包含的模塊
用tap事件取代click事件200~300 ms 的延遲
Zepto 沒有 .innerHeight() .outerWidth() 等四個方法,其次,它的 .height()/.width() 方法也不完善
35、iScroll.js(iScroll4.0~iScroll5.0)
iScroll是一個高性能,資源占用少,無依賴,多平台的javascript滾動插件
下載地址:https://github.com/cubiq/iscroll/
旨在解決移動webkit系瀏覽器的區域滾動問題 ( 原生 mobile safari 只能雙指滑動,不支持單指滑動且沒有滾動條;android自帶瀏覽器也支持區域滾動,且可單指滑動操作,但很不流暢)
兼容mobile safari 、android默認瀏覽器、safari 、chrome 、 ffirefox5+、opera11+、IE9+及其他webkit核心瀏覽器
實現上拉刷新、下拉加載問題
官方定義iscroll只能滾動wrapper里的第一個子節點
縮放(Pinch/Zoom)
拉動刷新(Pull up/down to refresh)
輕量級插件,只有4k,性能高
自定義滾動條
擴展性差 ,接口不明顯
點擊輸入框不靈敏,無法聚焦,頁面文字無法選擇和復制(iScroll禁止了瀏覽器的默認行為)
36、hammer.js ( 2.0.8版本)
hammerJS是一個優秀的、輕量級的觸屏設備手勢庫
官網:http://hammerjs.github.io/ 下載地址:https://github.com/hammerjs/hammer.js/
開源的移動端腳本框架,可以完美的實現在移動端開發的大多數事件
主要分為六大事件:點擊、滑動、拖動、多點觸控、按壓、旋轉
37、flexible.js (0.3.2版本)
flexible.js 是一個用來解決H5屏幕適配問題的一個輕量級插件
下載地址:https://github.com/amfe/lib-flexible
動態改寫了 標簽
給元素添加 data –dpr屬性 , 並且動態改寫 data –dpr 的值
給 元素添加 font-size 屬性 , 並且動態改寫 font-size 的值
38、jQuery Mobile (1.4.0版本)
jQuery Mobile 是一個用於創建移動端web應用的的前端框架
jQuery Mobile為開發移動應用程序提供了非常簡單的用戶接口
這種接口的配置是標簽驅動的,這意味着我們可以在HTML中建立大量的程序接口而不不需要寫一行js代碼
擁有一個完整統一的UI框架
多頁面之間跳轉,完全使用ajax加載頁面
性能不好,兼容性一般,UI限制大
39、Bootstrap(Bootstrap3.0版本)
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架,用於開發響應式布局、移動設備優先的 WEB 項目
官網:http://www.bootcss.com/ 下載地址:http://v3.bootcss.com/
CSS3媒體查詢(Media Query)實現一個框架、多種設備
手機(<768px) 、平板(>= 768px) 、桌面顯示器(>=992px) 、大桌面顯示器(>=1200px)
百分比布局實現的12份柵格化系統
豐富完善的UI組件和svg圖標庫
bootstrap2不支持IE6、bootstrap3不支持IE8以下瀏覽器
重量級類庫
站點樣式風格都一樣,沒有新意
40、Angular.js (1.x版本)
為克服HTML在構建應用上的不足而設計WVC、WVVM框架
官網:http://www.apjs.net/ 下載地址:https://angularjs.org/
聲明式的模板,自帶豐富的Angular指令
完善的前端MVC、MVVM框架,包含模板、數據雙向綁定、路由、模塊化、服務、過濾器、依賴注入等
可以自定義封裝directive
改變了傳統JQuery以dom操作為核心的方式,以數據為中心
ng提倡在控制器里面不要有操作DOM的代碼 , 對於一些JQuery插件的使用,如果不想破壞代碼的整潔性,需要寫一些directive去封裝插件
Angular太笨重
41、Swiper(3.x版本)
Swiper是一款免費以及輕量級的移動設備觸控滑塊的js框架
官網:http://2.swiper.com.cn/ 下載地址:http://2.swiper.com.cn/download/index.html#file1
Swiper實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等
無需加載任何公用庫
Swiper默認的觸摸比例為1:1
Swiper帶有所有常用的導航控制器,包括分頁器,切換箭頭,滾動條
使用流行的flexbox布局
Swiper還包含自適應、滾動反彈、抵抗反彈、loop模式、嵌套Swiper
擁有豐富的API,允許你建立自己獨特的分頁器、導航、視差滾動等效果
允許多行Slide布局
42、Ionic(1.3版本)
Ionic是一款以web開發原生應用App的框架
官網:http://ionicframework.com/ 下載地址:http://ionicframework.com/getting-started/
基於AngualrJs來增強應用
通過SASS構建應用程序,提供很多UI組件
旨在從web的角度開發手機應用,基於phoneGap的編譯平台,事項編譯成各個平台的應用程序
ios上比較流暢,但在android低版本機上運行有些卡
右鍵插件
http://www.jq22.com/jquery-info2688
http://www.jq22.com/yanshi2747
下拉多級菜單
http://www.jq22.com/yanshi1306
加載進度條
http://www.jq22.com/jquery-info8210
頁面加載特效
http://www.jq22.com/yanshi2082
上拉加載更多 下拉刷新
http://www.jq22.com/jquery-info5126
http://www.jq22.com/jquery-info4469
http://www.jq22.com/jquery-info3735
圖片延時加載
http://www.jq22.com/jquery-info330
http://www.jq22.com/jquery-info390
表情包插件
http://www.jq22.com/jquery-info2852
右下角提示插件
http://www.jq22.com/jquery-info6604
http://www.jq22.com/yanshi7942 左
http://www.jq22.com/jquery-info7239
對話框
http://www.jq22.com/jquery-info4077
http://www.jq22.com/jquery-info442
針對某個元素的提示插件
http://www.jq22.com/jquery-info3931
http://www.jq22.com/jquery-info2307
http://www.jq22.com/jquery-info442
三級聯動插件
http://www.jq22.com/jquery-info3339
jQuery HighchartTable html轉換圖表
兼容 IE6+、完美支持移動端、圖表類型豐富的 HTML5 交互圖表 | Highcharts
篩選與排序
jquery拖放插件
http://www.jq22.com/jquery-info8874
jquery搜索與排序插件
http://www.jq22.com/jquery-info8805
http://www.jq22.com/jquery-info7356
http://www.jq22.com/jquery-info4714
jquery篩選過濾器
http://www.jq22.com/jquery-info8733
多級分類插件
http://www.jq22.com/jquery-info8632
分頁多選插件
http://www.jq22.com/jquery-info8509
模糊查詢插件
http://www.jq22.com/jquery-info7501
http://www.jq22.com/jquery-info2992
批量刪除插件
http://www.jq22.com/jquery-info2129
組織架構圖插件
http://www.jq22.com/jquery-info9760
jQuery滾動固定區塊
http://www.jq22.com/jquery-info9528
菜單跟隨切換active,緩動錨點置頂
http://www.jq22.com/jquery-info9224
jQuery滑動固定插件scrollfix
http://www.jq22.com/jquery-info9192
移動端下拉刷新、上拉加載更多 Zepto/jQuery插件
http://www.jq22.com/jquery-info6960
單行文字循環滾動(jQuery)
http://www.jq22.com/jquery-info6402
文字輪播無縫滾動
http://www.jq22.com/jquery-info5198
JQuery使導航欄固定於網頁頂部
http://www.jq22.com/jquery-info5130
html下拉刷新上拉加載Refresher3.0
http://www.jq22.com/jquery-info4469
回到頂部和回到底部特效-jquery錨點移動兼容所有瀏覽器
http://www.jq22.com/jquery-info3643
jQuery右下角浮動層火箭動畫返回頂部效果代碼
http://www.jq22.com/jquery-info622
橫向滾動鼠標插件Horwheel
http://www.jq22.com/jquery-info524
jQuery表格插件表格插件gridGridManager
http://www.jq22.com/jquery-info9422
固定行列,可ajax添加數據
http://www.jq22.com/jquery-info3876
vis時間線+組織結構圖
http://www.jq22.com/jquery-info2541
jQuery h5拖拽多文件上傳
http://www.jq22.com/jquery-info9594
jQuery文件上傳插件angularfileupload
http://www.jq22.com/jquery-info7550
jQuery可任意拖拽排序菜單樹機構樹
http://www.jq22.com/jquery-info9567
jsTree樹控件(基於jQuery, 超強悍)
http://www.jq22.com/jquery-info5724
dtree權限控制復選框插件
http://www.jq22.com/jquery-info5331
jquery-json
jQuery圖片裁剪插件jQuery-photoClip