H5開(kāi)發(fā)框架:10個(gè)H5前端框架介紹

原文發(fā)布于微信公眾號(hào) - 非著名程序員（non-famous-coder）

作為一名在前端死纏爛打6年并且懶到不行的攻城獅，這幾年閱過(guò)很多從知名到很知名的前端框架，本來(lái)想拿15-20個(gè)框架來(lái)分享一下，但在跟幾個(gè)前輩討教寫(xiě)文章的技巧時(shí)果斷被無(wú)情的打擊了，所以這里我還是低調(diào)的只拿出10個(gè)框架來(lái)個(gè)大鍋亂燉，湊夠字?jǐn)?shù)也就全劇終了。下面的框架也沒(méi)有什么先后順序之分，我想到啥就寫(xiě)啥啦( 作為前端，我一向都這么的任性 ^_^ )。

Bootstrap

首先說(shuō) Bootstrap，估計(jì)你也猜到會(huì)先說(shuō)或者一定會(huì)有這個(gè)( 呵呵了 )，這是說(shuō)明它的強(qiáng)大之處，擁有框架一壁江山的勢(shì)氣。自己剛?cè)氲赖臅r(shí)候本著代碼任何一個(gè)字母都得自己敲出來(lái)?yè)跷艺邚U的決心，來(lái)讓自己成長(zhǎng)。結(jié)果受到周圍各種基友的引誘開(kāi)始了 Bootstrap 旅程。本人雖然是個(gè)設(shè)計(jì)+前端的萬(wàn)里有一的人才，但是老天只讓我會(huì)用 PS 和各種設(shè)計(jì)工具卻不給我跟設(shè)計(jì)妹子一樣的審美，所以這也是我最初選擇 Bootstrap 的原因之一，它讓我做出來(lái)的東西好歹能在妹子面前裝個(gè)逼，不過(guò)時(shí)間長(zhǎng)了難免覺(jué)得 Bootstrap 美的讓人煩躁，但好在它的每個(gè)版本都會(huì)有很大的改變，不會(huì)讓人覺(jué)得自己做的網(wǎng)站會(huì)跟很多網(wǎng)站撞臉。Bootstrap 的用法及其簡(jiǎn)單( 這也可能就是 Bootstrap 作者閱攻城士無(wú)數(shù)，了解他們痛的結(jié)果)，以至于是個(gè)小前端都可以快速上手，幾乎沒(méi)什么學(xué)習(xí)成本。

官網(wǎng)：http://getbootstrap.com/Github：https://github.com/twbs/bootstrap/作者：Mark Otto 和Jacob Thornton    Star：93,112

總結(jié)：Bootstrap 最大的優(yōu)勢(shì)就是它非常流行，流行就代表你有問(wèn)題就有很多人幫你解決問(wèn)題，就代表裝逼它就是利器，還有就是界面比較和諧，容易上手，關(guān)注它的童鞋應(yīng)該發(fā)現(xiàn)最新 V4 版也開(kāi)始支持 FlexBox 布局，這是非常好的升級(jí)體驗(yàn)。劣勢(shì)是 class 命名不夠語(yǔ)義化，并且各種縮寫(xiě)，以至于我離了文檔就是個(gè)菜，最近開(kāi)始整混合 APP，選框架的時(shí)候首選就是它，但之前搞 PC 一直沒(méi)注意，后來(lái)搞混合右鍵屬性看它的時(shí)候，瞬間一陣涼風(fēng)襲來(lái)，Bootstrap 好小，小到我只好選擇別的框架。

Amaze UI

第二個(gè)介紹的是妹子UI，最初使用它是因?yàn)楸咀鹩龅搅艘粋€(gè)愛(ài)糾結(jié)細(xì)節(jié)設(shè)計(jì)士，有一次她跟我的字體較上真了，結(jié)果一句頂萬(wàn)句的BOOS 夸了她，我只好根據(jù)她的想法去解決，結(jié)果最后找到了Amaze UI 框架( 我不介意你叫我懶淫)，按照官方的話說(shuō)就是“基于社區(qū)開(kāi)源項(xiàng)目構(gòu)建的一個(gè)跨屏前端框架，以移動(dòng)優(yōu)先，從小屏到大屏，最終實(shí)現(xiàn)所有屏幕適配，適應(yīng)移動(dòng)互聯(lián)潮流”。但其實(shí)我就是看中它能解決國(guó)內(nèi)瀏覽器存在的跨屏適配和兼容性問(wèn)題。

