前端模型系統建模分析
前言：
接觸Angular技術也有一年多了，來Newegg也剛好一年了，在這一年里，學到了不少關於前端技術的精髓，但是讓我最興奮的，莫過於發現了模型系統，之所以認為它神奇，是因為一切復雜問題其實都可以通過模型系統來很好的進行抽象建模，使得你的工作可是事半功倍。
一、首先我想談一下對angular的認識：
1)、AngularJs通過數據雙向綁定使得view層和Controller進行很方便的數據操作，並帶來很好的用戶體驗。
2)、AngularJs使用指令directive、服務service等進行更好的模塊化管理，使得代碼組件化管理，做到了更好的復用。
3)、AngularJs里內置的很多服務能夠簡化開發成本，如http服務等。
但是，超爽的開發體驗必然會有一些難以啟齒的痛點，我記得我當年一開始做一個郵件模板管理系統時，其中有一個頁面是關於新建郵件模板的業務邏輯，這個頁面是相當復雜的，其中一個頁面就包括模板新建、模板測試、模板copy、以及預覽模板等功能，前端部分我只做了一小部分，可是這部分在之前的controller中新加業務，導致controller中的代碼達到一個爆炸式的增長，這個JS居然高達1000多行，對后續維護造成非常大的不便，這些痛點在我心里非常之痛。
之后我終於明白，原來我在整超神的controller (Gode Like!)
二、什么是超神的controller (God like！)？
1)、前台HTML代碼和后端view的JS代碼進行綁定。
2)、controller中做數據初始化。
3)、controller和service層做數據交互。
4)、controller層對頁面控制展示等做控制。
5)、controller中包含頁面表單的相關驗證以及對service層提交數據。
6)、controller層對業務邏輯的封裝。
以上幾點，相信大家在開發Angular的時候，都深有體會，因為angular你在網上找的demo他就是快，直接在view層綁定一個model的變量，然后在controller中即可進行雙向綁定了，那么隨着需求不斷迭代，我想幾個月后，你自己都不願意看自己的代碼了，God like自然也就來了。
在這里，自然會想到我們的設計原則：單一職責原則！切記，模塊的職責要單一，一個類只干一件事，會讓代碼更清晰！
想要解決這個超神的Controller，我想和大家來首先先聊一下，前端程序的本質是什么：
三、前端程序的本質：
前端系統的本質：業務模塊 + 頁面 + 組件 + 功能點。
組件又分為：
1)、公共UI組件，例如外觀上長什么樣子，行為上他能干什么。
2)、業務組件，外觀是業務內容，行為是業務是什么，在什么特定場景下能干什么。
對於UI組件，我們可能會想到有表單驗證、用戶控件、以及一些第三方組件等，這些可能有架構師或者你自己來封裝，這里我要重點強調下業務組件，如何將如何將業務模塊化、服務化、一旦做到這兩點，那以后的開發可謂勢如破竹。
三、例子分析
我們來分析下如下這個例子：
上面這個頁面是我們再熟悉的不過的登錄頁面，復用度不用多說，經常在不同的系統中會見到這個模塊，然而我們每次開發這個頁面的時候都要去手寫HTML然后創建后台controller代碼嗎？顯然這樣做你就OUT了，我們何不將他封裝成一個directive，這樣每次只需要引入這個directive之后即可，而對應的login 向服務器發請求等只需要做成配置，將用戶名和密碼發送到服務器端就可以了，這樣豈不是以后再做另一個系統的時候直接拿directive的JS引過來就可以了，是不是很屌呢？
說道這里我想說我們的另一個原則
知道最少原則，即，依賴自制，模塊間要做到高內聚，模塊外做到低耦合，只需向模塊外暴露對應的數據接口就可以了，避免看復雜的邏輯導致開發效率變低。
有了以上的認識，你是否發現，在我們的日常開發中，如果能多引入模塊化，服務化的開發思想，是否會讓你覺得人生豁然開朗了呢？那么模塊化更高境界是什么？
答案就是：系統建模！
四、前端系統建模
我相信所有的同學都知道，下面這兩點：
但是我要說，這一切其實都是在建模！
那么系統建模包括哪些呢？
那么模型系統中，哪些可以進行模型化呢？
1)、數據模型化，通過Json schema將前端數據和后端數據進行通信，實現數據建模。
2)、業務模型化，將業務邏輯封裝成模塊，之后只需使用依賴注入原則引入即可使用。
3)、表單模型化，將表單做成公共組件，方便調用。
4)、列表模型化，列表進行公共組件封裝。
5)、橋梁指令模型化，鏈接業務模型，數據模型和視圖模型，模塊間的交互使用標准接口，實現組件的模型化管理。
五、前端模型系統架構猜想
那么更具體的前端系統建模是怎么看呢，下面為大家隆重介紹具體的模型系統！
上述圖是我在一位高人的指點下分析出來的前端模型系統構架猜想，這其中的好處就在於：
1)、實現了前端用戶視圖層、業務邏輯層、數據層、后端服務層的解耦，使得系統耦合性更低，更具有彈性。
2)、前端頁面將常用組件進行封裝，如列表、表單、下拉菜單、等的封裝，以后直接用即可。
3)、使用橋梁指令，將一些控件的行為進行指令化得管理，例如一個editor中的基本驗證，使用指令來完成，以后類似editor直接調用指令即可，省去重寫驗證的邏輯。
4)、業務邏輯服務化管理，不在針對某個單一的業務進行編程，而是將業務歸類，做成配置項等，以后只需調用公共業務組件即可。
5)、前后端使用Json schema進行數據通信，后端使用什么語言不再重要，只需做成service API 服務即可。
6)、后端模型黑盒化管理，前端程序員不需要知道后端代碼，只需通過request向后端發請求拿到response做出處理即可。
其實這一切的一切都離不開兩個字：抽象！
記得大家說爛了的道理：一切事物接對象，但在我看來，終生萬物皆抽象！
開發程序本是照本宣科，BSD說什么我們做什么，但是優秀的程序員總會看到眾生萬物背后的道，從而做出松耦合、更具彈性的設計。
六、生活感悟
這一年里，我沒請過假，沒遲過到、沒早過退、Bug數也急劇降低，人生那么短暫，最痛苦的事莫過於不進步、不學習、不努力、不思考、
賀煒的一句話驚醒了我，人的一輩子除去睡覺也就那么一萬多天，區別就在於你真正是活了一萬多天，還是一件事重復了一萬多次，人生如白駒過隙，以后的日子要倍加珍惜，相信下一年里一定更有收獲！