1. 程式人生 > >前端常用的框架總結

前端常用的框架總結

前端的技術日漸更新,最近得空,花了一上午的時間,將前端常見的UI框架總結了一下,在開發的過程之中,有了這些,不斷能夠提高自己的工作效率,還可以在工作之餘瞭解更多。希望大家喜歡。

1.Layui

官方網址:http://www.layui.com/

Layui是一款採用自身模組規範編寫的國產前端UI框架,遵循原生HTML/CSS/JS的書寫與組織形式,門檻極低,拿來即用。從核心程式碼到API的每一處細節都經過精心雕琢,非常適合介面的快速開發。,從核心程式碼到API的每一處細節都經過精心雕琢,非常適合介面的快速開發。Layui還很年輕,首個版本釋出於2016年金秋,她區別於那些基於MVVM底層的UI框架,卻並非逆道而行,而是信奉返璞歸真之道。準確地說,她更多是為服務端程式設計師量身定做,你無需涉足各種前端工具的複雜配置,只需面對瀏覽器本身,讓一切你所需要的元素與互動,從這裡信手拈來。

經典模組化前端框架

 

2.NEC:

官方網址:http://nec.netease.com/case

你是否常常碰到以下問題:你總是看不懂他寫的程式碼,或者讀起來很吃力;你需要改他的程式碼卻無從下手,或總是要去問他這裡是什麼改了會不會影響其他程式碼;你和他一起開發一個產品,你總是怕程式碼和他有衝突或互相影響;你的程式碼在多次維護任務之後變得越來越臃腫,越來越難以維護,解決以上問題只需一種方法——讀我們的規範!

國產web前端框架推薦之–NEC

 

3:amaze UI

官方網址:http://amazeui.org/

之前公司的網站被黑客攻擊之後,整個網站的東西都用不了了,處於丟失和癱瘓的狀態,樓主毫不猶豫在這個網站上找了一個框架,僅僅兩三天的時間,就成功挽救了這一糟糕的局面,還是要感謝我們這強大的框架,妹子UI,適配pc端和移動端,功能齊全,網站開發什麼的,都SOeasy

中國首個開源 HTML5 跨屏前端框架.

 

4.NEJ

官方網址:http://nej.netease.com/

NEJ全稱:Nice Easy Javascript 是由網易前端組工程師們發起建立的簡潔,美觀,真正的跨平臺web前端開發框架;在適配性上支援桌面及移動平臺、瀏覽器及混合應用開發,補丁模式無縫擴充套件適配平臺,配置方式靈活定製目標平臺

 

5.bootstrap

框架官方網址:http://www.bootcss.com/

這個我就不多說了,大多數人都在用這個框架來開發,官方文件的API完整可靠,還有各種Bootstrap相關優質專案推薦,前端開發首選框架

簡潔、直觀、強悍的前端開發框架,讓web開發更迅速、簡單。

 

6:Foundation

官方網址:http://www.foundcss.com/

Foundation 是一個易用、強大而且靈活的響應式前端框架,用於構建基於任何裝置上的響應式網站、 Web應用和電子郵件。結構語義化、移動裝置優先、完全可定製。

響應式前端框架

 

7.Jquery程式碼庫

官方網址:http://www.jqueryui.org.cn/

基於Jquery的開源網頁使用者介面程式碼庫:

 

8.jQuery外掛庫

官方網址:http://www.jq22.com/

史上最全的jQuery效果,包括了開發所需要的所有需求的demo,如果有不會的東西,就來jQuery外掛庫吧,這裡總有一些你想要的,還在等什麼?

 

9.FrozenUI

官方網址:http://frozenui.github.io/

隨心所用的樣式元件,更顯靈動的JS外掛,酷炫好玩的案例秀,提供的Animationcase,把業務上有趣好玩的案例沉澱下來,幫助日後能更快速找到設計靈感。FrozenUI是一個開源的簡單易用,輕量快捷的移動端UI框架。基於手Q樣式規範,選取最常用的元件,做成手Q公用離線包減少請求,升級方式友好,文件完善,目前全面應用在騰訊手Q增值業務中。

移動端開發專用框架:

 

10:SUI

官方網址:http://m.sui.taobao.org/

