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

◆嚴春燕 戴仕明

（江西農業大學 江西 330045）

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

◆嚴春燕 戴仕明

（江西農業大學 江西 330045）

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

Bootstrap；MUI；前端框架

0 引言

隨著互聯網的不斷發展以及各式各樣移動端設備的不斷涌現[1]，前端工程師的工作也變得越來越復雜，由原來的前端必備的三要素HTML、CSS、Javascript演變成HTML5、CSS3、jQuery。相對于使用臺式機，越來越多的人使用移動設備來訪問互聯網，這意味著，前端工程師開發出的應用不僅要適應PC端，還要適應層出不窮的移動端設備[2]。那么對于前端工程師，如何在龐大的移動端領域和PC端呈現以及適配我們的產品，這至關重要。這個時候前端框架閃亮登場，它可以使代碼的邏輯更加清晰，提高代碼的復用性，優化web應用的性能，便于維護。

1 web前端框架

1.1 框架概述

前端框架是隨著軟件工程的發展產生的，是面向一個領域提供的一套解決方案，將實現相同功能的代碼封裝在一起，進行抽象，最后形成一個框架。一個框架可以在多個項目中使用，可以提高開發效率，如果使用一個前端框架，就應遵循其框架所設置的規則，對程序進行規范。

1.2 框架的優點

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

（2）維護性好。框架采用分層思想進行設計，將底層數據與視圖分隔開，開發應用的靈活性也會更好，便于維護。

（3）高聚合，低耦合[3]，擴展性好。提高軟件開發的效率。選擇框架進行軟件開發，可以復用框架里的思路和代碼，在現有框架的基礎上進行功能擴展，提高軟件開發效率和開發質量。

2 Bootstrap框架及其應用

2.1 概念

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

Bootstrap在 3.0 版本之前，都是以桌面優先，在 3.0 版本后，采用移動設備優先[5]，可以很好的支持移動平臺，然后才考慮更好的支持桌面，所以 Bootstrap對手機的支持也很好。Bootstrap還使用了最新的跨瀏覽器兼容技術，提供了一系列簡潔的UI組件、柵格化系統以及Javascript插件。

Bootstrap是用動態語言LESS寫的，主要包括以下四部分內容：

（1）基本結構：全局樣式、響應式的柵格化布局系統。默認情況下Bootstrap并不開啟響應式布局的功能，需要手動開啟。

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

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

（4）Javascript插件：包含很多jQuery插件，可實現頁面的動態頁面效果和交互設計，比如提示效果、滾動監聽、輸入提示等。

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

2.2 應用

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

優先響應移動端這一功能是Bootstrap在3.0版本后最大的一個特點，為了網頁更好地適應設備和縮放功能，應添加viewport元素，代碼如下：

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

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

3 MUI框架及其應用

3.1 概念

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

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

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

3.2 應用

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

表1 Bootstrap和MUI綜合比較表

?

4 結束語

本文在前端框架方面對Bootstrap和MUI進行了比較，希望對web前端框架研究以及前端開發人員能有所幫助，這兩種框架各有優缺點，在項目開發中也可以幫助開發人員應根據具體的項目需求，選擇合適的框架。

[1]馬敏，王旗.中國移動互聯網現狀與發展趨勢分析[J].互聯網天地，2014.

[2]張志禎.移動學習的跨平臺開發技術[J].中國教育網絡，2013.

[3]李沛武，鮑培文.面向對象系統中耦合度量的研究[J].南昌水專學報，2000.

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

[5]賈英霞.淺談 Bootstrap制作響應式網站布局[J].福建電腦，2015.

[6]徐隆龍，李瑩，白靜.移動混合開發框架[J].計算機系統應用，2014.

[7]Bootstrap官網：http://bootstrap.evget.com/.

[8]MUI官網：http://www.dcloud.io/.