一、后端TS版搭起MVC架構的web服務器

　　注意點：

　　1.用TS寫node服務器需要先下node API的TS庫

　　2.通過引入文件,通過回調方式,將參數傳入引入文件進行不同層的聯動操作

　　3.事件偵聽,拋發的方式完成路由操作

　　項目目錄說明：

　　1.main:

　　0)入口文件

　　1)創建了main單例,在當前頁面執行main實例的init方法,即直接node main.js開啟服務

　　2)init方法中根據引入的sever類,創建server對象開啟web服務

　　3)main類,創建時即注冊了購物車增刪改查操作的事件以及對應的觸發函數dataHandler

　　4)因為所有的觸發函數是同一個,根據傳進來事件類型的不同而去創建command對象并執行其exec方法

　　2.sever:

　　0)負責web服務

　　1)接收處理接口請求傳過來的data數據及type接口類型

　　2)拋發給main的實例去處理type類型,data數據,同時將http的req,res也傳遞出去

　　3.command:

　　0)主要用來處理各種業務邏輯,連接Model層等,工作類似于controller層(這里包括ResDataShow,ResGoodsOperate,ResShoppingShow文件)

　　1)這里只寫了部分功能的注釋，請查看ResGoodsOperate類的addGoods,deleteGoods,getShoppingItem,getShoppingIndex方法

　　4.model:

　　0)充當數據庫的角色,web服務只要不掛,這些數據就會一直保持動態更新(掛了,就恢復為初始值了)

　　1)主要存放購物車表及商品表數據

　　2)創建model的單例,外部主要操作的是model單例

　　5.VO層:主要用來定義一些常量,或者說是配置文件,方便根據不同需求直接修改配置文件中的參數即可,不用去每個程序文件中修改

　　6.Interface層:

　　0)存放接口文件

　　1)用于創建規范聲明數據類型(TS中不能隨便定義var xx={a:1,b:"2",c:false}這樣的數據)

　　2)用于創建規范的類(如要求command層的類都必須要寫一個exec方法)

　　后端架構圖：

　　二、TS前端MVC架構

　　項目目錄說明：

　　1.入口文件:

　　0)入口文件相當于直接掛載到對應的html頁面上,加載頁面時,就直接執行該文件,類似于三階段實際運行在生產環境的是dist靜態資源,這里的HTML頁面相當于public下的index.html,入口文件相當于是app.js,如ShoppingList.ts,GoodList.ts

　　1)以ShoppingList.ts舉例,當渲染購物車列表頁面時,加載該文件,具體細節看該ts文件的注釋

　　2.business:

　　0)專門處理通信模塊，項目主要封裝AJAX類的post,get方法

　　1)給外部其他層去進行ajax請求(主要是view層的shoppingTable中添加,刪除,選中等功能需要調用,這里不應該在view層內進行ajax請求,而是拋出事件在控制層進行數據請求)

　　2)因為后臺只實現了商品列表和購物車功能,且接口必返回商品或者購物車數據,所以這里自動更新Model層的存的數據(因為view層視圖主要是根據Model層里的數據進行渲染的)

　　3.component:

　　1)寫一些用于View層的組件,注意因為TS中沒有事件拋發,所以用自己重寫的events層來拋發數據(如stepNumber組件)

　　2)用在command層,實際還是當成view層,做模板視圖作用

　　4.events:上述的重構的事件拋發機制

　　5.Interface:存放接口文件,用于規范聲明數據類型以及其他類

　　6.utils:存放一些公用的工具ts文件

　　7.vo:主要用來定義一些常量,或者說是配置文件,這里只寫了事件類型名稱,ajax后端接口的配置文件

　　8.command:

　　0)為了配合controller層而寫的一些命令類,主要作用是在其中的exec方法中寫業務邏輯

　　1)以ShowShoppingCommand為例,每次觸發事件執行exec方法,作用是重新生成shoppingTable視圖

　　9.controller

　　0)項目的控制中心,充當觀察者的角色,其中還用到了抽象工廠模式+單例模式(本來打算用工廠模式)

　　1)總結：controller相當于是整個前端項目的觀察者,繼承EmitterTarget類,

　　2)必須具備有add, remove, dispatch三種方法, 而這三種方法相當于是基于EmitterTarget中的三種方法封裝的

　　3)注意controller里的兩個屬性有不同的作用：commandList和list(繼承于EmitterTarget的屬性)

　　commandList存放命令類型,對應命令操作的實例化對象數組(不同類的對象)

　　list存放命令類型,對應命令操作的實例化對象的exec方法的數組(有點像commandList的底層實現)

　　4)具體細節看MainController.ts文件的注釋

　　10.model

　　1)viewModel:主要用的是其單例,存放兩個屬性divCon容器和showTable模板,這里是用作前端引擎模板作用(根據ShowShoppingCommand.ts以及入口文件ShoppingList.ts推斷)

　　2)mainModel:主要是存數據的作用,完成的目的是為了組件之間的通信以及利用set get寫組件的屬性對應渲染到dom上。

　　3)每次操作(購物車的增刪改查)引起mainModel層存儲的數據變動(setter)(入口文件ShoppingList.ts綁定通知的事件)

　　->controller層執行command層的命令進行操作

　　->command層去執行調用viewModel

　　->viewModel去調用view層的模板重新渲染視圖到頁面

　　->view層渲染過程中請求mainModel層的數據(getter)

　　11.view:展示插入到HTML頁面的主要內容,結合了Component層中的組件,Model層MainModel數據,business層的請求后臺接口操作,Utils層的工具方法,VO層的配置常量,interface層的接口規范,events層因為component層組件需要數據拋發接收,更多細節請看源碼ShoppingTable

　　==總結==

　　1. TS和JS有很大不一樣的地方在于數據的規范型，所以各種地方都必須要涉及到去聲明數據類型是什么，需要引入已有的數據類型如ServerResponse，自定義創建如IRes這樣的接口。除此之外,我們只能通過斷言as或者聲明為any類型(迫于無奈的情況下)

　　2. TS中沒有事件拋發,所以在上述前后端操作中需要用到的事件拋發都是自己重寫的

　　3. controller層中本來是想某個命令類型對應的是命令類數組,但是因為TS沒有泛型類數組不能直接存類的數組,所以這里存的是類對應的實例化對象數組。==目的是想用工廠模式，每次調用命令時,根據命令類數組創建新的實例，這樣在數據刷新或者下一次觸發命令時,上一次的數據不會殘留造成污染。由于TS的缺陷,這里用的實例化對象即單例模式。==

　　4. 數據模型和顯示模型是完全分離的，實現了組件之間的通信，以及數據改變而重新渲染頁面(單向渲染?)

　　5. 這里的MVC模式實際上M V C三層之間數據是可以雙向通信的，后面改良的RMVP模式V和M層不進行數據通信

　　6. TS版的MVC架構，即model層變動->view層改變的單向數據流有點像React的單向數據流

　　7. view層和component層是可以獨立拿開復用的,不去操作任何數據,只有數據進入,數據拋出，==view層充當的是視圖模板引擎的角色==

　　8. MVC和MVVM的不同:

　　1)view層本身是沒有不做任何數據操作,view丟出的數據交給controller去改變model view接收數據,引起視圖模板改變,用戶操作view層,view層丟出數據,交給其它層，如果這個層是controller層這里就是MVC結構

　　2)如果這里是丟出數據交給的是Model層的viewModel，則這里是MVVM結構，viewModel即是VM，不僅僅是存儲視圖的中心，還充當完成一部分controller層的職責

　　前端架構圖：以ShoppingList的操作為例

　　更多關于html5培訓的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。