完整JavaWeb專案筆記 第十部分-Javascript的MVC設計模式
文章目錄
一 MVC是一種設計思想
老生常談的一個詞兒“MVC”，各種框架都會說自己是MVC、MVVC或者其他的云云，那麼MVC到底是什麼？我個人傾向於這是一種設計思想。將業務設計、資料訪問以及請求處理或檢視繪製等功能實現分離，各自進行調整時而不會產生嚴重的耦合問題。這是對程式碼可維護性、健壯性的一種保障。
在進行服務端設計的時候，Service層、Dao層及Servlet層是相互分離的，Service層僅僅處理業務邏輯，Dao也只是進行資料訪問，Servlet做的更少僅處理請求並做應答。
Javascript雖然不是嚴格的面嚮物件語言，但這並不妨礙我們使用MVC的設計思想來實現功能。
之前在漢普做產品設計的時候，同組有一個做前端小夥子，據說有三年的前端開發經驗，我必須承認，其編碼熟練度是完全OK的，但是我並不贊同他的設計方法，就此事我們也爭論過很多。殘酷的事實證明了我是對的，當他的Js檔案已經超過了五千行甚至八千行，存在了大量重複程式碼後，哪怕我們僅僅想做一個很小的功能調整，也已經變得異常困難（每次變動都需要全文搜尋，逐行檢查，有相互呼叫的時候簡直要摔鍵盤）。
後來他跟我抱怨說，工作壓力太大，不想做了。其實根源上就是程式碼結構的不合理導致的，這一點對於任何一個強大的開發者而言都是致命的。當重構已經變得困難，那麼維護也無從談起，倍增的額外工作給精神上造成的壓力不可小覷。
二 面向物件的設計
Js的編寫很靈活，它的靈活性為編碼帶來的無限的可能性，充滿了未知的魅力。靈活本身就是個雙刃劍，如果你對Js的解釋邏輯不甚瞭解，那麼你的每一行程式碼都可能存在Bug。我不建議任何人，哪怕是有著豐富工作經驗的前端開發者，使用任何看似華麗簡潔的語法。
能通過基礎語法實現的功能，絕不用更難以遷移的語法特性代替（如果你做過跨語言平臺設計，那麼翻譯工作可能死在特殊語法上，那時你會知道你多麼的痛恨華麗的語法特性）！華麗的設計應該是模式上的美觀，更好的功能延展，更強的維護效能，更清晰的邏輯結構。
所以我建議編寫Js儘量以物件的方式進行設計，將方法、屬性都封裝在物件內部，這樣不論對於程式碼本身的良好結構，還是團隊協作時可能產生的覆蓋問題，都能最大限度的提供保障。
我本身並不怎麼會寫Js，我更擅長將Js當作Java與Json的結合體。這裡我列舉自己常用的一種Js編寫模式，大家也可以從網路上搜索其他朋友的建議。這是基於Jquery實現的使用者登陸頁的指令碼，僅僅定義了基本的結構，後面章節會把實現補充進去，Jquery語法大家可以從其他途徑瞭解，如下：
$(function () {
LoginPage.initial();
});
var LoginPage = {
initial: function () {
LoginPageMVC.View.initial();
},
urls: {
base: 'http://localhost:8080/JianZi',
login: {
url: BaseUrl + '/user',
method: 'POST',
params: {
'action': 'login',
'phone': '',
'password': ''
}
},
register: {
url: BaseUrl + '/user',
method: 'POST',
params: {
'action': 'register',
'phone': '',
'password': '',
'nickname': ''
}
}
}
};
var LoginPageMVC = {
Model: {},
View: {
initial: function () {
},
refresh: function () {
}
},
Controller: {
login: function () {
},
register: function () {
}
}
};三 簡單的拆解及拼裝
整個Js檔案裡僅有三部分，頭部是Jquery的標誌性語法：
$(function()){}其次是和頁面相關的全域性設定，我常常會寫入請求路徑，初始化頁面的方法排程：
var LoginPage = {
initial: function () {
},
urls: {
login: {
},
register: {
}
}
};最後一個是和頁面相關的名為MVC的物件，它包含了本頁需要的資料模型、檢視操作（頁面的初始化、更新及其他因資料變動導致的檢視更新操作）以及請求處理方法：
var LoginPageMVC = {
Model: {},
View: {
initial: function () {
},
refresh: function () {
}
},
Controller: {
login: function () {
},
register: function () {
}
}
};整個頁面的處理流暢大致如下：
- 通過Page.intial()呼叫MVC.View.intial()初始化頁面
- 通過MVC.Controller.function()發起請求獲取資料
- 將應答資料繫結至MVC.Model
- 通過MVC.View.update/refresh()更新頁面
so，如此簡單，模式統一，維護方便，連註釋都不需要多加。當然這跟專案規模和具體的應用場景有關，參加過大型專案開發的朋友應該知道規範的重要性，沒有最好，只有更適合，不對此做更多討論。