MVC(Model-View-Controller)是個歷史悠久的設計模式,經過了這麼多年,漸漸受到了眾多開發者的重視及喜愛,也成了一種主流的設計方式。MVC的設計方式,可以說是基於對具圖形化操作介面(GUI)軟體特性的深刻洞察,才能巧妙地將此種軟體中的組成畫分成為MVC三種,各司其職,卻又相互協同合作。

在這種模式底下,處理前端視覺部份的程式碼和後端資料模型,以及處理資料的程式碼相互獨立,可分別獨立發展。一方面很適合專業分工開發,另一方面,對於變更頻率較高的前端視覺部份,其修改波及後端資料處理程式碼的機會,也降低許多。

目前,許多原生的GUI應用程式框架,都採用了MVC。而且,目前影響力持續擴大的Web應用程式領域,同樣也有很高比例用MVC做為基礎的框架。

JavaScript的重要性提升
在Web應用程式領域的MVC實作方式的發展,有一點很有趣。早期的Web應用程式的MVC實作方式,會將MVC三者都擺在伺服器端。因為主要處理和使用者互動,以及視覺呈現的工作,都是由HTML來處理,而產生這些HTML頁面內容的程式碼,都是由伺服器端的程式處理。常見的PHP、ASP、JSP,都是伺服器端的腳本式程式語言,其主要用途就是用來產生這HTML頁面內容。

不過,隨著Web應用程式的普及,以及所扮演的重要性大增,原先單純靜態HTML所能提供的視覺效果及互動模式,就漸漸不能滿足使用者與開發者。久而久之,能在瀏覽器端執行的腳本式程式語言JavaScript的地位,就愈來愈重要,因為JavaScript能提供更豐富的視覺效果,以及和使用者互動的模式。也因此,開發者使用愈來愈多的JavaScript於Web應用程式之上,來提供更佳的使用者體驗。正因為JavaScript重要性大增,各瀏覽器開發團隊無不加緊腳步致力於JavaScript引擎的效能,以及穩定度。

這真是有趣的發展結果,當初JavaScript被發明出來,並沒有太多的開發者認真看待它。一來當初的實作品效率不好、穩定度也頗受人垢病。但是來自應用端的力量卻驅動著JavaScript的發展,以及廣泛使用。時至今日,JavaScript已經成為了重要的主流程式語言之一。對於想要開發Web應用前端程式的開發者而言,更是不可或缺的必備語言。這真可以說是時勢造英雄。

JavaScript在MVC中扮演的角色開始移動

隨著對JavaScript的依賴日增,也得到各家瀏覽器以開發技術做為後盾,JavaScript引擎愈來愈快、也愈來愈穩,使得開發者愈加在瀏覽器上執行程式。以往在伺服器端上由伺服器端程式產生負責視覺部份的HTML碼的模式及架構,慢慢轉變成為HTML碼僅做為視覺及操作介面的骨架,而其主體則由瀏覽器端上的JavaScript來負責處理。

舉例來說,一個頁面可能會含有一些動態生成的資料,以及伴隨而來的視覺效果。傳統上,會在伺服器端產生頁面內容時,就一併取得資料並且產生出對應的HTML碼,以呈現這些資料所對應的視覺效果。但是,改以JavaScript為主的做法,就會轉換成為伺服器端僅產生頁面的主要骨架,而之後的取得資料,以及產生這些資料所對應的HTML碼結果(事實上可能是DOM物件的操作),都是由執行JavaScript程式動態處理的。

在這種模式及架構下,MVC中的「V」,幾乎可以說是轉換到瀏覽器端,而取得資料的方式,也變成了主從(client/server)的架構。一樣是MVC,V的角色卻是由瀏覽器端上的JavaScript程式所扮演了。如此一來,MVC所帶來的好處似乎更被突顯。因為伺服器端和瀏覽器端的界線,畫出了前端和後端。專業分工的方式也可以更明確。現今,專業的前端程式設計者,多半嫻熟JavaScript的撰寫。前端和後端的技能取向也有了明確的分別。

