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

　　注意點：

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

　　2.通過引入文件,通過回調(diào)方式,將參數(shù)傳入引入文件進行不同層的聯(lián)動操作

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

　　項目目錄說明：

　　1.main:

　　0)入口文件

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

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

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

　　4)因為所有的觸發(fā)函數(shù)是同一個,根據(jù)傳進來事件類型的不同而去創(chuàng)建command對象并執(zhí)行其exec方法

　　2.sever:

　　0)負責web服務

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

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

　　3.command:

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

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

　　4.model:

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

　　1)主要存放購物車表及商品表數(shù)據(jù)

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

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

　　6.Interface層:

　　0)存放接口文件

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

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

　　后端架構圖：

　　二、TS前端MVC架構

　　項目目錄說明：

　　1.入口文件:

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

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

　　2.business:

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

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

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

　　3.component:

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

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

　　4.events:上述的重構的事件拋發(fā)機制

　　5.Interface:存放接口文件,用于規(guī)范聲明數(shù)據(jù)類型以及其他類

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

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

　　8.command:

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

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

　　9.controller

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

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

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

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

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

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

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

　　10.model

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

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

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

　　->controller層執(zhí)行command層的命令進行操作

　　->command層去執(zhí)行調(diào)用viewModel

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

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

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

　　==總結==

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

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

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

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

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

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

　　7. view層和component層是可以獨立拿開復用的,不去操作任何數(shù)據(jù),只有數(shù)據(jù)進入,數(shù)據(jù)拋出，==view層充當?shù)氖且晥D模板引擎的角色==

　　8. MVC和MVVM的不同:

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

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

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

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