示例圖

硬編碼——>testdata——>model——>fake_api—>api

說(shuō)明

前端項(xiàng)目在開(kāi)發(fā)和調(diào)試中少不了對(duì)數(shù)據(jù)的展示和處理

如果是直接從api中獲取數(shù)據(jù)涉及到的環(huán)節(jié)太多，對(duì)于初學(xué)者不太友好

所以在開(kāi)發(fā)過(guò)程中可以數(shù)據(jù)存放可采用如上述動(dòng)態(tài)的方式

• 第一步 硬編碼

  最初級(jí)的階段，每個(gè)組件把它所需要的數(shù)據(jù)，聲明成變量硬編碼在代碼文件中，方便組件的調(diào)用。

• 第二步 testdata

  一般可以直接從第二步開(kāi)始

  在項(xiàng)目文件夾中創(chuàng)建個(gè)testdata文件夾,將數(shù)據(jù)按模塊放入testdata文件夾上的文件中，如 將blogs 數(shù)據(jù) 在blog.js中聲明成變量并導(dǎo)出,組件要使用數(shù)據(jù)直接引用即可。

  • 優(yōu)勢(shì) 便于查找,方便數(shù)據(jù)的復(fù)用，同時(shí)還可以把數(shù)據(jù)的相關(guān)信息，如對(duì)應(yīng)的api信息放入文件中，方便查閱

• 第三步 model

  編寫(xiě)model,在model的state里引用testdata的文件，修改組件代碼，更改獲取數(shù)據(jù)的方式為connect,同時(shí)在model里面添加reducer,支持修改數(shù)據(jù)操作，讓組件在提交數(shù)據(jù)時(shí)可以直接dispatch

• 可選步 subscribe

  支持網(wǎng)頁(yè)在變更路由時(shí)，對(duì)model里的數(shù)據(jù)進(jìn)行變動(dòng)，減少組件間數(shù)據(jù)的參數(shù)傳遞

  例如對(duì)于一個(gè)list列表，它的每一個(gè)項(xiàng)的內(nèi)容是不同的

  要在詳情頁(yè)獲取相關(guān)項(xiàng)內(nèi)容可以采取如下步驟

  1. 路由跳轉(zhuǎn)到detail/:id(對(duì)應(yīng)項(xiàng)id)　 when 組件觸發(fā)事件
  2. 獲取id —> 修改model里的currentItem when subscriber 監(jiān)聽(tīng)路由變化
  3. 渲染詳情頁(yè) (對(duì)應(yīng)組件) when router　監(jiān)聽(tīng)路由
  4. 獲取currentItem when 組件connect model

• api

  待更新...

優(yōu)勢(shì)

采用分步開(kāi)發(fā)，雖然多了些看似無(wú)關(guān)的代碼，但是減輕了任務(wù)的復(fù)雜性，同時(shí)也方便了在調(diào)試中對(duì)于問(wèn)題的定位

另外一點(diǎn)問(wèn)題

在編寫(xiě)model時(shí)往往可以復(fù)用文件,甚至是以前項(xiàng)目的代碼