基于框架的web前端（Bootstrap和MUI）之比較

◆嚴(yán)春燕 戴仕明

（江西農(nóng)業(yè)大學(xué) 江西 330045）

基于框架的web前端（Bootstrap和MUI）之比較

◆嚴(yán)春燕 戴仕明

（江西農(nóng)業(yè)大學(xué) 江西 330045）

本文主要對(duì)目前兩種比較流行的基于Bootstrap和MUI框架的web前端設(shè)計(jì)進(jìn)行了研究。首先介紹了web前端框架的概念和優(yōu)點(diǎn)，再介紹Bootstrap和MUI的核心思想、適用情況以及應(yīng)用，最后通過在跨域性、規(guī)范性、幫助性、開發(fā)速度、功能上以及UI組件上對(duì)兩種框架進(jìn)行比較，以便軟件開發(fā)人員選擇項(xiàng)目適合的前端框架。

Bootstrap；MUI；前端框架

0 引言

隨著互聯(lián)網(wǎng)的不斷發(fā)展以及各式各樣移動(dòng)端設(shè)備的不斷涌現(xiàn)[1]，前端工程師的工作也變得越來越復(fù)雜，由原來的前端必備的三要素HTML、CSS、Javascript演變成HTML5、CSS3、jQuery。相對(duì)于使用臺(tái)式機(jī)，越來越多的人使用移動(dòng)設(shè)備來訪問互聯(lián)網(wǎng)，這意味著，前端工程師開發(fā)出的應(yīng)用不僅要適應(yīng)PC端，還要適應(yīng)層出不窮的移動(dòng)端設(shè)備[2]。那么對(duì)于前端工程師，如何在龐大的移動(dòng)端領(lǐng)域和PC端呈現(xiàn)以及適配我們的產(chǎn)品，這至關(guān)重要。這個(gè)時(shí)候前端框架閃亮登場，它可以使代碼的邏輯更加清晰，提高代碼的復(fù)用性，優(yōu)化web應(yīng)用的性能，便于維護(hù)。

1 web前端框架

1.1 框架概述

前端框架是隨著軟件工程的發(fā)展產(chǎn)生的，是面向一個(gè)領(lǐng)域提供的一套解決方案，將實(shí)現(xiàn)相同功能的代碼封裝在一起，進(jìn)行抽象，最后形成一個(gè)框架。一個(gè)框架可以在多個(gè)項(xiàng)目中使用，可以提高開發(fā)效率，如果使用一個(gè)前端框架，就應(yīng)遵循其框架所設(shè)置的規(guī)則，對(duì)程序進(jìn)行規(guī)范。

1.2 框架的優(yōu)點(diǎn)

（1）降低開發(fā)成本和周期。對(duì)于前端工程師來說，既要提供web頁面，又要考慮各瀏覽器和不同設(shè)備的兼容性，還要顧及web前端與后臺(tái)交互以及模塊化，因此選擇一個(gè)適合的前端框架，對(duì)整個(gè)項(xiàng)目的進(jìn)度和開發(fā)成本上將會(huì)大大縮短。

（2）維護(hù)性好。框架采用分層思想進(jìn)行設(shè)計(jì)，將底層數(shù)據(jù)與視圖分隔開，開發(fā)應(yīng)用的靈活性也會(huì)更好，便于維護(hù)。

（3）高聚合，低耦合[3]，擴(kuò)展性好。提高軟件開發(fā)的效率。選擇框架進(jìn)行軟件開發(fā)，可以復(fù)用框架里的思路和代碼，在現(xiàn)有框架的基礎(chǔ)上進(jìn)行功能擴(kuò)展，提高軟件開發(fā)效率和開發(fā)質(zhì)量。

2 Bootstrap框架及其應(yīng)用

2.1 概念

Bootstrap是由Twitter開發(fā)的基于HTML、CSS、Javascript的框架，是一套快速開發(fā)web應(yīng)用程序的前端開發(fā)[4]工具包，它簡潔靈活，一直是GitHub上的熱門開源項(xiàng)目，也是目前很受歡迎的前端框架。

Bootstrap在 3.0 版本之前，都是以桌面優(yōu)先，在 3.0 版本后，采用移動(dòng)設(shè)備優(yōu)先[5]，可以很好的支持移動(dòng)平臺(tái)，然后才考慮更好的支持桌面，所以 Bootstrap對(duì)手機(jī)的支持也很好。Bootstrap還使用了最新的跨瀏覽器兼容技術(shù)，提供了一系列簡潔的UI組件、柵格化系統(tǒng)以及Javascript插件。

Bootstrap是用動(dòng)態(tài)語言LESS寫的，主要包括以下四部分內(nèi)容：

（1）基本結(jié)構(gòu)：全局樣式、響應(yīng)式的柵格化布局系統(tǒng)。默認(rèn)情況下Bootstrap并不開啟響應(yīng)式布局的功能，需要手動(dòng)開啟。

（2）基礎(chǔ)CSS：包含了基礎(chǔ)的HTML頁面元素樣式，比如表格、表單、按鈕、圖片等。

（3）布局組件：大量可重用的組件，比如下拉菜單、輸入框組、導(dǎo)航欄、進(jìn)度條、列表組、警告框等。

（4）Javascript插件：包含很多jQuery插件，可實(shí)現(xiàn)頁面的動(dòng)態(tài)頁面效果和交互設(shè)計(jì)，比如提示效果、滾動(dòng)監(jiān)聽、輸入提示等。

