ASP.NET MVC 最適配的 8 個前端元件 豐富應用系統設計
2021-07-18
ASP.NET MVC 5 預設使用 Bootstrap 3 作為 CSS Framework，提供了網頁 Grid Layout 設計、RWD 設計以及各式方便的 Components 及 Helper。但仍有部分的開發需求沒有辦法被解決，而秉持 DRY 的精神，擴充使用第三方元件以解決開發需求，就是本文的目的。
說明
Bootstrap 3 已經有了後繼的版本，請參考 ASP.NET MVC 從無到有打造一個應用系統 當中所介紹的如何將 ASP.NET MVC 5 預設的 Boostrap 3 升級為 Boostrap 4 並且不跑版。
本次的介紹皆使用 Libman 的方式進行第三方元件管理，適用於 Production環境於 Intranet 不連 CDN 的情境。
Animate.css
活潑的動畫效果，不需要自己寫 CSS 或者 JS，只要載入 CSS Link 就可以任意讓 Html Element 隨著 Style 舞動 💃
AOS, Animate On Scroll Library
想要做網頁捲動元素配合作動的視覺效果嗎？不用親自計算 CSS Height 簡單使用 AOS 就可以了 😀
Lodash
VanillaJS 很棒，從 ES6 以後也支援了處理物件的函式，例如：
document.querySelector()
document.querySelectorAll()此外也有呼籲大家想想是不是真的需要 jQuery、Lodash 的參考資料：
[You-Dont-Need-Lodash-Underscore](https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore](https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore)
但我就懶，Lodash.js 的好，不僅讓懶懶開發者有了輕鬆處理物件的方式，此外也處理的瀏覽器相容性的問題，例如 IE 不支援 ES6 函式的問題，而犧牲的部分效能、額外的檔案空間，對於懶懶開發者而言可以接受 😋
Illustration by Icons 8 from Ouch!
Chance.js
Lodash 對於資料結構的處理十分在行，唯一的缺點就是沒有方便的亂數函式，而 Chance 正是彌補了這個遺憾。從基本的隨機值產生，到情境意義的隨機資料產生（英文姓名、電子郵件、IP）等等，亂數之王非 Chance.js 莫屬 🎲
SweetAlert2
作為 Alert 的 Alternative，支援更多元的視覺效果，例如顯示圖片、訊息的風格等，此外也支援呼叫 Rest API 達到更多元的應用方式 💬
Owl Carousel
Bootsrap 原生已經有提供 Carousel 元件可以使用，但設計彈性有限。而 Owl Carousel 是一個更好的 Alternative，使用的彈性更為多元 🦉
FullCalendar
如果應用程式有需要實作 Calendar ，FullCalendar 絕對是首選 📅
DataTables
一秒讓表格變成 Sortable、Searchable、Filterable 📈
DatTables | 筆記如何在系統專案中使用 DataTables 元件