一、后端TS版搭起MVC架構(gòu)的web服務(wù)器
注意點(diǎn)：
1.用TS寫(xiě)node服務(wù)器需要先下node API的TS庫(kù)
2.通過(guò)引入文件,通過(guò)回調(diào)方式,將參數(shù)傳入引入文件進(jìn)行不同層的聯(lián)動(dòng)操作
3.事件偵聽(tīng),拋發(fā)的方式完成路由操作
項(xiàng)目目錄說(shuō)明：
1.main:
0)入口文件
1)創(chuàng)建了main單例,在當(dāng)前頁(yè)面執(zhí)行main實(shí)例的init方法,即直接node main.js開(kāi)啟服務(wù)
2)init方法中根據(jù)引入的sever類(lèi),創(chuàng)建server對(duì)象開(kāi)啟web服務(wù)
3)main類(lèi),創(chuàng)建時(shí)即注冊(cè)了購(gòu)物車(chē)增刪改查操作的事件以及對(duì)應(yīng)的觸發(fā)函數(shù)dataHandler
4)因?yàn)樗械挠|發(fā)函數(shù)是同一個(gè),根據(jù)傳進(jìn)來(lái)事件類(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接口類(lèi)型
2)拋發(fā)給main的實(shí)例去處理type類(lèi)型,data數(shù)據(jù),同時(shí)將http的req,res也傳遞出去
3.command:
0)主要用來(lái)處理各種業(yè)務(wù)邏輯,連接Model層等,工作類(lèi)似于controller層(這里包括ResDataShow,ResGoodsOperate,ResShoppingShow文件)
1)這里只寫(xiě)了部分功能的注釋?zhuān)?qǐng)查看ResGoodsOperate類(lèi)的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)物車(chē)表及商品表數(shù)據(jù)
2)創(chuàng)建model的單例,外部主要操作的是model單例
5.VO層:主要用來(lái)定義一些常量,或者說(shuō)是配置文件,方便根據(jù)不同需求直接修改配置文件中的參數(shù)即可,不用去每個(gè)程序文件中修改
6.Interface層:
0)存放接口文件
1)用于創(chuàng)建規(guī)范聲明數(shù)據(jù)類(lèi)型(TS中不能隨便定義var xx={a:1,b:"2",c:false}這樣的數(shù)據(jù))
2)用于創(chuàng)建規(guī)范的類(lèi)(如要求command層的類(lèi)都必須要寫(xiě)一個(gè)exec方法)
后端架構(gòu)圖：
二、TS前端MVC架構(gòu)
項(xiàng)目目錄說(shuō)明：
1.入口文件:
0)入口文件相當(dāng)于直接掛載到對(duì)應(yīng)的html頁(yè)面上,加載頁(yè)面時(shí),就直接執(zhí)行該文件,類(lèi)似于三階段實(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)物車(chē)列表頁(yè)面時(shí),加載該文件,具體細(xì)節(jié)看該ts文件的注釋
2.business:
0)專(zhuān)門(mén)處理通信模塊，項(xiàng)目主要封裝AJAX類(lèi)的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)物車(chē)功能,且接口必返回商品或者購(gòu)物車(chē)數(shù)據(jù),所以這里自動(dòng)更新Model層的存的數(shù)據(jù)(因?yàn)関iew層視圖主要是根據(jù)Model層里的數(shù)據(jù)進(jìn)行渲染的)
3.component:
1)寫(xiě)一些用于View層的組件,注意因?yàn)門(mén)S中沒(méi)有事件拋發(fā),所以用自己重寫(xiě)的events層來(lái)拋發(fā)數(shù)據(jù)(如stepNumber組件)
2)用在command層,實(shí)際還是當(dāng)成view層,做模板視圖作用
4.events:上述的重構(gòu)的事件拋發(fā)機(jī)制
5.Interface:存放接口文件,用于規(guī)范聲明數(shù)據(jù)類(lèi)型以及其他類(lèi)
6.utils:存放一些公用的工具ts文件
7.vo:主要用來(lái)定義一些常量,或者說(shuō)是配置文件,這里只寫(xiě)了事件類(lèi)型名稱(chēng),ajax后端接口的配置文件
8.command:
0)為了配合controller層而寫(xiě)的一些命令類(lèi),主要作用是在其中的exec方法中寫(xiě)業(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類(lèi),
2)必須具備有add, remove, dispatch三種方法, 而這三種方法相當(dāng)于是基于EmitterTarget中的三種方法封裝的
3)注意controller里的兩個(gè)屬性有不同的作用：commandList和list(繼承于EmitterTarget的屬性)
commandList存放命令類(lèi)型,對(duì)應(yīng)命令操作的實(shí)例化對(duì)象數(shù)組(不同類(lèi)的對(duì)象)
list存放命令類(lèi)型,對(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寫(xiě)組件的屬性對(duì)應(yīng)渲染到dom上。
3)每次操作(購(gòu)物車(chē)的增刪改查)引起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ù)類(lèi)型是什么，需要引入已有的數(shù)據(jù)類(lèi)型如ServerResponse，自定義創(chuàng)建如IRes這樣的接口。除此之外,我們只能通過(guò)斷言as或者聲明為any類(lèi)型(迫于無(wú)奈的情況下)
2. TS中沒(méi)有事件拋發(fā),所以在上述前后端操作中需要用到的事件拋發(fā)都是自己重寫(xiě)的
3. controller層中本來(lái)是想某個(gè)命令類(lèi)型對(duì)應(yīng)的是命令類(lèi)數(shù)組,但是因?yàn)門(mén)S沒(méi)有泛型類(lèi)數(shù)組不能直接存類(lèi)的數(shù)組,所以這里存的是類(lèi)對(duì)應(yīng)的實(shí)例化對(duì)象數(shù)組。==目的是想用工廠模式，每次調(diào)用命令時(shí),根據(jù)命令類(lèi)數(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ú)立拿開(kāi)復(fù)用的,不去操作任何數(shù)據(jù),只有數(shù)據(jù)進(jìn)入,數(shù)據(jù)拋出，==view層充當(dāng)?shù)氖且晥D模板引擎的角色==
8. MVC和MVVM的不同:
1)view層本身是沒(méi)有不做任何數(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)，獲取試聽(tīng)資格來(lái)試聽(tīng)我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門(mén)到精通。
京公網(wǎng)安備 11010802030320號(hào)