官網(wǎng)：http://amazeui.org/Github：https://github.com/amazeui/amazeui所屬公司：云適配   Star：6710

總結(jié)：Amaze UI 總的來(lái)說(shuō)加入更多符合中國(guó)市場(chǎng)特性的元素，框架對(duì)跨屏、適配都做了比較好的處理并且準(zhǔn)備了一系列的常用網(wǎng)頁(yè)組件，為減少搞兼容、適配各種敲鍵盤的加班狗們的工作時(shí)間做了不小的貢獻(xiàn)?？蚣苓€對(duì)中文排版優(yōu)化，兼容中國(guó)本土主流瀏覽器、輕量化，不僅適用于桌面端，更適合移動(dòng)端。

AUI

第三個(gè)是最近剛起來(lái)的AUI，雖然作者聲稱是專為APICloud開(kāi)發(fā)者設(shè)計(jì)的一套UI框架，但實(shí)際它還是解決了很多移動(dòng)前端開(kāi)發(fā)的普遍問(wèn)題，是主要面向混合開(kāi)發(fā)的 CSS 框架?？雌饋?lái)作者比較猖狂，各種高級(jí) CSS3 遍地使用，這讓我也不得不去查查這些個(gè) CSS3 的兼容性。不負(fù)眾望果然選的都是兼容不錯(cuò)的屬性，哈哈了一頓激動(dòng)從前輩手上大膽認(rèn)識(shí)了幾個(gè)好東西，并且框架還提供了聊天界面、計(jì)數(shù)列表等組件，解決了很多復(fù)雜的讓我罵娘的布局，現(xiàn)在可以直接拿走就用。

Github：https://github.com/liulangnan/aui官網(wǎng)：http://www.auicss.com/作者：流浪男    Star：92

總結(jié)：這個(gè)框架對(duì)我來(lái)說(shuō)有個(gè)優(yōu)點(diǎn)就是純 CSS 框架，自己以前也就用過(guò) Pure，自己有點(diǎn) JS 能力，如果不是復(fù)雜的效果，找個(gè)純 CSS 框架自己隨便改改就可以，而現(xiàn)在 CSS3 也已經(jīng)能夠做到動(dòng)畫(huà)，效率、質(zhì)量、高效全兼顧，所以還是選擇了這種 CSS 框架。有一點(diǎn)覺(jué)得不滿的是這框架的文檔真的好那什么，說(shuō)好的高大上呢。

Frozen UI

有段時(shí)間看到 QQ 瞬間高大上了，后來(lái)四處打聽(tīng)，原來(lái) QQ 客服端也用了混合開(kāi)發(fā)，其中QQ會(huì)員前端用的是 Frozen UI，并且這套框架開(kāi)源，欣喜若狂耐不住心里的寂寞直接上手試了一遍，初體驗(yàn)感覺(jué)基礎(chǔ)樣式效果簡(jiǎn)單色調(diào)清爽，有個(gè)比較活躍的社區(qū)所以組件什么的也比較豐富。

Github：https://github.com/frozenui/frozenui官網(wǎng)：http://frozenui.github.io/作者： QQVIP FD Team    Star：1,067

總結(jié)：如果拿 Frozen UI 配合一些如 APICloud 用來(lái)做混合 APP感覺(jué)就太酷了，或者原生的火雞們拿去嵌套在應(yīng)用中做前端開(kāi)發(fā)，這個(gè)框架對(duì) android 2.3 +、ios 4.0 + 做了兼容，或者拿來(lái)做 Web App 也是極好的選擇，劣勢(shì)的話從 UI 層面就可以看到了，誰(shuí)讓它是出生在QQ會(huì)員前端的呢。

WeUI

WeUI和 FrozenUI都屬于比較專一的框架，WeUI比FrozenUI更專一，話說(shuō)連個(gè)官網(wǎng)都不搞，所有答疑都在 gitHub Issues 解決了，這個(gè)框架極其簡(jiǎn)單，體積當(dāng)然就不用說(shuō)了，模塊也就 7 個(gè)左右，不過(guò)體量小做的卻不錯(cuò)，口碑看 star 就夠了，框架從 16/1/23 發(fā)版至今 github star 超過(guò) 7K,不過(guò)也不排除用戶沒(méi)地方發(fā)泄所以都跑到 git 上來(lái)，哈哈。

Github：https://github.com/weui/weuiDEMO：http://weui.github.io/weui/Star：7,129

