基于軟件工程的Web前端開發技術

董悅 孫博宇

摘要：隨著現代技術的發展，人們對于任何事物在看重實用性能的同時，也越來越重視自我的體驗，比如當前流行的互聯網企業，除了要有出色的性能和實用性，還要有良好的界面、客戶體驗，這樣才能吸引人。只有做好前端技術、客戶體驗，一切才有可能。本文主要研究了軟件工程的web前端開發。

關鍵詞：軟件工程；web前端開發；現狀分析；前景展望

一、web前端開發面臨的問題

自2005年以后，互聯網進入Web 2.0時代，各種類似桌面軟件的Web應用大量涌現，網站的前端由此發生了翻天覆地的變化。網頁不再只是承載單一的文字和圖片，各種豐富媒體讓網頁的內容更加生動，網頁上軟件化的交互形式為用戶提供了更好的使用體驗，這些都是基于前端技術實現的。隨著Web 2.0概念的普及和W3C組織的推廣，網站重構的影響力正以驚人的速度增長。XHTML+CSS布局、DHTML和Ajax像一陣旋風，鋪天蓋地席卷而來，包括新浪、搜狐、網易、騰訊、淘寶等在內的各種規模的IT企業都對自己的網站進行了重構。

互聯網的自誕生以來就在不斷的飛速發展中，與之相應的各種互聯網技術層出不窮。當今的社會中，Web已經滲透到了各個行業中，成為日常生活中重要的組成部分。Web工程可以將傳統的信息和數據庫系統搬到Internet上，拓展了信息交互的手段。然而Web系統的開發流程卻面臨著很多問題，比如缺少嚴格和系統的方法。目前Web開發還是主要憑借開發者的經驗積累，然而復雜的Web系統很難依靠個人的經驗獨立完成。即時費時費力的開發出來一套系統，又因為缺少系統方法，不同系統間相差太大，可移植性和參考性很差，導致重復開發，資源的浪費。

二、Web開發方法應具備的特性

成熟的Web開發方法，應當是整體化的Web應用開發流程。我們知道，系統化、整體化的好處是可以提高開發效率和質量。Web開發方法要易于掌握，因為開發方法的設計初衷是為了降低開發者的工作量，因此開發方法應當易學易懂。但Web開發方法還是應當可以將Web程序的各方面描述清楚，達到表達能力和難度的平衡。與此同時，Web設計方法還應當借鑒常見的開發語言和技術特點，使得開發者更快更好的適應。

Web開發方法還應當具有對復雜系統建模的能力。Web應用可以使用的范圍非常廣泛，因此大量的傳統信息和數據庫系統都進行了Web移植。這些應用都具有不同的、復雜的功能，開發方法應當適用于該類需求，應當具有對商業過程、工作流建模的能力。Web開發方法還應當具有表現層建模的能力，這一點在傳統設計方法中嘗嘗忽略。界面是和用戶交流的接口，因此需要非常重視界面的表達能力，豐富的界面表達將使得系統更人性化，并將系統的信息完整的表達出來。Web開發方法還應能在較高的抽象層次上表達系統和資源的集成方法。因為新的系統可能要與原有系統相結合，而原有系統的開發語言則種類繁多，開發方法要能適應這種情況。另外，還要保障接口的標準性，從而便利開發出的系統和資源與數據庫相連接。

三、web前端開發方法研究

隨著Web技術的飛速發展，越來越多的人注意到Web開發的重要性，因此很多Web開發方法被研究出來。現今Web應用開發方法具有一些共性的特點，比如將Web系統模型分為領域模型、導航模型和展示模型，然后經過概念建模、邏輯建模、物理建模和實現四個過程完成Web 系統開發。這四個過程中，領域模型只用來描述Web應用中領域對象的。展示模型用于描述Web頁面的展示形式，是導航對象和導航行為的最終體現。導航模型是Web模型不同于傳統的重要部分，它用于描述Web應用的導航特性，用于連接領域模型和展示模型。

Web前端開發技術包括三個要素：HTML、CSS和JavaScript，隨著RIA的流行和普及，Flash/Flex、Silverlight、XML和服務器端語言也是前端開發工程師應該掌握的。隨著時代的發展，前端開發技術的三要素也演變成為現今的：html5，css3，jquery。

四、web前端開發核心技術

1.HTML語言

掌握HTML是網頁的核心，是一種制作萬維網頁面的標準語言，是萬維網瀏覽器使用的一種語言，它消除了不同計算機之間信息交流的障礙。因此，它是目前網絡上應用最為廣泛的語言，也是構成網頁文檔的主要語言，學好HTML是成為Web開發人員的基本條件。HTML是一種標記語言，能夠實現Web頁面并在瀏覽器中顯示。HTML5作為HTML的最新版本，引入了多項新技術，大大增強了對于應用的支持能力，使得Web技術不再局限于呈現網頁內容。

隨著CSS、JavaScript、Flash等技術的發展，Web對于應用的處理能力逐漸增強，用戶瀏覽網頁的體驗已經有了較大的改善。不過HTML5中的幾項新技術實現了質的突破，使得Web技術首次被認為能夠接近于本地原生應用技術，開發Web應用真正成為開發者的一個選擇。HTML5可以使開發者的工作大大簡化，理論上單次開發就可以在不同平臺借助瀏覽器運行，降低開發的成本，這也是產業界普遍認為HTML5技術的主要優點之一。

2.CSS與JavaScript

學好CSS是網頁外觀的重要一點，CSS可以幫助把網頁外觀做得更加美觀。學習JavaScript的基本語法，以及如何使用JavaScript編程將會提高開發人員的個人技能。

3.操作系統與網絡服務器

了解Unix和Linux的基本知識，對于開發人員有益無害。Web服務器，包括對Apache的基本配置，htaccess配置技巧的掌握等。

五、結束語

目前Web開發方法主要還是存在方法復雜的問題。Web開發方法研究者僅根據自己的領域，而沒有考慮到多領域的融合問題。另外，盡管Web開發方法提供表現層建模，但多數方法在該方面過于簡單，沒有體現出設計細節。而模型間缺少清楚和靈活的映射，這也使得層間的連接非常的貧瘠?？偟膩碚f，目前的在規范化角度做得很好，但在工程化的方面還很欠缺，所以在未來的研究中，應當令Web系統研究方法更具工程化的特性。

參考文獻：

[1] 前端技術.騰訊網.2018-01-20.

[2] HTML5能否挑戰移動終端OS.中華人民共和國工業和信息化部2018-08-29.

[3] 前端開發大盤點：2015最流行前端框架TOP20.網易 2018-08-28.

[4] web前端開發工程師職責.人民網.2011年11月29日.

作者簡介：

第一作者：董悅，女，遼寧朝陽，本科，就讀于遼東學院信息工程學院信息管理與信息系統專業B1701班，學號：0911417018，研究方向：web前段開發。

第二作者：孫博宇，男，遼寧大連，本科，就讀于遼東學院信息工程學院計算機科學與技術專業b1506班，學號：0917150610，研究方向：web前端開發。