上圖是風(fēng)袖首頁最終完成的部分頁面，可以看出，這里1、2部分都是theme主題 。但這只是首頁的部分頁面，首頁部分有好幾種主題。目前代碼如下：

/**theme.js*/ import { Http } from "../utils/http" class Theme {static locationA = 't-1'static async getHomeLocationA() {const data = await Http.request({url: `theme/by/names`,data: {names: Theme.locationA}})return data} } export {Theme } /*home.js*/ Page({data: {themeA:null,bannerB:null,grid:[],activityD:null},onLoad:async function (options) {this.initAllData();},async initAllData(){const themeA = await Theme.getHomeLocationA();const bannerB = await Banner.getHomeLocationB();const grid = await Category.getHomeLocationC();const activityD = await Activity.getHomeLocationD();this.setData({themeA:themeA[0],bannerB,grid,activityD})} })

?頁面效果如下：

現(xiàn)在想要實現(xiàn)第一張圖中2部分。 按照前面的思路，theme.js中代碼如下：

import { Http } from "../utils/http" class Theme {static locationA = 't-1'static locationE = 't-2'static async getHomeLocationA() {const data = await Http.request({url: `theme/by/names`,data: {names: Theme.locationA}})return data}/**新增方法*/static async getHomeLocationE() {return await Http.request({url: `theme/by/names`,data: {names: Theme.locationE}})} } export {Theme }

從這里可以看出來，如果再來一個theme，是不是還要在寫一個方法，例如getHomeLocationF，是不是又要重新再發(fā)一次Http請求。?優(yōu)化一下，將部分Http整合在一起，使其只發(fā)一遍http請求。theme.js第一版代碼：

import { Http } from "../utils/http" class Theme {static locationA = 't-1'static locationE = 't-2'static locationF = 't-3'static locationH = 't-4'static async getThemes() {const names = `${Theme.locationA},${Theme.locationE},${Theme.locationF},${Theme.locationH}`return await Http.request({url: `theme/by/names`,data: {names: names}})}static async getHomeLocationA() {const data = await Http.request({url: `theme/by/names`,data: {names: Theme.locationA}})return data}static async getHomeLocationE() {return await Http.request({url: `theme/by/names`,data: {names: Theme.locationE}})} } export {Theme }

將所有關(guān)于theme的請求，全部放在一個Http中，傳參傳的是一組數(shù)組。home.js的第一版代碼：

async initAllData(){// const themeA = await Theme.getHomeLocationA();const themes = await Theme.getThemes();const themeA = themes.find(v=>v.name === 't-1')const bannerB = await Banner.getHomeLocationB();const grid = await Category.getHomeLocationC();const activityD = await Activity.getHomeLocationD();this.setData({themeA,bannerB,grid,activityD})}

頁面效果與未改之前一樣。接下來再實現(xiàn)上文中的2部分，按照上述思路，home.js的代碼如下：

這時有兩個地方需要注意一下，第一個就是上面已經(jīng)指出的硬編碼，第二個就是如果在其他的方法中也想獲得themeA,如下：

/**home.js*/ async initAllData(){// const themeA = await Theme.getHomeLocationA();const themes = await Theme.getThemes();const themeA = themes.find(v=>v.name === 't-1')const themeE = themes.find(v=>v.name === 't-2')const bannerB = await Banner.getHomeLocationB();const grid = await Category.getHomeLocationC();const activityD = await Activity.getHomeLocationD();this.setData({themeA,bannerB,grid,activityD})},test(){const themes = await Theme.getThemes();const themeA = themes.find(v=>v.name === 't-1')}

這時又要將getThemes方法重新寫一遍，在進(jìn)行一次find查找,得到themeA,相當(dāng)于又多了一次數(shù)據(jù)庫的查詢，造成代碼冗余。我們很容易想到用下面的方式對代碼改造。將獲取到的thems保存到data中。

async initAllData(){// const themeA = await Theme.getHomeLocationA();const themes = await Theme.getThemes();this.data.themes = themes;console.log(this.data.themes)const themeA = themes.find(v=>v.name === 't-1')const themeE = themes.find(v=>v.name === 't-2')const bannerB = await Banner.getHomeLocationB();const grid = await Category.getHomeLocationC();const activityD = await Activity.getHomeLocationD();this.setData({themeA,bannerB,grid,activityD})},test(){// if(this.data.themes.length>0){// const themeA = this.data.themes.find(v=>v.name === 't-1')// }}

但這時仍要調(diào)用find方法再找單個的theme。我們重新理一下需求

在home.js里減少Http請求

在home.js里任意位置可以很方便的拿到單個的theme

需求1我們已經(jīng)解決了，就是調(diào)一次getThemes方法，拿到所有的themes。要將themes保存起來，有三種方式：

this.data.themes

緩存

保存到小程序全局變量中（app.js文件）

而保存數(shù)據(jù)的最好方式，就是類，類可以保存數(shù)據(jù)，不能保存數(shù)據(jù)的狀態(tài)，而類的對象既可以保存數(shù)據(jù)，也可以保存狀態(tài)

?theme.js重構(gòu)如下：

import { Http } from "../utils/http" class Theme {static locationA = 't-1'static locationE = 't-2'static locationF = 't-3'static locationH = 't-4'themes = []static async getThemes() {const names = `${Theme.locationA},${Theme.locationE},${Theme.locationF},${Theme.locationH}`const themes = await Http.request({url: `theme/by/names`,data: {names: names}})this.themes = themes}static async getHomeLocationA() {return this.themes.find(v=>v.name === Theme.locationA)}static async getHomeLocationE() {return this.themes.find(v=>v.name === Theme.locationE)} } export {Theme }

home.js重構(gòu)如下：

async initAllData(){// const themeA = await Theme.getHomeLocationA();const themes = await Theme.getThemes();const themeA = await Theme.getHomeLocationA();const themeE = await Theme.getHomeLocationE();const bannerB = await Banner.getHomeLocationB();const grid = await Category.getHomeLocationC();const activityD = await Activity.getHomeLocationD();this.setData({themeA,bannerB,grid,activityD})},

?

?

?

總結(jié)

以上是生活随笔為你收集整理的风袖电商之重构Theme业务对象的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。