快速入門系列--MVC--07與HTML5移動開發的結合

標籤：背景   nal   屬性   for   輕量級   主要構件   [1]   url   展開   

    現在移動互連網的盛行，跨平台併兼容不同裝置的HTML5越來越盛行，很多公司都在將自己過去的非HTML5網站應用程式漸進式的轉化為HTML5應用，使得一套代碼可以相容不同的物理終端裝置和瀏覽器，極大的提高了系統的可維護性和可擴充性。於此同時，HTML5提供了很多的新特性，比如新的架構元素、代替cookie的Web儲存技術、WebSocket等，也使得網站應用程式能夠更好適應新的商業環境和技術更新。

    本系統的網站模組使用.NET技術堆棧中的ASP.NET MVC架構，此架構是微軟公司推出的開源架構，相關原始碼可以在Codeplex.com網站上找到。該技術架構經過7年多的發展，當前已發展到5.1版本，新增了包括移動用戶端模板、WebAPI模板、OAuth認證等功能在內的新特性，便於當前的以互連網為主題背景的項目開發。

    在實際的項目中，主要面臨的兩個問題分別是：實際使用者使用的終端裝置的廠商、型號等可能千變萬化，如何在不同的Web終端上呈現出適合的樣式；ASP.NET MVC預設提供WebForm和Razor兩種視圖引擎，但他們並不能支援HTML5頁面的呈現，如何擴充視圖引擎用於支援HTML5頁面的渲染。實際選擇的技術解決方案是，使用Media Queries等技術手段來實現響應式的CSS3設計，用自訂靜態HTML5視圖引擎擴充ASP.NET MVC架構。接下來，將分別詳細介紹兩個解決方案在項目中的實施應用。

    首先，介紹響應式的網頁布局，這個概念首先由Ethan Marcotte於2010年5月提出，目的是使得一個網站可以相容多個終端—而不是為每一個終端開發一個特定的版本，可以說它就是為解決移動互連網相關痛點應運而生的。實際上，當前正在運營的很多大型網站上，仍然是維護多套的網站程式，有的還使用不同的網域名稱來服務不同的終端。同時往往對移動端網頁中的業務功能進行了一定的刪減，雖然也能提供不錯的使用者體驗，但這並不是最合理的解決方案，儘可能的統一使用者介面是很有必要的。響應式的頁面配置在具體的實現上，主要包含以下的幾個步驟。

第一步，在html頁面的head部分增加名為viewport的meta元素，viewport表示一個虛擬視窗，通過它來設定適應行動裝置螢幕的大小，代碼如下所示。

 View Code

    Content屬性中"width=device-width"，表示寬度為當前裝置寬度；"intial-scale=1"表示初始縮放倍數為1,；"user-scalable=0"表示不支援使用者手動縮放。同時增加css3-mediaqueries.js用於相容IE6等老式瀏覽器。    

