? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??SongBook
1.整體架構(gòu)
? ? 1-1布局結(jié)構(gòu)上
? ? ? ? ? 采用Songbook組件作為本項(xiàng)目的容器，在其中分為上中下三部分
? ? ? ? ? ? ? SongbookHeather:主要包含<返回><用戶姓名><完成>三個(gè)小區(qū)域
? ? ? ? ? ? ? NavBar:作為導(dǎo)航條 循環(huán)子組件NavBarBtn來展示小的tab項(xiàng)
? ? ? ? ? ? ? SongbookBody: 主要包含三個(gè)子頁面內(nèi)容
? ? 1-2 reducer拆分
? ? ? ? ? ? ????分為五個(gè)文件
? ? ? ? ? ? ? ? index.js 作為入口文件
? ? ? ? ? ? ? ? dialog.js 管理組件dialog的狀態(tài) 包括展示內(nèi)容及點(diǎn)擊方法函數(shù)
? ? ? ? ? ? ? ? entities.js 作為所有后端所傳經(jīng)過扁平化處理的音樂id實(shí)體
? ? ? ? ? ? ? ? songBook.js 管理整個(gè)曲庫狀態(tài) 而其中又包含曲庫整體狀態(tài)songBookState以及子頁面mySongState的reducer 因?yàn)檫@次項(xiàng)目中只涉及我的音樂這個(gè)子頁面因此放到一起 如果有另外兩個(gè)頁面將會(huì)將其再次拆分成單獨(dú)文件
? ? ? ? ? ? ? ? userInfo.js 負(fù)責(zé)管理用戶昵稱 token 以及mid 必要時(shí)瓶逃，將會(huì)利用localStorage進(jìn)行token的存儲(chǔ)以實(shí)現(xiàn)一段時(shí)間內(nèi)自動(dòng)登錄
? ? ? ? 1-3 ServerApi?中間件
? ? ? ? ? ? ? 在中間件中惫东，首先依舊按照以往的方式?通過判斷action有無SERVER_API屬性來進(jìn)行攔截秀撇，之后通過創(chuàng)建promise來進(jìn)行異步action的傳遞，而因?yàn)榇隧?xiàng)目中加入了登錄功能模塊?有因?yàn)橹挥泻唵蔚墨@取token沒有復(fù)雜的驗(yàn)證等?因此我選擇了將其也寫入serverAPI中而沒有單獨(dú)抽離出來劫乱。那么在serverAPI中便首先需要定義一個(gè)數(shù)組隊(duì)列來暫存因還沒有登錄成功且需要token的action巡李。? 當(dāng)?shù)卿浀腶ction請求成功后?將暫存數(shù)組中的action一?一?進(jìn)行dispatch從而成功拉取數(shù)據(jù)
2.通用型組件
? ? ? ? 在項(xiàng)目中因?yàn)槌３Ｐ枰褂玫紻ialog和提示信息的TipsView 因此便想到將其構(gòu)建成一個(gè)通用型的組件?其實(shí)像Player中的滑動(dòng)條在最除也是一個(gè)個(gè)通用型組件?但是考慮到本項(xiàng)目中需要有截取片段功能?便將其構(gòu)建成一個(gè)適合本項(xiàng)目的組件?而沒有將其再次抽離成通用型澄者。?
3.數(shù)據(jù)扁平化處理
? ? ? ? ? ?在數(shù)據(jù)扁平化處理上?因?yàn)橥ㄟ^觀察后端所返回?cái)?shù)據(jù)?在其中音樂的信息可以扁平化處理出來?且主鍵為id笆呆，如果作者的信息為對(duì)象?那么將可以再次進(jìn)行拆解
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2048
1.整體架構(gòu)
? 1-1布局結(jié)構(gòu)上
? ? ? ? ? 采用Game組件作為本項(xiàng)目的容器，在其中分為上下三部分
?GameHead:主要包含游戲名稱?分?jǐn)?shù)?介紹?重新開始按鈕
?GameBody:作為游戲的主體部分?通過滑動(dòng)或按鍵操作進(jìn)行控制
2.通用型組件
? ? ? ? 在項(xiàng)目中游戲主體按鈕可以構(gòu)建成一個(gè)只要傳入數(shù)據(jù)有變化且不為0 便可以有彈動(dòng)效果的小方塊
? ? ? ? 而增加積分的動(dòng)態(tài)加分塊也可以構(gòu)建成一個(gè)累計(jì)積分動(dòng)態(tài)效果的通用型小組件
3.reducer
? ? ? ? 在reducer中?通過將handlemove操作行為抽離出來?來達(dá)到reducer主體的簡潔性?也可將其單獨(dú)放在一個(gè)專門處理各種事件的文件中?因此項(xiàng)目結(jié)構(gòu)較為簡小?因此放在其中粱挡。
