一、后端TS版搭起MVC架構(gòu)的web服務(wù)器

　　注意點(diǎn)：

　　1.用TS寫node服務(wù)器需要先下node API的TS庫(kù)

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

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

　　項(xiàng)目目錄說(shuō)明：

　　1.main:

　　0)入口文件

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

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

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

　　4)因?yàn)樗械挠|發(fā)函數(shù)是同一個(gè),根據(jù)傳進(jìn)來(lái)事件類型的不同而去創(chuàng)建command對(duì)象并執(zhí)行其exec方法

　　2.sever:

　　0)負(fù)責(zé)web服務(wù)

　　1)接收處理接口請(qǐng)求傳過(guò)來(lái)的data數(shù)據(jù)及type接口類型

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

　　3.command:

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

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

　　4.model:

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

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

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

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

　　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層的類都必須要寫一個(gè)exec方法)

　　后端架構(gòu)圖：

　　二、TS前端MVC架構(gòu)

　　項(xiàng)目目錄說(shuō)明：

　　1.入口文件:

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

　　1)以ShoppingList.ts舉例,當(dāng)渲染購(gòu)物車列表頁(yè)面時(shí),加載該文件,具體細(xì)節(jié)看該ts文件的注釋

　　2.business:

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

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

　　2)因?yàn)楹笈_(tái)只實(shí)現(xiàn)了商品列表和購(gòu)物車功能,且接口必返回商品或者購(gòu)物車數(shù)據(jù),所以這里自動(dòng)更新Model層的存的數(shù)據(jù)(因?yàn)関iew層視圖主要是根據(jù)Model層里的數(shù)據(jù)進(jìn)行渲染的)

　　3.component:

　　1)寫一些用于View層的組件,注意因?yàn)門S中沒有事件拋發(fā),所以用自己重寫的events層來(lái)拋發(fā)數(shù)據(jù)(如stepNumber組件)

　　2)用在command層,實(shí)際還是當(dāng)成view層,做模板視圖作用

　　4.events:上述的重構(gòu)的事件拋發(fā)機(jī)制

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

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

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

　　8.command:

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

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

　　9.controller

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

　　1)總結(jié)：controller相當(dāng)于是整個(gè)前端項(xiàng)目的觀察者,繼承EmitterTarget類,

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

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

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

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

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

　　10.model

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

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

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

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

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

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

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

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

　　==總結(jié)==

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

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

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

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

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

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

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

　　8. MVC和MVVM的不同:

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

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

　　前端架構(gòu)圖：以ShoppingList的操作為例

　　更多關(guān)于html5培訓(xùn)的問(wèn)題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項(xiàng)目實(shí)操的話可以點(diǎn)擊咨詢課程顧問(wèn)，獲取試聽資格來(lái)試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。