上圖是風袖首頁最終完成的部分頁面，可以看出，這里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})} })

?頁面效果如下：

現在想要實現第一張圖中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，是不是又要重新再發一次Http請求。?優化一下，將部分Http整合在一起，使其只發一遍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 }

將所有關于theme的請求，全部放在一個Http中，傳參傳的是一組數組。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})}

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

這時有兩個地方需要注意一下，第一個就是上面已經指出的硬編碼，第二個就是如果在其他的方法中也想獲得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方法重新寫一遍，在進行一次find查找,得到themeA,相當于又多了一次數據庫的查詢，造成代碼冗余。我們很容易想到用下面的方式對代碼改造。將獲取到的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')// }}

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

在home.js里減少Http請求

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

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

this.data.themes

緩存

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

而保存數據的最好方式，就是類，類可以保存數據，不能保存數據的狀態，而類的對象既可以保存數據，也可以保存狀態

?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'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重構如下：

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})},

?

?

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。