第二步，使用Media Queries模組來根據不同的裝置的可視螢幕大小來匯入不同的CSS檔案。該模組的應用需要修改兩部分的內容，一部分是在HTML檔案中增加3個不同條件下的CSS檔案，另一部分是在CSS檔案使用指定的形式將原有的內容封裝起來。代碼如下所示。

 View Code

    在HTML檔案中，Media屬性中"screen and (min-width:900px)"表示媒體類型為螢幕，同時螢幕的最小寬度為900像素，only關鍵字使得不支援Media Queries的裝置忽略該樣式檔案，之後href屬性中為當前條件下所引用的CSS檔案路徑。通常來說螢幕可見寬度小於480像素的裝置為手機，介於480像素到900像素之間的為平板電腦，大於900像素的為台式機電腦。在CSS檔案中，通過添加@media段與頁面中media屬性進行映射，其塊中所包含的內容與一般傳統網站的該檔案相似，針對不同的裝置，通過繼承的方式對樣式的布局進行一些細節的調整。

    最後一步，主要是處理前端開發中一些細節，包括使用相對的寬度，相對的字型大小、流動的布局、自適應的圖片等內容，和傳統的頁面開發相似，在此就不一一展開。最終的如下，可以看到同樣的內容在不同的裝置上得到不一樣的渲染，以下是應用響應式頁面配置技術的。

 

    接下來介紹如何在ASP.NET MVC架構中擴充自訂的視圖引擎，使得架構能與HTML5技術無縫的銜接。之所以選擇ASP.NET MVC架構作為Web前端主要構件基礎，除了之前所提到的一些支援移動互連網方面的新特性外，它內生所具備的高效能，高擴充性也起到了很大的作用。相對與重量級的WebForm架構，該架構顯得非常的輕量級，使得頁面渲染所消耗的資源得到了大幅的減少，並保留了認證、安全和本機快取等模組的支援。此外，該架構提供了極強的擴充性，無論是自行修改架構，還是在已有項目中增減業務模組，都非常的方便。這一點，和JAVA陣營的J2EE技術很相似，但同時又具有很高的穩定性和較高的開發效率。例如可以自訂URL路由美化URL並提升搜尋引擎排名，自訂資料繫結支援不同資料格式的序列化和還原序列化，自訂視圖引擎應對不同的業務情境等。接下來，具體介紹如何?自訂的HTML5視圖引擎，包含以下的步驟。

    第一步，建立自訂的HTML5視圖。它是讀取HTML5檔案並呈現的基礎，需要實現System.Web.Mvc.IView介面，並實現介面中的Render方法，該方法主要通過流的方式讀取指定的HTML5檔案並渲染到頁面，該部分內容比較簡單，簡化的代碼如下所示。

 View Code

　　第二步，建立自訂緩衝。由於HTML5FileView中都是靜態內容，很自然的需要構建相應的緩衝用於提高效能。建立頁面的緩衝Key對象HTML5ViewCacheKey，實現GetHashCode方法，通過對Controller和View的名稱進行簡單的Hash組合運算等到緩衝內容的Key，並實現Equals方法用於比較，簡化的代碼如下所示。

 View Code

　　第三步，建立視圖引擎HTML5ViewEngine。該類實現了IViewEngine介面，字典類viewEngineResults結合第二步中構建的緩衝類用於緩衝渲染後的視圖。方法FindView首先解析路由資訊獲得控制器的名稱，之後判斷請求是否支援緩衝，若不支援緩衝，則直接通過InternalFindView方法獲得視圖。反之，判斷請求視圖是否在本機快取中，若存在直接返回，若不存在則調用方法擷取並緩衝，寫緩衝時注意加鎖。InternalFindView方法中，藉助面向約定編程的思路到指定的路徑中尋找到對應的檔案HTML5，最終完成URL資訊與檔案的映射。

 View Code

　　 最後一步，將視圖自訂的視圖引擎添加到Global.asax檔案的Application_Start方法中，完成該引擎的註冊。同時注意需要將該引擎的優先順序設為最高，使得系統優先使用該引擎對視圖相關請求進行響應。

 View Code

通過以上步驟，基本上將ASP.NET MVC架構，HTML5技術，移動互連網開發技術有機的整合到了一起。

系列目錄如下，謝謝您的閱讀。

快速入門系列--MVC--01概述

快速入門系列--MVC--02路由

快速入門系列--MVC--03控制器和IOC應用

快速入門系列--MVC--04模型

快速入門系列--MVC--05行為

快速入門系列--MVC--06視圖

快速入門系列--MVC--07與HTML5移動開發的結合

 

    Tip: 本文由於是學習需要，主要參考了以下書目。

[1]蔣金楠. ASP.NET MVC4架構揭秘[M]. 上海:電子工業出版社, 2012. 419-421

[2]唐俊開. HTML5移動Web開發指南[M]. 上海:電子工業出版社, 2012. 52-54

快速入門系列--MVC--07與HTML5移動開發的結合