SUI是一套基於bootstrap開發的前端元件庫,同時她也是一套設計規範。通過SUI,可以非常方便的設計和實現精美的頁面。同時sui還有移動端版本msui,msui是阿里巴巴共享業務事業部UED團隊的作品。目的是為了手機H5頁面提供一個常用的元件庫,減少重複工作。

搭建手機H5應用:

 

11:AUI

官方網址:http://www.auicss.com/

AUI2.0是一套全新的AUI框架,在1.X基礎上進行了重新架構。結合實際專案出發,站在開發者和專案的角度,重新定義AUI框架。在2.0中使用了大量彈性響應式佈局,採用容器+佈局結構+控制元件的巢狀形式,方便開發者快速佈局樣式。我們充分吸取了AUI使用者的反饋意見和借鑑了市場上其他優秀UI框架,完成了2.0版本的開發。2.0遵循GoogleMaterial 設計規範,使用MIT開源協議。

 

12:MUI:

官方網址:http://dev.dcloud.net.cn/mui/

最接近原生APP體驗的高效能前端框架,相信這個大家都不陌生:鑑於之前的很多前端框架(特別是響應式佈局的框架),UI控制元件看起來太像網頁,沒有原生感覺,因此追求原生UI感覺也是我們的重要目標MUI以iOS平臺UI為基礎,補充部分Android平臺特有的UI控制元件

 

13:Semantic UI

官方網址:http://www.semantic-ui.cn/

Semantic作為一款開發框架,幫助開發者使用對人類友好的HTML語言構建優雅的響應式佈局。更快地設計賞心悅目的網站

 

14.Aliceui

官方網址:http://www.oschina.net/p/aliceui?fromerr=mgWZvlr0

Aliceui是支付寶的樣式解決方案,是一套精選的基於 spm 生態圈的樣式模組集合,是 Arale 的子集,也是一套模組化的樣式命名和組織規範,是寫 CSS 的更好方式。

 

15.H-ui

官網地址:http://www.h-ui.net/

H-ui是輕量級前端框架,簡單免費,相容性好,適用於中國網站。H-ui是一個相對成長比較慢的前端框架,相比目前行業眾多框架還有很多不足。但初心不改,實實在在把事做好,做使用者最喜歡的框架。

 

16.Weui

官網地址:https://github.com/weui/weui

weUI是一套同微信原生視覺體驗一致的基礎樣式庫,由微信官方設計團隊為微信 Web開發量身設計,可以令使用者的使用感知更加統一。包含button、cell、dialog、 progress、toast、article、actionsheet、icon等各式元素。

 

17.YDUI Touch

官網地址:http://www.ydui.org/

YDUI Touch 專為移動端打造,在技術實現、互動設計上相容主流移動裝置,保證程式碼輕、效能高;使用 Flex 技術,靈活自如地對齊、收縮、擴充套件元素,輕鬆搞定移動頁面佈局;實現強大的螢幕適配佈局,等比例適配所有螢幕。什麼?用得不開心?輕鬆切換 px;自定義JavaScript元件、Less檔案、Less變數,定製一份屬於自己的YDUI;

一隻注重審美,且效能高效的移動端&微信UI。

 

18.ZUI

官方網址:http://zui.sexy/

簡友補充的,現在添上,一個基於 Bootstrap 深度定製開源前端實踐方案,幫助你快速構建現代跨屏應用。基於 Flex 設計,支援移動端全部主流瀏覽器,支援 Android 微信內建瀏覽器

 

開源html5跨屏框架

19:EasyUI

官方網址:http://www.jeasyui.net/

easyui是一種基於jQuery的使用者介面外掛集合。為建立現代化,互動,JavaScript應用程式,提供必要的功能。使用easyui你不需要寫很多程式碼,你只需要通過編寫一些簡單HTML標記,就可以定義使用者介面。完美支援HTML5網頁的完整框架。節省您網頁開發的時間和規模。

21:pure

官方網址:http://purecss.org/layouts/

Pure精心設計,只為可以在任何Web專案中使用。為了例證這一點,我們製作瞭如下幾個模板。這些模板都是響應式的,並且沒有使用任何JavaScript。

原文作者:祈澈姑娘  技術部落格:https://www.jianshu.com/u/05f416aefbe1

關注「程式設計微刊」公眾號 ,在微信後臺回覆「領取資源」,獲取IT資源200G乾貨大全。