陳 上

（海南軟件職業(yè)技術(shù)學(xué)院，海南 瓊海571400）

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

1 HTML5介紹

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

2 前端框架總體設(shè)計(jì)

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

圖1 DVL框架圖

從圖中可以看出，該體系結(jié)構(gòu)包括列表、表單、用戶權(quán)限、狀態(tài)管理、商品、訂單等內(nèi)容。結(jié)合DVL體系結(jié)構(gòu)的分層思想上述內(nèi)容大體可以分為三層，即視圖層、邏輯層和數(shù)據(jù)模型層，具體如表1所示。

表1 DVL框架結(jié)構(gòu)

這三個(gè)層次是獨(dú)立的，各層分工明確，層間的耦合度低，可以滿足不同人員的需求。電商業(yè)務(wù)開發(fā)人員可以對(duì)邏輯層進(jìn)行開發(fā)；網(wǎng)頁(yè)設(shè)計(jì)人員可以對(duì)視圖層進(jìn)行開發(fā)。所以，在DVL框架下，團(tuán)隊(duì)成員間的團(tuán)隊(duì)合作能力較強(qiáng)，可以根據(jù)規(guī)則優(yōu)化層次間交互操作，從而有效提升系統(tǒng)框架的整體效率和可維護(hù)性。對(duì)層間相同的功能進(jìn)行提取實(shí)現(xiàn)層級(jí)間相似或相同功能的抽象。圖2顯示了DVL架構(gòu)下的靜態(tài)數(shù)據(jù)結(jié)構(gòu)。

圖2 DVL框架下的靜態(tài)數(shù)據(jù)結(jié)構(gòu)

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

3 View Graph層設(shè)計(jì)

視圖層的設(shè)計(jì)主要是頁(yè)面渲染。在頁(yè)面顯示時(shí)，某些網(wǎng)頁(yè)由于客戶請(qǐng)求數(shù)據(jù)的變化而發(fā)生變化。不過，某些網(wǎng)頁(yè)則屬于靜態(tài)狀態(tài)，不因用戶請(qǐng)求數(shù)據(jù)的變化而變化。在靜態(tài)頁(yè)面上通過抽取和動(dòng)態(tài)頁(yè)面形成模板，借助模板渲染技術(shù)創(chuàng)建HTML網(wǎng)頁(yè)。

模板渲染技術(shù)是用傳遞的值替換占位符，并在模板引擎的輔助下，實(shí)現(xiàn)HTML片段與字符串?dāng)?shù)組的轉(zhuǎn)化和同等表達(dá)。模板渲染過程中，視圖實(shí)體行被模板引擎渲染到整個(gè)頁(yè)面，頁(yè)面模板、服務(wù)器則將反饋信息傳遞給模板引擎，實(shí)現(xiàn)HTML片段的動(dòng)態(tài)編譯，并實(shí)現(xiàn)數(shù)據(jù)層業(yè)務(wù)邏輯與視圖層展示效果的獨(dú)立運(yùn)行。

模板在進(jìn)行渲染時(shí)，傳入相關(guān)參數(shù)，并根據(jù)模板引擎實(shí)現(xiàn)特定模板文檔渲染操作。模板引擎先執(zhí)行模板間的代碼，把執(zhí)行結(jié)果替換到相應(yīng)位置。在第一次建立DOM連接點(diǎn)時(shí)，需要建立模板語(yǔ)法中的特殊標(biāo)簽與特殊符號(hào)之間的匹配關(guān)系，以判斷填充數(shù)據(jù)，這個(gè)過程是通過正則表達(dá)式進(jìn)行的。然后再通過數(shù)據(jù)填充及函數(shù)解釋，從而借助DOM連接點(diǎn)組織實(shí)現(xiàn)對(duì)原模板的內(nèi)容表達(dá)，達(dá)到動(dòng)態(tài)內(nèi)容轉(zhuǎn)化的目的。

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

4 Logic層設(shè)計(jì)

邏輯層提供了業(yè)務(wù)邏輯的連接接口，并且還是視圖層和數(shù)據(jù)模型層的連接橋梁。其功能在于調(diào)度模型層的數(shù)據(jù)信息、控制視圖層的頁(yè)面顯示。不僅如此，及時(shí)響應(yīng)視圖層內(nèi)用戶的操作行為也是邏輯層的重要職責(zé)。邏輯層的基類包括關(guān)聯(lián)，關(guān)聯(lián)消除，觸發(fā)事件等。同時(shí)，前端路由器管理也在邏輯層執(zhí)行。前端路由器與傳統(tǒng)路由器之間的最大區(qū)別在于，它在HTML5提供的history API進(jìn)行而不依賴于服務(wù)器。

本文設(shè)計(jì)了基于TMS320DM368的嵌入式聲源定位系統(tǒng),系統(tǒng)包括主處理器模塊、語(yǔ)音采集模塊、存儲(chǔ)模塊、電源模塊,系統(tǒng)結(jié)構(gòu)如圖4所示。

5 Data Model層設(shè)計(jì)