總結(jié)：看完微信設(shè)計(jì)團(tuán)隊(duì)設(shè)計(jì)的這套 DEMO，如果要做微信公眾，這個(gè)二話不說(shuō)必然是首選了?？蚣懿缓玫牡胤胶?jiǎn)而言之就是框架本身應(yīng)該就沒(méi)考慮過(guò)讓用戶用到非微信的場(chǎng)景之下。

SUI

“SUI 是一套基于bootstrap開(kāi)發(fā)的前端組件庫(kù)，同時(shí)它也是一套設(shè)計(jì)規(guī)范。通過(guò)SUI，可以非常方便的設(shè)計(jì)和實(shí)現(xiàn)精美的頁(yè)面”。果然還是直接引用官方給的枯燥無(wú)味廣告要節(jié)省自己的腦細(xì)胞( 囧… )，當(dāng)然了就像廣告說(shuō)的，如果你之前用過(guò) Bootstrap，那么可以輕松轉(zhuǎn)向 SUI，這可能就是淘寶給前端屌絲們的福利了。

Github：https://github.com/sdc-alibaba/sui官網(wǎng)：http://sui.taobao.org/sui/docs/index.htmlStar：120

Semantic UI

倒數(shù)第三個(gè)是 Semantic UI，接觸這個(gè)框架還是因?yàn)锽ootstrap，Semantic UI 剛上線 github 就受到大量開(kāi)發(fā)者的關(guān)注，以至于很多人拿它倆對(duì)比各種挑刺各種夸，是好是壞不能單憑別人三句四句就抬起手指開(kāi)始贊，用了以后感覺(jué) UI 上跟 Bootstrap 沒(méi)太多的區(qū)別，不過(guò)代碼命名規(guī)范上卻相差甚大，本人認(rèn)為 Semantic UI 是不是就想做的不一樣，它的命名全是采用復(fù)合的方式，類名特別的離散，用的時(shí)候你得很小心自己擴(kuò)展或者新增的 class 命名與它的類名沖突。

官網(wǎng)：http://www.semantic-ui.cn/Github：https://github.com/semantic-org/semantic-ui/

Foundation

Foundation 算是框架界的元老啦，都說(shuō)框架去的早，而這個(gè)框架一直到現(xiàn)在依然這么的熱門，如果你比較介意 Bootstrap 開(kāi)發(fā)撞臉的尷尬事情，那么你可以考慮使用 Foundation 。即使你使用預(yù)定義的 UI 元素, 也不會(huì)與其他網(wǎng)站太像，就像官方說(shuō)的給開(kāi)發(fā)者更靈活的框架體驗(yàn)。

官網(wǎng)：http://foundation.zurb.com/Github：https://github.com/zurb/foundation-sitesStar：22,736

UiKit

UIkit是YOOtheme團(tuán)隊(duì)開(kāi)發(fā)的，在許多WordPress主題中都有應(yīng)用(也就是如果你是個(gè) WordPress 愛(ài)好者，那么這個(gè)框架應(yīng)該比較適合深究)，并且框架能夠通過(guò)GUI編輯器和手動(dòng)編輯，所以它提供了一個(gè)靈活、強(qiáng)大的自定義機(jī)制?？蚣芙柚鶯ESS、jQuery、normalize.css及FontAwesome開(kāi)源項(xiàng)目的獨(dú)有特點(diǎn)，整合成了這么一款輕量級(jí)、模塊化的前端框架。

官網(wǎng)：http://www.getuikit.com/Github：https://github.com/uikit/uikit作者：YOOtheme Star：6,372

Pure

終于最后一個(gè)了，我和你一樣好開(kāi)森 (～￣▽￣)～)，這個(gè)框架是我在做管理系統(tǒng)時(shí)接觸的，選擇使用也是因?yàn)榭蚣苄∏?，并且是?CSS，沒(méi)有太多的牽扯，好用來(lái)與其他框架快速結(jié)合使用。

官網(wǎng)：http://purecss.io/Github：https://github.com/yahoo/pure/Star：13,592

介紹完畢，估計(jì)你應(yīng)該看出來(lái)了，我使用框架真的也就是遇到了需求，才選擇了某個(gè)框架，所以框架之間并沒(méi)有什么好與特好之分，只能說(shuō)你的需求是什么，這個(gè)框架合適不合適你去用，各種框架用起來(lái)也都大致差不多，會(huì)用一個(gè)其他的上手也就都變得簡(jiǎn)單容易上手，我覺(jué)得能寫(xiě)框架的人都是室外高人。