實(shí)際上對(duì)于入門者來說，Bootstrap擁有完善的文檔，不僅可以加快學(xué)習(xí)進(jìn)度，而且學(xué)習(xí)成本也不高，只需要掌握基本的HTML、CSS和Javascript就可使用，因此對(duì)新手來說，Bootstrap框架是一個(gè)不錯(cuò)的選擇。Bootstrap基本適用于后端和設(shè)計(jì)師，如果你需要快速構(gòu)建一個(gè)原型、管理界面，或者在構(gòu)建網(wǎng)站前端、瀏覽器兼容性方面缺乏經(jīng)驗(yàn)，那么 Bootstrap會(huì)在一定程度上幫助到你。

2.2 應(yīng)用

可以到Bootstrap中文網(wǎng)下載最新版，要使用Bootstrap必須要有 jQuery，也可以使用官網(wǎng) jQuery壓縮版引用地址，使用Bootstrap插件之前必須先引入 jQuery，因?yàn)?Bootstrap是基于jQuery的，核心代碼如下：

優(yōu)先響應(yīng)移動(dòng)端這一功能是Bootstrap在3.0版本后最大的一個(gè)特點(diǎn)，為了網(wǎng)頁更好地適應(yīng)設(shè)備和縮放功能，應(yīng)添加viewport元素，代碼如下：

content="width=device-width,initial-scale=1.0,

maximum-scale=1.0,user-scalable=no">

3 MUI框架及其應(yīng)用

3.1 概念

MUI框架是基于ratchet框架開發(fā)的，核心還是webview。它的UI設(shè)計(jì)理念是以iOS 7為基礎(chǔ)，補(bǔ)充部分Android特有控件，因此設(shè)計(jì)出來的控件更符合App的體驗(yàn)。MUI通過預(yù)加載、CSS動(dòng)畫、多個(gè)webview顯示隱藏等技術(shù)，解決了切頁白屏、下拉刷新不流暢、轉(zhuǎn)場動(dòng)畫卡頓等問題。MUI開發(fā)符合HTML5+規(guī)范，因此也提供了很多與手機(jī)原生[6]交互的接口。

MUI還提供了一系列的UI組件，比如折疊面板、消息框、列表、輪播組件、開關(guān)等，MUI框架中的Javascript代碼，也是為UI服務(wù)的，沒有封裝DOM操作。

對(duì)于開發(fā)一套代碼，既能實(shí)現(xiàn) wap、微信公眾號(hào)、iOS和Android的App以及流應(yīng)用，又能保證在App平臺(tái)上有更好的體驗(yàn)，MUI框架對(duì)于提高開發(fā)效率有著巨大的幫助，原因在于它能實(shí)現(xiàn)多端發(fā)布功能，處理平臺(tái)差異性問題，尤其是HTML5+規(guī)范擴(kuò)展的瀏覽器，在并不支持的API上，能夠降級(jí)兼容或動(dòng)態(tài)去除方案。

3.2 應(yīng)用

提到 MUI，不得不提到 HBuilder，HBuilder顧名思義是為HTML開發(fā)的，它是DCloud提供的基于MUI框架的一款飛速編碼的編輯器，提供各種快捷鍵、縮寫方式以及完整的語法提示，大大提高了前端工程師的開發(fā)效率。首先在 HBuilder官網(wǎng)http://www.dcloud.io點(diǎn)擊下載，下載最新版的HBuilder，安裝，打開；然后依次點(diǎn)擊文件→新建→選擇web項(xiàng)目/App項(xiàng)目；再創(chuàng)建HTML頁面，選擇”含mui的html”模板。可縮寫代碼，出現(xiàn)代碼提示，產(chǎn)生代碼塊來減少大量重復(fù)代碼工作。比如 sc回車，st回車，可快速完成script、style標(biāo)簽輸入。還可以開啟邊改邊看模式，每次保存都會(huì)自動(dòng)刷新顯示當(dāng)前頁面。

表1 Bootstrap和MUI綜合比較表

?

4 結(jié)束語

本文在前端框架方面對(duì)Bootstrap和MUI進(jìn)行了比較，希望對(duì)web前端框架研究以及前端開發(fā)人員能有所幫助，這兩種框架各有優(yōu)缺點(diǎn)，在項(xiàng)目開發(fā)中也可以幫助開發(fā)人員應(yīng)根據(jù)具體的項(xiàng)目需求，選擇合適的框架。

[1]馬敏，王旗.中國移動(dòng)互聯(lián)網(wǎng)現(xiàn)狀與發(fā)展趨勢(shì)分析[J].互聯(lián)網(wǎng)天地，2014.

[2]張志禎.移動(dòng)學(xué)習(xí)的跨平臺(tái)開發(fā)技術(shù)[J].中國教育網(wǎng)絡(luò)，2013.

[3]李沛武，鮑培文.面向?qū)ο笙到y(tǒng)中耦合度量的研究[J].南昌水專學(xué)報(bào)，2000.

[4]于春娜，王晨升，楊光，郭世龍，劉豐. Web前端MVC框架的意義研究[J].產(chǎn)業(yè)與科技論壇，2014.

[5]賈英霞.淺談 Bootstrap制作響應(yīng)式網(wǎng)站布局[J].福建電腦，2015.

[6]徐隆龍，李瑩，白靜.移動(dòng)混合開發(fā)框架[J].計(jì)算機(jī)系統(tǒng)應(yīng)用，2014.

[7]Bootstrap官網(wǎng)：http://bootstrap.evget.com/.

[8]MUI官網(wǎng)：http://www.dcloud.io/.