第三方框架支持下的Web應用開發研究*

石雋義 羊波 陳瑩

玉溪師范學院教育技術系 云南玉溪 653100

作者：石雋義，講師，玉溪師范學院教育技術系。

Web應用是互聯網應用中最為活躍和使用最廣泛的服務，Web應用的開發模式也經歷了PERL開發到現在的動態網頁技術，包括PHP、JSP等。其中PHP憑借其快速開發的支持和較高的執行效率，已經成為Web應用的主流開發技術。

在傳統的開發模式中，HTML和PHP的腳本語言是混合編寫的，這對于小型項目來說不會出現任何問題，因為界面設計者(UI)、功能實現都是由一個或者極少的幾個開發人員來完成，只要功能模塊設計得獨立，各個開發人員是可以同時進行開發的。但是隨著目前開發語言的發展，Web應用已經可以處理越來越復雜的業務，加入的功能越來越豐富，Web應用的可維護性和擴展性越來越難以實現。為解決這個問題，引入MVC的開發模式以及相關的框架結構支持。

1 MVC的設計模式

MVC是軟件開發過程中的常用設計模式。這種開發思路不僅僅適合Web應用開發，在桌面軟件的開發中也得到廣泛的應用，比如微軟的文檔視圖模型。MVC在邏輯上將程序劃分為三部分：模型(Model)、視圖(View)、控制器(Control)。三部分處理不同的功能，模型完成數據的存取和業務邏輯，視圖負責用戶交互界面，控制器完成模型和視圖之間的連接，即決定數據的來源和呈現方式。

這種開發思路保證了應用的可擴展性和可維護性。當業務邏輯有變化時，只需要修改模型；對應的，當用戶交互界面有修改時，也只需要修改視圖。同時，也為項目的合作開發提供了便利，使得前端開發人員和后端開發人員可以同時獨立開發。

以Web應用中常見的信息列表為例，在PHP和HTML混合編寫的模式下，其實現程序大致如下：

在以上的程序中，將信息的標題字段title輸出到HTML的div和li標簽中。此處的數據和數據的呈現是混合編寫的。當數據的呈現方式需要更改，比如輸出到表格table中，將需要改寫該程序。在中大型項目中，這種更改的工作量是相當大的，也不利于多個開發人員的協調。

在MVC開發模式中，將數據的呈現、存取處理分離。數據的呈現成為單獨的模板文件，通過控制器完成模板賦值和調用。

2 第三方框架對MVC的支持

在Web應用的MVC開發中，不得不提到相當成熟的smarty模板引擎。它通過編譯前的預處理，將HTML文檔中的指定標簽替換成PHP中的數據，實現模型和視圖的獨立；數據庫連接在Web應用中開銷是相當大的，smarty通過緩存機制使得數據不必每次都到數據庫中讀取，同時緩存技術也支持靜態網頁的生成，避免了每次客戶請求都要重新編譯執行PHP腳本，提高了響應速度。

在smarty引擎的基礎上，出現較多的開發框架，如國外的zend和國內的ThinkPHP，它們除了可以提供完整的MVC開發模式支持外，往往還提供了大量的功能函數。在模型上，對數據的存取提供如過程調用、事物并發操作等一系列的支持，為開發提供了便利。在安全性方面，要保證應用的安全，往往需要大量嚴格的測試，需要設計大量的測試用例，這對于中小型項目來說是很難做的。框架對應用的安全性提供了常見的支持，如SQL注入攻擊，彌補了這方面的不足。

3 ThinkPHP+jQuery的AJAX開發流程

在Web開發中通過AJAX可以提高應用的響應速度。和桌面應用程序相比較，Web常見的弊端是不能提供很好的用戶體驗。由于Web應用是基于HTTP協議，該協議屬于無狀態協議，每次頁面的請求都將刷新所有數據，導致大量冗余數據的重復傳輸，降低Web應用程序的響應速度。

