基于HTML5技術的WEB前端框架的設計及應用

陳 上

（海南軟件職業技術學院，海南 瓊海571400）

電商類業務的需求量較大，內容繁雜，所以在WEB開發時通常需要由不同專業所長的人來進行。想要獲得高效率的電商平臺系統，就要將電商業務中多次使用的模塊組成通用組建，并結合電商類業務的特點把電商業務必備功能進行業務封裝。在電子商務類業務開發初期階段，通過組件引用、組合可以實現一些模塊的功能，而不需要從零開始，因此開發效率大大提升。另外，在以往的前端開發過程中，HTML層的代碼與數據代碼兩者混合起來，這無形中使代碼的可讀性變差。另外，在WEB開發過程中，如果需要進行個性化頁面交互，那么就會影響到整個系統的邏輯性。但是，在框架模式架構下，頁面邏輯和業務邏輯可以實現功能算法分離，并減少不同層間的偶合性，提高了層次間的獨立性。

1 HTML5介紹

HTML5與HTML相比有一些新功能，其語義化標簽更為便捷，如視頻。另外，HTML5同時提升了編碼的可讀性，并減少了完成這些功能所需的復雜編碼。隨著信息化技術的發展，HTML5憑借其良好的前端優勢和客戶體驗逐漸被接受，應用范圍也越來越廣，有WEB網絡平臺基石的稱號。HTML5還有跨平臺的特點，能夠提升不同平臺的兼容性。所以，HTML5同樣可以應用于游戲和移動應用的開發和設計中。在傳統操作平臺開發的實施中，受版本和系統限制，平臺的兼容性很差。因此，開發質量難以保障，開發效率很低。公司必須承擔維護不同版本的費用。HTML5以form為基礎添加了表單驗證功能，輸入元素類型更加豐富，表單的開發效率被大幅提高。此外，HTML5的使用也可以降低網站多媒體元素的引入難度，使用者可以擺脫FLASH和Silverlight，借助瀏覽器對動畫和圖形進行展示。HTML5刪除了一些能通過CSS進行處理的標簽；對SEO更友好，能夠更好地執行網站內容的抓取和索引。HTML5同時還具有更好的易用性和用戶體驗性，因此HTML5常被用于前段開發中。

2 前端框架總體設計

前端框架設計同樣需要以MVC分層和模塊化為基礎，采用面向前端開發的輕量型DVL框架，將前端分為數據模型層，視圖層與邏輯層。按照電子商務業務需求，最終DVL框圖如圖1所示：

圖1 DVL框架圖

從圖中可以看出，該體系結構包括列表、表單、用戶權限、狀態管理、商品、訂單等內容。結合DVL體系結構的分層思想上述內容大體可以分為三層，即視圖層、邏輯層和數據模型層，具體如表1所示。

表1 DVL框架結構

這三個層次是獨立的，各層分工明確，層間的耦合度低，可以滿足不同人員的需求。電商業務開發人員可以對邏輯層進行開發；網頁設計人員可以對視圖層進行開發。所以，在DVL框架下，團隊成員間的團隊合作能力較強，可以根據規則優化層次間交互操作，從而有效提升系統框架的整體效率和可維護性。對層間相同的功能進行提取實現層級間相似或相同功能的抽象。圖2顯示了DVL架構下的靜態數據結構。

圖2 DVL框架下的靜態數據結構

根據訂單列表視圖、商品視圖、購物車列表視圖、用戶列表視圖等的共同特征，以列表的形式將數據顯示在頁面上，同時將列表抽象為列表視圖類。以相同的方式對其他的視圖進行抽象。抽象出來的視圖有其共同點，能夠以頁面的形式進行顯示，并抽象為視圖基類。以相同的方式能夠得到以業務邏輯為基礎的邏輯基類和以數據模型為基礎的數據模型基類。這三個基類以聚合的模式可以生成總體框架。

3 View Graph層設計

