# 1\. 更新
`UI選擇務必慎重，貨比三家。`
弱水三千只取一瓢：弱水三千只取一瓢，源起佛經中的一則故事，警醒人們`在一生中可能會遇到很多美好的東西，但只要用心好好把握住其中的一樣就足夠了`
????????歡迎貢獻????????
* 2017-1209 ZanUI (Vue)
* 2017-1218 Onsen UI(Vue, React, Angular)
* 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,element-react, element-angular,NG-ZORRO
* 2017-1214 增加 Mint UI
* 2017-1211 增加 Layui, UIkit
* 2017-1206 增加 cube-ui, Amaze ui React
除了老牌構建于jQuery框架之上的UI外, 新銳UI派系：
* 基于Vue: ELementUI, iViewui
* 基于React: AntDesign, Amaze UI React
# [](https://wdd.js.org/all-best-ui-frame.html#2-%E7%A7%BB%E5%8A%A8%E7%AB%AF "2. 移動端")2\. 移動端
## [](https://wdd.js.org/all-best-ui-frame.html#2-1-WeUI "2.1. WeUI")2.1. WeUI
[](https://wdd.js.org/img/images/20180207094906_feQoNF_Screenshot.jpeg)
來自：騰訊
> WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程序量身設計，令用戶的使用感知更加統一。
> [詳情](https://weui.io/)
## [](https://wdd.js.org/all-best-ui-frame.html#2-2-SUI-Mobile "2.2. SUI Mobile")2.2. SUI Mobile
[](https://wdd.js.org/img/images/20180207094938_FjBqKD_Screenshot.jpeg)
來自：阿里
> SUI Mobile 是一套基于 Framework7 開發的UI庫。它非常輕量、精美，只需要引入我們的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常適合開發跨平臺Web App。輕量的UI庫
> SUI Mobile 非常輕量，核心庫壓縮Gzip后的JS、CSS網絡傳輸體積總共只有52K，卻提供了20+個常用的組件。[詳情](http://m.sui.taobao.org/)
## [](https://wdd.js.org/all-best-ui-frame.html#2-3-Amaze-%E5%A6%B9%E5%AD%90-UI "2.3. Amaze ~ 妹子 UI")2.3. Amaze ~ 妹子 UI
[](https://wdd.js.org/img/images/20180207094922_0rwozv_Screenshot.jpeg)
> 中國首個開源 HTML5 跨屏前端框架[詳情](http://amazeui.org/)
* Amaze UI 以移動優先（Mobile first）為理念，從小屏逐步擴展到大屏，最終實現所有屏幕適配，適應移動互聯潮流。
* Amaze UI 含近 20 個 CSS 組件、20 余 JS 組件，更有多個包含不同主題的 Web 組件，可快速構建界面出色、體驗優秀的跨屏頁面，大幅提升開發效率。
* 相比國外框架，Amaze UI 關注中文排版，根據用戶代理調整字體，實現更好的中文排版效果；兼顧國內主流瀏覽器及 App 內置瀏覽器兼容支持。
* Amaze UI 面向 HTML5 開發，使用 CSS3 來做動畫交互，平滑、高效，更適合移動設備，讓 Web 應用更快速載入。
## [](https://wdd.js.org/all-best-ui-frame.html#2-4-jQuery-mobile "2.4. jQuery mobile")2.4. jQuery mobile
[](https://wdd.js.org/img/images/20180207095020_QB3Wp3_Screenshot.jpeg)
> jQuery移動是一個基于html5的用戶界面系統,為響應web站點和應用程序都可以訪問所有的智能手機,平板電腦和桌面設備而設計。[詳情](https://jquerymobile.com/)
## [](https://wdd.js.org/all-best-ui-frame.html#2-5-Framework7 "2.5. Framework7")2.5. Framework7
[](https://wdd.js.org/img/images/20180207095038_xJKBFh_Screenshot.jpeg)
> Framework7 是一個開源免費的框架可以用來開發混合移動應用（原生和HTML混合）或者開發 iOS & Android 風格的WEB APP。也可以用來作為原型開發工具，可以迅速創建一個應用的原型。[詳情](http://framework7.taobao.org/)
* Framework7 最主要的功能是可以使用HTML、CSS和JS來開發iOS7應用。Framework7 是完全免費開源的。
* Framework7 并不能兼容所有的設備。她只專注于為 iOS 和 Google Material 設計提供最好的體驗。
* 如果你想開發 iOS 或者 Android 混合應用（Phonegap）或者你想開發 iOS 和 Google Material 風格的WEB APP，那么Framework7將會是你的首選。
## [](https://wdd.js.org/all-best-ui-frame.html#2-6-cube-ui%EF%BC%88Vue%EF%BC%89 "2.6. cube-ui（Vue）")2.6. cube-ui（Vue）
`cube-ui 是由滴滴開源的基于 Vue.js 實現的移動端組件庫。`[詳情](https://didi.github.io/cube-ui/#/zh-CN)
● 質量可靠：由滴滴內部組件庫精簡提煉而來，歷經考驗，并且每個組件都有充分單元測試，為后續集成提供保障。
● 體驗極致：以迅速響應、動畫流暢、接近原生為目標，在交互體驗方面追求極致。
● 標準規范：遵循統一的設計交互標準，高度還原設計效果；接口標準化，統一規范使用方式，開發更加簡單高效。
● 擴展性強：支持按需引入和后編譯，輕量靈活；擴展性強，可以方便地基于現有組件實現二次開發。
[](https://wdd.js.org/img/images/20180207095110_mdSrCw_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#2-7-Mint-UI-Vue "2.7. Mint UI (Vue)")2.7. Mint UI (Vue)
基于 Vue.js 的移動端組件庫[詳情](https://mint-ui.github.io/#!/zh-cn)
[](https://wdd.js.org/img/images/20180207095129_EYQPfv_Screenshot.jpeg)
[](https://wdd.js.org/img/images/20180207095149_shP7k0_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#2-8-Weex-UI-Vue "2.8. Weex UI (Vue)")2.8. Weex UI (Vue)
`一個基于 Weex 的富交互、輕量級、高性能的 UI 組件庫`[詳情](https://alibaba.github.io/weex-ui/#/cn/)
[](https://wdd.js.org/img/images/20180207095205_GZN6wf_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#2-9-Onsen-UI-Vue-React-Angular "2.9. Onsen UI(Vue, React, Angular)")2.9. Onsen UI(Vue, React, Angular)
`最偏亮高效的開發HTML5應用和WEB apps, 支持angular, vue ,react`,[詳情](https://onsen.io/)
[](https://wdd.js.org/img/images/20180207095223_FfYrPd_Screenshot.jpeg)
# [](https://wdd.js.org/all-best-ui-frame.html#3-PC%E7%AB%AF "3. PC端")3\. PC端
## [](https://wdd.js.org/all-best-ui-frame.html#3-1-EasyUI "3.1. EasyUI")3.1. EasyUI
[](https://wdd.js.org/img/images/20180207095243_zIIavI_Screenshot.jpeg)
> easyui是一種基于jQuery的用戶界面插件集合。easyui為創建現代化，互動，JavaScript應用程序，提供必要的功能。[詳情](http://www.jeasyui.net/)
* 使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。
* easyui是個完美支持HTML5網頁的完整框架。
* easyui節省您網頁開發的時間和規模。
* easyui很簡單但功能強大的。
## [](https://wdd.js.org/all-best-ui-frame.html#3-2-Bootstrap "3.2. Bootstrap")3.2. Bootstrap
[](https://wdd.js.org/img/images/20180207095304_snl6Va_Screenshot.jpeg)
> 簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。[詳情](http://www.bootcss.com/)
## [](https://wdd.js.org/all-best-ui-frame.html#3-3-jQuery-UI "3.3. jQuery UI")3.3. jQuery UI
[](https://wdd.js.org/img/images/20180207095319_n66Uay_Screenshot.jpeg)
> jQuery UI 是建立在 jQuery JavaScript 庫上的一組用戶界面交互、特效、小部件及主題。無論您是創建高度交互的 Web 應用程序還是僅僅向窗體控件添加一個日期選擇器，jQuery UI 都是一個完美的選擇。
> jQuery UI 包含了許多維持狀態的小部件（Widget），因此，它與典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式，所以，只要您學會使用其中一個，您就知道如何使用其他的小部件（Widget）。[詳情](https://jqueryui.com/)
## [](https://wdd.js.org/all-best-ui-frame.html#3-4-SUI "3.4. SUI")3.4. SUI
[](https://wdd.js.org/img/images/20180207095334_yEhDb0_Screenshot.jpeg)
> SUI 是一套基于bootstrap開發的前端組件庫，同時她也是一套設計規范。
> 通過SUI，可以非常方便的設計和實現精美的頁面。[詳情](http://sui.taobao.org/sui/docs/index.html)
## [](https://wdd.js.org/all-best-ui-frame.html#3-5-ZUI "3.5. ZUI")3.5. ZUI
[](https://wdd.js.org/img/images/20180207095351_BLEw5e_Screenshot.jpeg)
> 一個基于 Bootstrap 深度定制開源前端實踐方案，幫助你快速構建現代跨屏應用。[詳情](http://zui.sexy/#/)
## [](https://wdd.js.org/all-best-ui-frame.html#3-6-Plane-UI "3.6. Plane UI")3.6. Plane UI
[](https://wdd.js.org/img/images/20180207095604_L0tf0x_Screenshot.jpeg)
> HTML5 跨終端響應式前端界面框架[詳情](https://pandao.github.io/planeui/)
## [](https://wdd.js.org/all-best-ui-frame.html#3-7-Semantic-UI "3.7. Semantic UI")3.7. Semantic UI
[](https://wdd.js.org/img/images/20180207095620_R0B6If_Screenshot.jpeg)
> Semantic UI 是一款語義化設計的前端開源框架，其功能強大，使用簡單，為設計師和開發師提供可復用的完美設計方案。[詳情](https://semantic-ui.com/)
## [](https://wdd.js.org/all-best-ui-frame.html#3-8-materialize "3.8. materialize")3.8. materialize
[](https://wdd.js.org/img/images/20180207095630_COJfPb_Screenshot.jpeg)
> 基于谷歌material design設計的框架[詳情](http://materializecss.com/)
## [](https://wdd.js.org/all-best-ui-frame.html#3-9-ElementUI-%EF%BC%88Vue%EF%BC%89 "3.9. ElementUI （Vue）")3.9. ElementUI （Vue）
Element由`餓了嗎`團隊開源，一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的組件庫，提供了配套設計資源，幫助你的網站快速成型。[詳情](http://element.eleme.io/#/zh-CN)
[](https://wdd.js.org/img/images/20180207095643_iqtE1s_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-10-iviewui-%EF%BC%88Vue%EF%BC%89 "3.10. iviewui （Vue）")3.10. iviewui （Vue）
一套基于 Vue.js 的高質量 UI 組件庫[詳情](https://www.iviewui.com/)
[](https://wdd.js.org/img/images/20180207095655_71FOMw_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-11-ANT-DESIGN-React "3.11. ANT DESIGN (React)")3.11. ANT DESIGN (React)
一套企業級的 UI 設計語言和 React 實現。
[https://ant.design/index-cn](https://ant.design/index-cn)
* 提煉自企業級中后臺產品的交互語言和視覺風格。
* 開箱即用的高質量 React 組件。
* 使用 TypeScript 構建，提供完整的類型定義文件。
* 基于 npm + webpack + dva 的企業級開發框架。
[](https://wdd.js.org/img/images/20180207095708_TkWO4d_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-12-MDUI "3.12. MDUI")3.12. MDUI
MDUI 是一套基于 Material Design 的前端框架。輕量級、多主題切換、響應式、無依賴。
[http://www.mdui.org/](http://www.mdui.org/)
[](https://wdd.js.org/img/images/20180207095724_pTKd1y_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-13-Amaze-UI-React-React "3.13. Amaze UI React (React)")3.13. Amaze UI React (React)
`基于 React.js 開發的 Web 組件庫`[詳情](http://amazeui.org/react/)
[](https://wdd.js.org/img/images/20180207095734_B7WvWB_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-14-Layui "3.14. Layui")3.14. Layui
> layui（諧音：類UI) 是一款采用自身模塊規范編寫的前端 UI 框架，`遵循原生 HTML/CSS/JS 的書寫與組織形式`，`門檻極低`，拿來即用。其外在極簡，卻又不失飽滿的內在，`體積輕盈，組件豐盈`，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。layui 首個版本發布于2016年金秋，她區別于那些基于 MVVM 底層的 UI 框架，卻并非逆道而行，而是信奉返璞歸真之道。準確地說，她更多是為服務端程序員量身定做，你無需涉足各種前端工具的復雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。[詳情](http://www.layui.com/doc/)
[](https://wdd.js.org/img/images/20180207095745_pOm9JI_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-15-UIkit "3.15. UIkit")3.15. UIkit
> 輕量級模塊化前端框架[詳情](https://getuikit.com/)
[](https://wdd.js.org/img/images/20180207095757_muC5KG_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-16-Vuetify-Vue "3.16. Vuetify (Vue)")3.16. Vuetify (Vue)
基于vue2的material風格組件化框架[詳情](https://vuetifyjs.com/)
[](https://wdd.js.org/img/images/20180207095808_9FR3VY_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-17-Semantic-UI-React-React "3.17. Semantic UI React(React)")3.17. Semantic UI React(React)
The official Semantic-UI-React integration.[detail](https://react.semantic-ui.com/introduction)
* jQuery Free
* Declarative API
* Augmentation
* Shorthand Props
* Sub Components
* Auto Controlled State
[](https://wdd.js.org/img/images/20180207095822_3kxbmi_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-18-element-react-React "3.18. element-react (React)")3.18. element-react (React)
element ui的react版本[詳情](https://eleme.github.io/element-react/#/zh-CN/quick-start)
[](https://wdd.js.org/img/images/20180207095833_MwiVC2_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-19-element-angular-angular "3.19. element-angular (angular)")3.19. element-angular (angular)
element ui的react版本[詳情](https://element-angular.faas.ele.me/guide/install)
[](https://wdd.js.org/img/images/20180207095843_HEcA0p_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-20-NG-ZORRO-angular "3.20. NG-ZORRO (angular)")3.20. NG-ZORRO (angular)
這里是 Ant Design 的 Angular^5.0.0 實現，開發和服務于企業級后臺產品。[詳情](https://ng.ant.design/#/docs/angular/introduce)
[](https://wdd.js.org/img/images/20180207095855_58jPPd_Screenshot.jpeg)
# [](https://wdd.js.org/all-best-ui-frame.html#4-PC-amp-%E7%A7%BB%E5%8A%A8%E7%AB%AF "4. PC & 移動端")4\. PC & 移動端
## [](https://wdd.js.org/all-best-ui-frame.html#4-1-ZanUI-Vue "4.1. ZanUI (Vue)")4.1. ZanUI (Vue)
> Vant ( \\?v?nt\\ ) 是有贊前端團隊基于有贊統一的規范實現的 Vue 組件庫，提供了一整套 UI 基礎組件和業務組件。[詳情](https://www.youzanyun.com/zanui)
* 48+ 個經過有贊線上業務檢驗的組件
* 單測覆蓋率超過 90%
* 完善詳實的 中英文文檔
* 專門的設計師團隊維護視覺規范，統一而優雅
* 支持 babel-plugin-import
* 支持 TypeScript
[](https://wdd.js.org/img/images/20180207100013_ZEC0Op_Screenshot.jpeg)
[](https://wdd.js.org/img/images/20180207100025_pmdTYa_Screenshot.jpeg)
- 學習網站
- iframe
- 跨域
- 渲染數據，防止內存泄漏
- 工具類
- 一般使用方法
- 獲取url（路由）參數
- HTML標簽轉義
- 轉義html標簽
- 加入收藏夾
- 提取頁面代碼中所有網址
- 動態加載腳本文件
- 返回頂部的通用方法
- 實現base64解碼
- 確認是否是鍵盤有效輸入值
- 全角半角轉換
- 版本對比
- 壓縮CSS樣式代碼
- 字符串長度截取
- 時間日期格式轉換
- 返回腳本內容
- 格式化CSS樣式代碼
- 獲取cookie值
- 獲得URL中GET參數值
- 獲取移動設備初始化大小
- 獲取頁面高度
- 獲取頁面scrollLeft
- 獲取頁面scrollTop
- 獲取頁面可視高度
- 獲取頁面可視寬度
- 獲取頁面寬度
- 獲取移動設備屏幕寬度
- 判斷是否移動設備
- 判斷是否是移動設備訪問
- 加載樣式文件
- 清除腳本內容
- 時間個性化輸出功能
- 金額大寫轉換函數
- 清除空格
- 隨機數時間戳
- 實現utf8解碼
- 返回字符串構成種類(字母，數字，標點符號)的數量
- 清除所有中文字符(包括中文標點符號)
- 清除所有中文字符及空格
- 校驗是否包含空格
- 校驗是否包含中文字符(包括中文標點符號)
- 校驗是否為網址
- 接成URL帶參數
- 獲取瀏覽器名稱
- 郵箱
- 手機號碼
- 根據url地址下載
- el是否包含某個class
- el添加某個class
- el去除某個class
- 獲取滾動的坐標
- 滾動到頂部
- el是否在視口范圍內
- 洗牌算法隨機
- 劫持粘貼板
- 嚴格的身份證校驗
- 隨機數范圍
- 將阿拉伯數字翻譯成中文的大寫數字
- 將數字轉換為大寫金額
- 檢測密碼強度
- 字符轉換首字大小寫
- 去除空格
- 最大值與最小值和平均值
- 函數節流器
- 16進制顏色轉RGBRGBA字符串
- 追加url參數
- base64文件轉文件和文件轉base64
- base64轉換為blob和blob轉換為file
- 生成 uid 或者 uuid 4種方法
- 正則
- 按復制快捷鍵或者右鍵復制
- 表情
- 獲取dom某個屬性上的值
- 獲取dom某個屬性的值
- 獲取系統
- 去除emoji表情符號
- 本地文件轉換 Bool url 訪問地址
- 禁止ios 擊穿后底部還能滑動
- 將數字負數轉換為字符串類型
- 將字符串類型數字判斷正負
- 判斷是否有小數點
- 判斷是否有科學技術法
- 去除0123字符串類型的數字
- 瀏覽器共享屏幕
- 兼容navigator.getUserMedia與AudioContext
- 音頻軌跡
- vue
- vue 技巧
- vue 2.xx 腳手架快速搭建環境
- vue 優化模塊
- css
- input或textarea_placeholder
- 布局巧
- form/formData
- form
- formData
- Visual-Studio-code
- VS Code
- vscode-fileheader 生成注釋
- View In Browser（右鍵瀏覽器預覽）
- Chinese (Simplified) Language（中文語音包）
- 北京地攤位置
- 輸入框使用第三方語音輸入文本問題
- adb 文檔
- serve后臺
- docker
- 介紹
- 安裝
- 常用命令
- mysql
- 安裝
- 破解Navicat Premium 無限試用
- 源碼技巧
- 實例化
- 判斷是否傳實例化對象
- 實例化構造函數
- ui 框架