利用javascript實做 MVC 網頁(一)

網頁開發技術、開發模式不計其數，我無法窮究所有而知之，底下的構想也許已經有人在做了，只是我 孤陋寡聞，未聞其詳，如果有雷同，絕非抄襲。若有先進知其所以，亦請不吝指教! 由於一切尚在發想之中，並未完全實作出可用的系統，有關做法將分數篇說明。

源起

以前用 ASP 開發網站程式，都是在網頁中包程式碼，「專家說」這樣的寫法不好，網頁和程式混雜，不易系統維護，所以微軟推出 ASP.NET後，雖然繼續支援 Inline 的寫法，但專家都說這樣不好，所以開始改用 Code Behind寫法， 但總覺得 Code Behind把畫面和程式綁得很緊，造成美工人員設計好的頁面碼，程式人員還得再調整一次。

再者，VisualStudio的頁面設計不是那麼好用，甚至微軟提供的元件，在設計上有些繁雜，如果沒有 ASP.NET的背景，根本無法使用!
更重要一點，利用 ASP.NET設計的頁面，如果要轉換成別的語言，幾乎連頁面都需要整個重新改寫，降低了系統的再利用率，而後端程式和網頁過度相依，也影響程式的測試(尤其是單元測試)。

因為一直沒辦法好好駕馭CodeBehind(自認資質不好)，每當遇到要在前端使用JavaScript時更是痛苦，一直苦思有沒有好一點的方式，可以把網頁和程式碼分開。或許你會建議我使用MVC，是的，我也試過用 ASP.NET MVC ，可是仍不能擺脫網頁再利用率低的問題!

目標

1. 網頁可以獨立設計，可以真正使用前端元件(如jQuery.UI)
2. 前端程式碼，可以直接寫在網頁裡，不需要利用後端程式碼來安插（前端歸前端，後端歸後端）
3. 轉換平台時，可以保留前端的網頁設計（至少可以變動最小）
4. 就算沒有網頁，也可以對後端程式進行測試驗證（讓網頁與程式可以獨立開發）
5. 美工人員設計好的網頁，可以直接拿來做雛型展示，客戶審視合格的網頁雛型即可提供程式人員著手開發。 

理想架構

發想

網頁系統主要是由 UI(View)、後端程式(Control)、資料管理(Module)及資料(DB)所組成，為了能分模塊開發，所以有 MVC 的開發模式，我的構想也是借用MVC的概念：

1. 網頁屬UI，應該只用來呈現資訊、收集使用者的要求及回應要求
2. 後端程式負責餵資料給前端網頁，至於畫面的呈現方式，及各欄位填值，都由前端的Javascript負責，即原本由後端指定欄位內容的做法，改由前端處理。
3. 如果前端可以處理的，就不要丟回後端。
4. 如果不需要換網頁，就用AJAX向後端提出要求!
5. 後端程式(Control)獨立於網頁，而且只運行必要的運算，如身分檢核、資料內容驗證。
6. 需要跟資料庫溝通者，透過模組(Module)運作，模組負責向資料庫讀資料並回復給要求者，及應要求將資料寫入資料庫。
7. 如果網頁需要資料，必須透過後端程式向模組提出要求，模組不直接公開使用。

問題
在實驗的過程中遇到幾個未能克服的問題：

1. HTML本身無法處理Request，從瀏覽器POST回去的表單內容無法於直接於HTML中動態使用，仍需藉用後端的平台協助處理。
• 目前解法是在網頁的最前頭利用 ASP.NET接收，再轉成javascript變數嵌於網頁上，雖然無法完全達成上面的目標，至少此一接收的程式很簡單，而且可以獨立成一個檔案(整個系統都用同一支)，只要在網頁上用一行 <% =getPostData %> 就可以達成，對美工人員不會造成困擾。
• 對於日後更換平台，只需將網頁之副檔名更名，再將後端程式換成對應的平台的程式碼即可!
2. 如果使用 WebService來處理前端的需求，WebService無法直接處理 Redirect 的要求，所以後端程式(Control)不能全部用WebService來實作(原本是想全部用WebService實作後端)
• 所以若有Redirect需求者，就必須POST給 .aspx 的網頁程式。
3. 無法享用 ASP.NET MasterPage的好處，MasterPage一直是我製作網頁時愛用的方式，它可以讓我把網站風格一次搞定，可惜這是ASP.NET的特異功能，一般網頁是無福受用。
• 還好尚有frame可利用，雖然沒有MasterPage完美，但至少解決了網站風格一致性的問題。

系列連結：

利用javascript實做 MVC 網頁(二)
利用javascript實做 MVC網頁(三)

2013.05.17 修正用字