視圖層的設計主要是頁面渲染。在頁面顯示時，某些網頁由于客戶請求數據的變化而發生變化。不過，某些網頁則屬于靜態狀態，不因用戶請求數據的變化而變化。在靜態頁面上通過抽取和動態頁面形成模板，借助模板渲染技術創建HTML網頁。

模板渲染技術是用傳遞的值替換占位符，并在模板引擎的輔助下，實現HTML片段與字符串數組的轉化和同等表達。模板渲染過程中，視圖實體行被模板引擎渲染到整個頁面，頁面模板、服務器則將反饋信息傳遞給模板引擎，實現HTML片段的動態編譯，并實現數據層業務邏輯與視圖層展示效果的獨立運行。

模板在進行渲染時，傳入相關參數，并根據模板引擎實現特定模板文檔渲染操作。模板引擎先執行模板間的代碼，把執行結果替換到相應位置。在第一次建立DOM連接點時，需要建立模板語法中的特殊標簽與特殊符號之間的匹配關系，以判斷填充數據，這個過程是通過正則表達式進行的。然后再通過數據填充及函數解釋，從而借助DOM連接點組織實現對原模板的內容表達，達到動態內容轉化的目的。

視圖層的視圖對象都需要有相應的DOM連接對象。為了便于控制界面操作，提升頁面渲染速率，視圖操作要在限定的DOM對象類別內進行。一般來說，render方式是完成視圖渲染的有效手段。模板內的變量在采用render調用時會同時傳輸參數。視圖基類包括視圖元素的ID名稱，元素標簽名，類名，特征值和父元素。視圖基類包含的方法有初始化視圖，隱藏，顯示和屬性設置。

4 Logic層設計

邏輯層提供了業務邏輯的連接接口，并且還是視圖層和數據模型層的連接橋梁。其功能在于調度模型層的數據信息、控制視圖層的頁面顯示。不僅如此，及時響應視圖層內用戶的操作行為也是邏輯層的重要職責。邏輯層的基類包括關聯，關聯消除，觸發事件等。同時，前端路由器管理也在邏輯層執行。前端路由器與傳統路由器之間的最大區別在于，它在HTML5提供的history API進行而不依賴于服務器。

本文設計了基于TMS320DM368的嵌入式聲源定位系統,系統包括主處理器模塊、語音采集模塊、存儲模塊、電源模塊,系統結構如圖4所示。

5 Data Model層設計

通過將業務邏輯層、數據模型層、視圖層數據封裝為模型對象，實現數據處理方式封裝。數據模型主要進行數據信息的存儲，不過不是以視圖為基礎，所以促進了數據層之間的解耦。數據經過驗證接口并傳遞至自控層，并進一步對數據的長度、類型等進行驗證。若驗證無法通過，則返回錯誤。數據模型層的基類包括值集合、元素值、屬性值、視圖基類和服務器交互的基本數據方法，例如數據統計，添加數據信息，數據信息更改，數據信息清除，數據驗證等。

數據交互是框架設計的關鍵組成部分。加載功能文檔后，瀏覽器與服務器借助數據傳輸實現信息交互。現階段常用的數據交互技術如Ajax提交。通過Ajax封裝后，編碼更加簡單。

Ajax向服務器端發送http的過程并不是同步進行的，需要借助回調對返回數據進行再處理，并創立XML Http Request對象。為了提高瀏覽器加載速度，Ajax還開發了緩沖技術。

異步Ajax的主要參數設置：首個參數請求方法值是get或post。若是get則說明數據拼接在url上傳輸。第四個參數是回調函數；若請求方式是post，需要先將頭部信息內容（content-type）進行參數設置，一般設置成application/x-www-fomi-urlencoded格式。然后進一步設定URL參數，完成請求攜帶的數據信息。

6 前端框架工作流程

