基于框架的WEB前端設計

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

【關鍵詞】Bootstrap；AngularJS；框架；WEB前端

0 引言

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

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

1 框架概述

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

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

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

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

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

2 Bootstrap框架應用

2.1 概述

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

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

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

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

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

2.2 應用

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

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

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

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

3 AngularJS框架應用

3.1 概述

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

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

3.2 應用

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

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

。

（3）設置控制器controller。在網頁中通過ng-controller指令設置控制器，

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

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

。

4 總結

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

【參考文獻】

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

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

[3]俞華鋒.基于HTML5的網頁設計與實現[J].科技信息，2012（29）.

[責任編輯：朱麗娜]