以下爲對npm常用庫的整理
庫名 | 簡介 | 官網 |
---|---|---|
>>> | 功能庫 | <<< |
Axios | 一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中 | http://www.axios-js.com/ |
Lodash | 一個一致性、模塊化、高性能的 JavaScript 實用工具庫 | https://www.lodashjs.com/ |
Underscore | 一個JavaScript實用庫,提供了一整套函數式編程的實用功能,但是沒有擴展任何JavaScript內置對象。 | https://underscorejs.net/ |
Ramda | 一款實用的 JavaScript 函數式編程庫。 | https://ramda.cn/ |
Moment.js | 時間處理庫 | http://momentjs.cn/ |
MathJS | 這個庫是 JavaScript 和 Node.js 的數學擴展庫,與 JavaScript 內置的 Math 庫兼容。 | https://mathjs.org/ |
Day.js | 僅 2 kb大小的時間處理庫,和 Moment.js 的 API 設計保持完全一樣 | https://dayjs.fenxianglu.cn/ |
tui.calendar | ThorUI,輕量、簡潔、全面的移動端組件庫中的日曆組件 | http://www.thorui.cn/doc/docs/thorui/tui-calendar.html |
Keycode | 獲取鍵盤按鍵的 JavaScript keycode | http://keycode.info/ |
>>> | 前端UI庫 | <<< |
Bootstrap | Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架,用於開發響應式佈局、移動設備優先的 Web 項目。 | https://www.bootcss.com/ |
ElementUI | 可以很好的搭配vue來進行項目的開發,提供了很多風格統一美觀的組件。 | https://element.eleme.cn |
Antd Design | antd 是基於 Ant Design 設計體系的 React UI 組件庫,主要用於研發企業級中後臺產品。 | https://ant.design/index-cn |
Thor-UI | ThorUI,輕量、簡潔、全面的移動端組件庫 | http://www.thorui.cn |
>>> | 佈局 | <<< |
Macy.js | 僅 4 kb的 原生 流佈局插件 | http://macyjs.com/ |
Section separators | CSS 實現區域分割 | https://tympanus.net/Development/SectionSeparators/ |
>>> | JS滾動動畫 | <<< |
wow.js | 讓頁面滾動更有趣 | dowebok.com/demo/131/ |
Barba.js | 流式頁面過渡 | https://barba.js.org/ |
Waypoints.js | 滾動到某個元素位置時觸發一個功能 | http://imakewebthings.com/waypoints/ |
fullPage.js | 基於 jQuery 的插件,它能夠很方便、很輕鬆的製作出全屏網站 | http://fullpage.81hu.com/ |
Scrolline.js | 頁面滾動時顯示滾動進度 | https://jquery-plugins.net/scrolline-js-scroll-line-bar-indicator-on-page |
Animate on scroll | 漂亮的頁面滾動元素動畫 | https://michalsnik.github.io/aos/ |
Pagepiling.js | 全屏滾動 | https://github.com/alvarotrigo/pagePiling.js |
>>> | JS特效動畫 | <<< |
tippyjs | 玩轉鼠標懸停提示信息 | https://atomiks.github.io/tippyjs/ |
Vivus.js | 在 SVG 上繪製動畫 | http://maxwellito.github.io/vivus/ |
Highlight.js | web 語法高亮 | https://highlightjs.org/ |
OWL Carousel.js | 走馬燈插件 | https://www.dowebok.com/demo/2014/93/ |
typed-js | 打字效果 | https://mattboldt.com/demos/typed-js/ |
Velocity.js | 動畫庫 | http://velocityjs.org/ |
Tween.js | TweenJS類庫主要用來調整和動畫HTML5和Javascript屬性,提供了簡單並且強大的tweening接口。 | http://www.createjs.cc/tweenjs/ |
Shepherd.js | 爲應用創建新手引導 | https://github.com/HubSpot/shepherd |
Anime.js | 動畫庫 | https://www.animejs.cn/ |
Dragdealer.js | 炫酷拖 | https://skidding.github.io/dragdealer/ |
Sortable | 拖拽插件 | http://www.sortablejs.com/ |
>>> | CSS動畫 | <<< |
Motio | 一個基於動畫和平移的雪碧圖庫 | https://darsa.in/motio/#!introduction |
Animate.css | 常用的CSS動畫 | https://animate.style/ |
Bounce.js | 創建炫酷的 CSS3 動畫 | http://bouncejs.com/ |
TweenMax | 動畫庫 | https://www.tweenmax.com.cn/ |
Barba.js | 流式頁面過渡 | https://barba.js.org/ |
CSSpin | css spinners 合集,CSS Spinners and Loaders | https://webkul.github.io/csspin/ |
Magic animations | CSS3 實現動畫特效 | https://www.minimamente.com/project/magic/ |
>>> | 顏色、配色 | <<< |
Flat UI Colors | 扁平化設計配色 | https://flatuicolors.com/ |
Colorrrs | 隨機顏色生成器 | https://www.webfx.com/web-design/random-color-picker/ |
>>> | ICON | <<< |
Ion icons | Icon 集合 | https://ionicons.com/ |
Font awesome | Icon 集合 | https://feathericons.com/ |
阿里圖標庫 | - | https://www.iconfont.cn/ |
On/Off switch | 使用 CSS 創建 on/off 開關、radio 按鈕 | https://proto.io/freebies/onoff/ |
>>> | 字體 | <<< |
Font awesome | 字體集合 | https://fontawesome.com/ |
Font generator | 組合多個字體創建混合字體 | https://brandmark.io/font-generator/ |
>>> | 可視化 | <<< |
D3JS | 繪圖庫 | https://d3js.org/ |
ChartJS | 提供了 8 種不同類型的數據可視化,每種類型都支持動畫和定製。 | https://www.chartjs.org/samples/latest/ |
Echarts | 數據可視化 | https://echarts.apache.org |
HighCharts | 方便快捷的純 JavaScript 交互性圖表,是目前是市面上最簡單靈活的圖表庫。 | https://www.highcharts.com.cn/ |
>>> | 3D | <<< |
Particles.js | 一個用來在 web 中創建炫酷的浮動粒子的庫 | http://vincentgarreau.com/particles.js/ |
Three.js | 一個用來在 web 中創建 3d 物體和 3d 空間的庫 | https://threejs.org/ |
Tween.js | TweenJS類庫主要用來調整和動畫HTML5和Javascript屬性,提供了簡單並且強大的tweening接口。 | http://www.createjs.cc/tweenjs/ |
>>> | 識別 | <<< |
tesseract.js | OCR識別js語言庫 | https://tesseract.projectnaptha.com/ |
trackingjs | 人臉識別庫 | 官網,示例 |
>>> | 其它 | <<< |
Awesome Vuejs Resource | Vue 資源 | https://github.com/suifeng123/awesome-vue-cn |
Touch.js | 移動端手勢庫 | https://www.w3cways.com/2007.html |
httpserver | 輕量級本地web服務器 | |
TwentyTwenty | 一個對比圖片的可視化 diff 工具 | https://zurb.com/playground/twentytwenty |