通過將業(yè)務(wù)邏輯層、數(shù)據(jù)模型層、視圖層數(shù)據(jù)封裝為模型對(duì)象，實(shí)現(xiàn)數(shù)據(jù)處理方式封裝。數(shù)據(jù)模型主要進(jìn)行數(shù)據(jù)信息的存儲(chǔ)，不過不是以視圖為基礎(chǔ)，所以促進(jìn)了數(shù)據(jù)層之間的解耦。數(shù)據(jù)經(jīng)過驗(yàn)證接口并傳遞至自控層，并進(jìn)一步對(duì)數(shù)據(jù)的長(zhǎng)度、類型等進(jìn)行驗(yàn)證。若驗(yàn)證無(wú)法通過，則返回錯(cuò)誤。數(shù)據(jù)模型層的基類包括值集合、元素值、屬性值、視圖基類和服務(wù)器交互的基本數(shù)據(jù)方法，例如數(shù)據(jù)統(tǒng)計(jì)，添加數(shù)據(jù)信息，數(shù)據(jù)信息更改，數(shù)據(jù)信息清除，數(shù)據(jù)驗(yàn)證等。

數(shù)據(jù)交互是框架設(shè)計(jì)的關(guān)鍵組成部分。加載功能文檔后，瀏覽器與服務(wù)器借助數(shù)據(jù)傳輸實(shí)現(xiàn)信息交互。現(xiàn)階段常用的數(shù)據(jù)交互技術(shù)如Ajax提交。通過Ajax封裝后，編碼更加簡(jiǎn)單。

Ajax向服務(wù)器端發(fā)送http的過程并不是同步進(jìn)行的，需要借助回調(diào)對(duì)返回?cái)?shù)據(jù)進(jìn)行再處理，并創(chuàng)立XML Http Request對(duì)象。為了提高瀏覽器加載速度，Ajax還開發(fā)了緩沖技術(shù)。

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

6 前端框架工作流程

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

7 前端開發(fā)規(guī)范設(shè)計(jì)

7.1 文件分層結(jié)構(gòu)和命名規(guī)范

文件分層結(jié)構(gòu)的作用及價(jià)值在于，提升系統(tǒng)的可維護(hù)性、提升數(shù)據(jù)信息獨(dú)立性和完整性。視圖層，邏輯層和數(shù)據(jù)模型層的文檔根據(jù)規(guī)定存儲(chǔ)在models、page及l(fā)ogic文件中。本文在文件分層結(jié)構(gòu)方面的創(chuàng)新在于，對(duì)文件命名模式進(jìn)行了優(yōu)化改良，提升了編碼的可讀性，更有利于開發(fā)利用。此外，類內(nèi)聲明，若文檔為類的定義，其名稱的第一個(gè)字母要大寫；若文檔為功能集合，按慣例其名稱首字母應(yīng)小寫。另外，文件命名應(yīng)盡量簡(jiǎn)化，盡量用單詞表達(dá)，在復(fù)雜情況下可采用駝峰模式的多詞表達(dá)。

組件文件目錄主要是項(xiàng)目中常用公用之間，img存儲(chǔ)項(xiàng)目?jī)?nèi)需要引用的圖片。此外，models、logic等目錄內(nèi)同一組建命名相同，采用小寫模式。page文件夾存儲(chǔ)視圖層問題，采用駝峰式命名；models文件夾存儲(chǔ)數(shù)據(jù)模型層文件；logic文件夾存儲(chǔ)羅基層文件；style文件夾存儲(chǔ)樣式文件。

7.2 注釋規(guī)范

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

7.3 頁(yè)面顯示信息規(guī)則

新增數(shù)據(jù)通常放置在首頁(yè)首行，以起到強(qiáng)調(diào)作用，同時(shí)注意數(shù)據(jù)保存。若數(shù)據(jù)保存失敗，則對(duì)已經(jīng)輸入的數(shù)據(jù)進(jìn)行保存，利于下次請(qǐng)求；如果需要進(jìn)行數(shù)據(jù)修改，那么修改后的數(shù)據(jù)將替換原數(shù)據(jù)位置，同時(shí)對(duì)記錄進(jìn)行更新；若數(shù)據(jù)修改失敗，則內(nèi)容無(wú)法提交，僅對(duì)已經(jīng)修改的內(nèi)容進(jìn)行保存，利于下次請(qǐng)求；如果需要進(jìn)行記錄刪除操作，則應(yīng)先對(duì)刪除部分?jǐn)?shù)據(jù)信息進(jìn)行確認(rèn)。刪除操作完成后仍要返回到原有記錄位置。若沒有原有記錄，則需要返回到上一頁(yè)；另外，在查詢操作時(shí)還需要對(duì)每一次的查詢條件進(jìn)行存儲(chǔ)。倘若查詢條件很多，那么還可以在頁(yè)面增加清空按鈕。假如未能搜索到需要查詢的記錄，系統(tǒng)還可以給出響應(yīng)的提示。確定要求以后，系統(tǒng)還能夠?yàn)橛脩籼峁┮恍┠：龡l件的查詢。此外，頁(yè)面設(shè)計(jì)時(shí)要注意同一級(jí)別圖標(biāo)大小的一致性。

8 結(jié)束語(yǔ)

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