基于框架的WEB前端設(shè)計(jì)

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

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

0 引言

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

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

1 框架概述

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

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

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

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

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

2 Bootstrap框架應(yīng)用

2.1 概述

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

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

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

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

3）插件：包含了進(jìn)度條、警告對(duì)話框、彈出框等插件。

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 文件夾存儲(chǔ)網(wǎng)頁中可以使用的各種字體；js文件夾存放的是bootstrap.js等js文件，在網(wǎng)頁中可以通過 標(biāo)簽來使用js組件。

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

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

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

3 AngularJS框架應(yīng)用

3.1 概述

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

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

3.2 應(yīng)用

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

（2）使用 ng-app命令在動(dòng)態(tài)頁面中創(chuàng)建模塊。AngularJS 的MVC結(jié)構(gòu)是基于整個(gè)具體應(yīng)用的。通常在頁面的指定容器標(biāo)簽中使用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 命令動(dòng)態(tài)設(shè)定模型數(shù)據(jù)model內(nèi)容，

。

4 總結(jié)

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

【參考文獻(xiàn)】

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

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

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

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