AJAX在Web開發的客戶端中得到廣泛的應用。它可以獨立和WWW服務器通信，請求數據，這樣減少數據的傳輸量，提供更快的響應速度，同時JavaScript支持對HTML DOM文檔的訪問，不必通過刷新整個頁面就可以實現數據的更新，從而提高客戶端的用戶體驗。

在具體的開發中，常用的兩個第三方框架是jQuery和 ThinkPHP。

jQuery是繼prototype之后的一個優秀的Javascrīpt框架，屬于輕量級的js庫，提供了便捷的DOM選擇器、事件觸發的綁定機制，結合UI提供了豐富的效果函數。同時jQuery對AJAX函數進行了封裝，支持AJAX請求和JSON數據解析，$.post()函數是最常用的AJAX請求方式。

ThinkPHP是一個快速、兼容而且簡單的輕量級國產PHP開發框架，封裝了CURD操作，支持單一入口模式，在模版引擎、緩存機制、認證機制和擴展性方面均有較好的表現。在ThinkPHP中，通過assign()和display()實現模板文件的賦值和調用。

在AJAX的開發中，客戶端通過jQuery的post()函數實現AJAX請求，而服務器端使用ThinkPHP框架實現對模板的賦值和調用，客戶端接收到數據后通過jQuery的選擇器實現數據的更新。其過程如圖1所示。

在AJAX通信中，返回的數據分為兩種：JSON(JavaScript object notation)編碼后的數據；數據聯合視圖編譯后形成的HTML文檔。

JSON編碼常用于返回較少的數據，如用戶的登陸狀態、用戶名等。由于JSON在數據編碼和反序列化方面都有較高的效率，并且JSON的數據編碼簡潔，使得JSON的數據傳輸效率明顯優于其他數據傳輸格式(FSV和XML)。同時，在客戶端，JavaScript很容易實現JSON的反序列化，其反序列化的過程如下所示：

var data={"status":1,"info":login is ok};

alert(data.status);

JSON常用返回服務器端對數據的處理結果，而HTML文檔則更多地用于返回節點內的內容和JavaScript程序，通過它實現完整的功能模塊。

圖1 ThinkPHP+jQuery的AJAX數據流程

圖2 頁面的結構布局

在Web設計中，常將頁面劃分為不同的區域，如導航菜單區域、內容顯示區域，當用戶點擊了導航區域的不同連接時，在內容區域顯示不同的信息。如圖2所示，導航區域在左邊，而內容顯示區域設置在右邊。

當點擊了左邊的連接后，發送AJAX請求，并將返回的數據放置在內容顯示區域，此時返回的數據為text，即文本文件。其程序結構如下：

服務器則控制調用對應的模板文件，該文件包含HTML body標簽中的內容、CSS樣式表、JavaScript程序，用于完成用戶數據提交前的客戶端檢驗等。其程序結構如下：

模板文件：

入口文件的控制器處理函數：

public function changePassword(){$this->display();}

4 結束語

MVC的開發模式為Web應用開發提供了較好的可維護性和可擴展性，第三方框架ThinkPHP提供了MVC的支持，結合jQuery的使用，提高了程序的響應速度。隨著Web應用的日益廣泛，以上技術將越來越廣泛地應用在中小型項目的開發中。

[1]張洪波,楊新泉.Prototype提供的AJAX功能在ThinkPHP框架中的應用研究[J].硅谷,2011(7):86-85.

[2]黃建.基于ThinkPHP框架的ActiveRecord技術應用與研究[J].現代計算機:專業版,2010(4):195-196.

[3]徐誠斌,王金平.MVC在ThinkPHP框架中的應用研究[J].信息與電腦,2011(3):160-162.

[4]俞國紅.利用jQuery框架技術快速開發網站前端頁面[J].襄樊職業技術學院學報,2011(5):95-97.

[5]梁弼.基于MVC的高校科研成果管理系統的設計與實現[J].計算機技術與發展,2011(10):161-164.

[6]高靜.JSON數據傳輸效率研究[J].計算機工程與設計,2011(7):2268-2270.