【摘 要】本文主要進行了基于Bootstrap和AngularJS框架的WEB前端設(shè)計研究。首先介紹了WEB前端設(shè)計研究的意義、框架的概念和優(yōu)點，分析了Bootstrap和AngularJS框架設(shè)計的核心思想，最后探討了其在WEB前端設(shè)計的具體應(yīng)用。

【關(guān)鍵詞】Bootstrap；AngularJS；框架；WEB前端

0 引言

隨著新一代信息技術(shù)的快速發(fā)展，Web應(yīng)用越來越廣泛，對于Web 前端開發(fā)工程師的要求也越來越高，無論是開發(fā)技術(shù)上，還是開發(fā)方式上，現(xiàn)在的網(wǎng)頁制作都更接近傳統(tǒng)的網(wǎng)站后臺開發(fā)，由原來必須掌握的HTML、CSS和JavaScript三個技術(shù)要素演變成現(xiàn)在的HTML5，CSS3和Jquery。而且前端工程師開發(fā)的Web應(yīng)用不僅需要適合傳統(tǒng)的電腦PC端，還需要適合手機和IPAD等各種不同的移動設(shè)備。 為了降低Web 前端開發(fā)的難度和復(fù)雜性，引入框架思想進行Web 前端開發(fā)。

使用框架進行Web前端開發(fā)主要有兩個方面的原因：使用W3C標準的框架后，可以有效提高Web應(yīng)用的性能，讓應(yīng)用的代碼組織更有序，提高其可維護性；使用便捷的MVC框架，把HTML作為信息模型（Model）、CSS控制樣式（View）、JavaScript實現(xiàn)功能和業(yè)務(wù)邏輯（Controller），使得代碼具有很好的重用性和復(fù)用性，提高Web前端開發(fā)的效率、質(zhì)量和團隊協(xié)作性。本文主要簡單介紹使用框架思想來進行Web 前端開發(fā)。

1 框架概述

框架是隨著軟件工程的發(fā)展演變而來的，在軟件開發(fā)過程中，很多項目要解決的問題和實現(xiàn)的功能是一樣的，在這種情況下，可以將實現(xiàn)相同功能的代碼放在單獨的一個文件作為組件或構(gòu)件，供以后開發(fā)和使用，這些代碼是可重用和擴展的。因此，業(yè)界人士將相同功能的實現(xiàn)和問題的解決方法進行抽象，最終抽取和形成一個應(yīng)用框架?？蚣芸梢允管浖_發(fā)人員將大部分時間用來分析和處理業(yè)務(wù)邏輯上，在編寫代碼時只要應(yīng)用框架就可以了。

使用框架開發(fā)應(yīng)用的優(yōu)點如下：

（1）框架重用性好，開發(fā)效率高。在開發(fā)應(yīng)用時，可以重用框架的分析、設(shè)計、代碼，使得應(yīng)用開發(fā)效率和開發(fā)質(zhì)量得到了顯著提高。應(yīng)用開發(fā)人員可以按照框架的思想將應(yīng)用進行分析并將其分解為同樣的組件，采用同樣的方法來解決的問題?？蚣苓€提供了可重用的概要設(shè)計和詳細設(shè)計，并將應(yīng)用分解成較小的組件和接口。只要符合框架的定義和要求，開發(fā)人員就可以使用框架中的類和接口，使得開發(fā)效率大大提高。

（2）因框架實現(xiàn)了“高內(nèi)聚、低耦合”，可擴展性較好。框架把要解決的業(yè)務(wù)分解為較小的事務(wù)，采用分層的方法將相關(guān)性很強的代碼組合成一個組件，根據(jù)單一責(zé)任原則只解決一項較小的事務(wù)，并且減少組件與組件之間的聯(lián)系，如果彼此之間的聯(lián)系比較復(fù)雜的話，繼續(xù)分解為較小的組件。因此框架實現(xiàn)了軟件工程的“高內(nèi)聚、低耦合”的要求，易于控制，易于擴展。

（3）使用框架，開發(fā)周期短，成本低，可維護性較好。使用框架開發(fā)應(yīng)用，只要調(diào)用類和接口就可以完成大部分工作，大幅度縮短了應(yīng)用和軟件的開發(fā)周期，顯著提高了軟件開發(fā)質(zhì)量。大粒度的重用使得應(yīng)用和軟件開發(fā)成本大大降低，開發(fā)時間成倍減少，同時分層思想設(shè)計的框架使得應(yīng)用開發(fā)的適應(yīng)性和靈活性也得到增強，可維護性較好。

2 Bootstrap框架應(yīng)用

2.1 概述