除此之外,後端程式的角色也可被定位成是資料或是服務的提供者。後端程式並不處理和使用者所面對的視覺及操作介面,而是純粹的做為資料或資料服務的提供者。在這種情況下,還可以衍生出一些好處和變化。其中,有一個好處是更利於開發跨多前端平臺的系統。

須因應客戶端環境多樣化的發展
現在的Web應用程式,其實面對的客戶端環境愈來愈複雜。傳統上,Web應用程式要處理的客戶端議題多半是作業系統間的差異,以及因此而造成的瀏覽器的差異。為了讓前端程式能通行於各瀏覽器間,往往是前端程式開發者花費最多心力的地方。

這情況隨著瀏覽器上的標準逐漸統合,而有了頗多的改善。但是,另一方面也隨著行動裝置的普及,不論是智慧型手機或是平板電腦,都創造了各種不同的瀏覽條件。如何讓自己的Web應用程式兼容於這多樣化的終端設備,就成了Web應用程式者的挑戰之一。

因為不同的終端設備,顯示硬體規格不同,輸入設備也都不盡相同,甚至通訊條件也不同。對於行動裝置而言,就必須考量使用者所使用的終端設備,可能是在頻寬較低的通訊網路之下來設計。現在,同一個網路服務,要同時支援多種設備已經成為主流的趨勢,如何在架構設計上考量這個需要,使得開發上更為便利、更為省力、更容易擴充支援不同的終端設備,當然也會是有趣的議題。

前段文中所提到,將MVC中的V畫分至客戶端的方式,就很適合處理這種必須支援多種不同終端設備的情況。因為後端資料模型及資料處理的服務,多半是不會隨著終端設備的不同而改變。但是,處理視覺以及使用者互動的前端,則會跟著客戶端的終端設備差異而有所不同。而這種MVC模式及架構,因為視覺部份和其他部份相獨立、耦合關係低,而且皆於客戶端上執行,因此,就十分適合。

你可以只寫一份後端的程式碼,透過一個既定的介面供執行於客戶端的前端程式碼,來取得並操作資料。而這個介面,在現在多半都是以HTTP協定做為傳輸層的介面。透過HTTP有很多好處,一來是大多的防火牆設定都允許HTTP連線的建立。二者是,因為Web應用程式伺服器重要性的關係,具規模可擴充HTTP伺服器也有很多現成的工具及平臺。利用這種方式,可以很容易實作適合個人電腦瀏覽器上的Web前端程式。因為只需要利用JavaScript程式透過基於HTTP的服務介面取得、操作資料,就能動態在瀏覽器上呈現出各種需要的視覺效果。

在不同的手持裝置上,若是同樣也是基於瀏覽器平臺的前端程式,也只要針對不同類型的手持裝置,撰寫不同的JavaScript程式,來因應不同手持裝置的特性。甚至,對於那些不是基於瀏覽器平臺的原生手持裝置應用程式,也同樣可以透過基於HTTP的服務介面,來和後端的資料服務溝通。當然,同一個應用程式中,你還可以選擇混用原生使用者介面以及瀏覽器介面,但它們都只負責前端,而且都可以共用相同的後端。這就是這個架構的好處。

讓雲端服務可以在不同的前端裝置執行
現在大家都說雲端時代已經來臨,其實雲端不單只是口號,而是一種發展的結果。就像我們看這MVC模式發展的經過及趨勢,就能看出目前的發展已經朝向服務歸於雲端,而讓連結雲之各種不同客戶端上的前端,來處理各種客戶端上的差異。如此一來,雲端上的服務就可以標準化,也可以簡化,不必考慮太多終端設備間的差異,又能兼容各種終端設備。

 

專欄作者


熱門新聞

Advertisement