一、後端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

==總結==TS和JS有很大不一樣的地方在於資料的規範型，所以各種地方都必須要涉及到去宣告資料型別是什麼，需要引入已有的資料型別如ServerResponse，自定義建立如IRes這樣的介面。除此之外,我們只能透過斷言as或者宣告為any型別(迫於無奈的情況下)TS中沒有事件拋發,所以在上述前後端操作中需要用到的事件拋發都是自己重寫的controller層中本來是想某個命令型別對應的是命令類陣列,但是因為TS沒有泛型類陣列不能直接存類的陣列,所以這裡存的是類對應的例項化物件陣列。==目的是想用工廠模式，每次呼叫命令時,根據命令類陣列建立新的例項，這樣在資料重新整理或者下一次觸發命令時,上一次的資料不會殘留造成汙染。由於TS的缺陷,這裡用的例項化物件即單例模式。==資料模型和顯示模型是完全分離的，實現了元件之間的通訊，以及資料改變而重新渲染頁面(單向渲染？)這裡的MVC模式實際上M V C三層之間資料是可以雙向通訊的，後面改良的RMVP模式V和M層不進行資料通訊TS版的MVC架構，即model層變動->view層改變的單向資料流有點像React的單向資料流view層和component層是可以獨立拿開復用的,不去操作任何資料,只有資料進入,資料丟擲，==view層充當的是檢視模板引擎的角色==MVC和MVVM的不同:1)view層本身是沒有不做任何資料操作,view丟出的資料交給controller去改變model view接收資料,引起檢視模板改變,使用者操作view層,view層丟出資料,交給其它層，如果這個層是controller層這裡就是MVC結構2)如果這裡是丟出資料交給的是Model層的viewModel，則這裡是MVVM結構，viewModel即是VM，不僅僅是儲存檢視的中心，還充當完成一部分controller層的職責前端架構圖：以ShoppingList的操作為例