Bootstrap框架主要用于靜態(tài)頁面的設(shè)計，是由Twitter公司的設(shè)計師Mark Otto和Jacob Thornton共同開發(fā)的，是比較受歡迎的一個CSS/HTML Web前端框架。它是基于HTML5、CSS3和JavaScript 的框架，符合 HTML和CSS 規(guī)范，且代碼簡潔靈活，使得 Web前端開發(fā)更加快捷。Bootstrap框架推出以后一直頗受歡迎，是GitHub網(wǎng)站上的排行榜靠前的開源項目，國外知名的公司NASA的Breaking News和國內(nèi)一些移動開發(fā)者較為熟悉WeX5前端開源框架都采用了Bootstrap框架。

由于Bootstrap的 HTML是基于 HTML5 的最新技術(shù)，可以快速實現(xiàn)響應(yīng)式頁面，集成了非常友好的 CSS 樣式表，對于非設(shè)計人員也可以制作出很漂亮的網(wǎng)頁，且占用資源非常少，因此我們也采用Bootstrap框架進行Web前端設(shè)計。該框架包含了豐富多彩的Web組件，利用這些組件，我們可以快速的搭建一個個性化的、漂亮和功能完備的網(wǎng)站。主要包括以下幾個部分：

1）全局 CSS 樣式：包含了格柵系統(tǒng)、表單和表格等集成樣式。

2）組件：包含了下拉菜單、按鈕下拉菜單、文本框、導(dǎo)航、列表框等組件。

3）插件：包含了進度條、警告對話框、彈出框等插件。

2.2 應(yīng)用

（1）從Bootstrap官網(wǎng)http：//getbootstrap.com/getting-started/#download下載 Bootstrap開源框架。Bootstrap 主要包含css、fonts和 js文件夾：css 文件夾存放的是bootstrap.css基本樣式，在網(wǎng)頁中使用命令即可；fonts 文件夾存儲網(wǎng)頁中可以使用的各種字體；js文件夾存放的是bootstrap.js等js文件，在網(wǎng)頁中可以通過 標簽來使用js組件。

（2）Bootstrap是根據(jù)移動終端優(yōu)先的原則設(shè)計的。它支持響應(yīng)式網(wǎng)頁（RWD，Responsive Web Design），為了控制網(wǎng)頁的尺寸比例和觸屏縮放，需要使用命命令添加viewport元素。

（3）設(shè)置頁面流式布局，網(wǎng)頁中的各元素會根據(jù)設(shè)備分辨率的不同而自動調(diào)整大小，但元素位置并不會發(fā)生變化。流式布局通常將頁面分為12列，將網(wǎng)頁的寬度設(shè)置為100%，具體代碼因太多此處省略。

（4）運用Bootstrap提供的各種樣式、組件和插件完成WEB前端設(shè)計。例如制作一個提交按鈕，通過以下代碼實現(xiàn)提交。

3 AngularJS框架應(yīng)用

3.1 概述

AngularJS主要用于構(gòu)建單頁面的動態(tài)頁面的設(shè)計，更多關(guān)注的是構(gòu)建 CRUD（增加Create、查詢Retrieve、更新Update、刪除Delete）應(yīng)用，由Misko Hevery 等人在2009年創(chuàng)建，是一款優(yōu)秀的JS框架，被廣泛應(yīng)用。

AngularJS主要使用MVC的分層設(shè)計模式，將管理數(shù)據(jù)的model、應(yīng)用邏輯controller和向用戶顯示數(shù)據(jù)的界面（view）清晰地分離開，以提高代碼的易讀性和可移植性，使得程序清晰易讀。在 AngularJS 應(yīng)用中， model被存儲在各個對象的屬性中，view就是文檔對象模型（DOM），controller就是JS類和代碼。

3.2 應(yīng)用

（1）從網(wǎng)上下載AngularJS框架。將要使用的js文件復(fù)制到工程文件的js文件夾中，并在頁面中使用命令引入。

（2）使用 ng-app命令在動態(tài)頁面中創(chuàng)建模塊。AngularJS 的MVC結(jié)構(gòu)是基于整個具體應(yīng)用的。通常在頁面的指定容器標簽中使用ng-app命令來創(chuàng)建具體模塊，例如

。

（3）設(shè)置控制器controller。在網(wǎng)頁中通過ng-controller指令設(shè)置控制器，

。再通過JS代碼控制邏輯，app.controller（"testController"，function（$scope）{$scope.text = 'welcome'；}）。

（4）設(shè)置模型數(shù)據(jù)model。通過ng-model 命令動態(tài)設(shè)定模型數(shù)據(jù)model內(nèi)容，

。

4 總結(jié)

本文針對新一代信息技術(shù)的發(fā)展，將Bootstrap和AngularJS框架運用在WEB前端開發(fā)中，希望能對WEB前端設(shè)計的研究提供一定的參考。當(dāng)然本文只是簡單介紹了Bootstrap和AngularJS框架的基本應(yīng)用，詳細的應(yīng)用有待進一步的完善。

【參考文獻】

[1]http：//www.51cto.com.

[2]http：//baike.baidu.Com.

[3]俞華鋒.基于HTML5的網(wǎng)頁設(shè)計與實現(xiàn)[J].科技信息，2012（29）.

[責(zé)任編輯：朱麗娜]