DVL前端框架的工作流程如下：首先初始化，對工具、模塊、文本等公共資源進行加載。其次啟用路由器加載指定路徑資源，通過正則表達方法解析模塊內的符號和語法進行模塊分析，判斷并獲取響應數據。接著由邏輯層向前端服務器發送請求，并獲得相應數據生成模塊渲染視圖。隨后WEB服務器將數據信息反饋到數據模型層，并由邏輯層進一步借助模板引擎完成渲染并生成初始視圖。然后進入客戶操作環節，當客戶操作需要調整視圖對象屬性時，客戶的操作請求則會通過網頁發送到WEB服務器，并由邏輯層根據監聽視圖變化對數據層數據信息做出相應調整。這一過程的實現通常需要數據模型層向前端服務器發送請求并根據反饋數據實現對視圖層的調整，完成網頁更新。若響應失敗，頁面上則會顯示出錯誤提示，并由客戶選擇下一步操作。

7 前端開發規范設計

7.1 文件分層結構和命名規范

文件分層結構的作用及價值在于，提升系統的可維護性、提升數據信息獨立性和完整性。視圖層，邏輯層和數據模型層的文檔根據規定存儲在models、page及logic文件中。本文在文件分層結構方面的創新在于，對文件命名模式進行了優化改良，提升了編碼的可讀性，更有利于開發利用。此外，類內聲明，若文檔為類的定義，其名稱的第一個字母要大寫；若文檔為功能集合，按慣例其名稱首字母應小寫。另外，文件命名應盡量簡化，盡量用單詞表達，在復雜情況下可采用駝峰模式的多詞表達。

組件文件目錄主要是項目中常用公用之間，img存儲項目內需要引用的圖片。此外，models、logic等目錄內同一組建命名相同，采用小寫模式。page文件夾存儲視圖層問題，采用駝峰式命名；models文件夾存儲數據模型層文件；logic文件夾存儲羅基層文件；style文件夾存儲樣式文件。

7.2 注釋規范

在進行單行注釋時，要注意以//作為開頭，同時還應單獨占一行，不要遺忘空格，也要注意代碼的一致性，尤其是“縮進”和下一行的注釋說明之間。若遇到多行注釋的情況，需要認清頭尾標識符，一般以/*開頭，以*/結束。注釋中的行長度要限制在40個漢字或者80個英文字符內。函數聲明通常在函數的頂部，具體內容包括函數的屬性、參數、方法名等內容。

7.3 頁面顯示信息規則

新增數據通常放置在首頁首行，以起到強調作用，同時注意數據保存。若數據保存失敗，則對已經輸入的數據進行保存，利于下次請求；如果需要進行數據修改，那么修改后的數據將替換原數據位置，同時對記錄進行更新；若數據修改失敗，則內容無法提交，僅對已經修改的內容進行保存，利于下次請求；如果需要進行記錄刪除操作，則應先對刪除部分數據信息進行確認。刪除操作完成后仍要返回到原有記錄位置。若沒有原有記錄，則需要返回到上一頁；另外，在查詢操作時還需要對每一次的查詢條件進行存儲。倘若查詢條件很多，那么還可以在頁面增加清空按鈕。假如未能搜索到需要查詢的記錄，系統還可以給出響應的提示。確定要求以后，系統還能夠為用戶提供一些模糊條件的查詢。此外，頁面設計時要注意同一級別圖標大小的一致性。

8 結束語

隨著WEB技術的發展，信息系統與企業生產管理的支撐作用更加明顯，人們對信息技術、信息系統的要求也在日益提升，也促成了信息系統開發建設的源動力。為滿足人們多元化、高性能信息技術、信息平臺的使用需求，前端代碼量日益增多，前端程序代碼的冗余度與耦合性也日益提高，系統維護難度逐漸加大。HTML5技術的誕生可以更好地解決前端開發中遇到的問題，所以本文以HTML5為基礎對前端框架進行設計，有效解決了前端程序代碼冗余及系統維護問題，有效提升了代碼耦合性，對信息系統的開發和建設具有積極的意義。