記一次工作中的項目效率優化

事情的開始是這樣子的...
產品: 我們要做一個公衆號推廣活動，跟渠道方合作的，巴拉巴拉...
我: 好的...
項目上線後沒幾天，產品又找上我說，我們要新增一個渠道合作方
我一聽，心中大爲警惕，以我多年的經驗來判斷，問了一句，除了這個後面還會不會有別的合作方
產品: 不一定，可能還會有，￥%……

so... 還是要做好那種可以配置的，稍微自動的。

訪問一個地址，怎麼去區分不同渠道商呢？

只有一個辦法就是url裏面添加 channel 字段區分，去匹配相應的渠道內容。

然後，現在要做的是就把之前，所有的可能會變動的內容，都提取出來... 統一文件格式，名稱等...

以後就單獨改這一個文件就好了。

初步看來還是不錯的，但是低估了公司的影響力，渠道商越來越多，修改文件，也變得枯燥無味，也佔用時間，還會擔心影響到其它頁面的內容，都要自測一遍。代碼預覽如下

export default {
  data () {
    return {
      channel: '',
      channelName: {
        xeskids: '學而思kids',
        jiazhangbang: '家長幫',
        hangzhouxes: '杭州學而思',
        hefeixes: '合肥學而思',
        huizhouxes: '惠州學而思',
        shenzhenxhxt: '深圳小猴學堂',
        zhongshanxes: '中山學而思',
        zhongshanysx: '中山幼升小',
        jiazhangbangbc: '家長幫編程',
        nanningxes: '南寧學而思',
        shaoxingxes: '紹興學而思',
        shenzhenxes: '深圳學而思',
        tianjinxes: '天津學而思',
      },
      guideText: {
        xeskids: '學而思kids',
        jiazhangbang: 'codemonkey',
        hangzhouxes: 'codemonkey',
        hefeixes: 'codemonkey',
        huizhouxes: 'codemonkey',
        shenzhenxhxt: 'codemonkey',
        zhongshanxes: 'codemonkey',
        zhongshanysx: 'codemonkey',
        jiazhangbangbc: 'codemonkey',
        nanningxes: 'codemonkey',
        shaoxingxes: 'codemonkey',
        shenzhenxes: 'codemonkey',
        tianjinxes: 'codemonkey',
      },
      guideImages: {
        xeskids: require('@/assets/image/fission/xeskids/guide.png'),
        jiazhangbang: require('@/assets/image/fission/jiazhangbang/guide.png'),
        hangzhouxes: require('@/assets/image/fission/hangzhouxes/guide.png'),
        hefeixes: require('@/assets/image/fission/hefeixes/guide.png'),
        huizhouxes: require('@/assets/image/fission/huizhouxes/guide.png'),
        shenzhenxhxt: require('@/assets/image/fission/shenzhenxhxt/guide.png'),
        zhongshanxes: require('@/assets/image/fission/zhongshanxes/guide.png'),
        zhongshanysx: require('@/assets/image/fission/zhongshanysx/guide.png'),
        jiazhangbangbc: require('@/assets/image/fission/jiazhangbangbc/guide.png'),
        nanningxes: require('@/assets/image/fission/nanningxes/guide.png'),
        shaoxingxes: require('@/assets/image/fission/shaoxingxes/guide.png'),
        shenzhenxes: require('@/assets/image/fission/shenzhenxes/guide.png'),
        tianjinxes: require('@/assets/image/fission/tianjinxes/guide.png'),
      },
      giveImages: {
        xeskids: require('@/assets/image/fission/xeskids/give.png'),
        jiazhangbang: require('@/assets/image/fission/jiazhangbang/give.png'),
        hangzhouxes: require('@/assets/image/fission/hangzhouxes/give.png'),
        hefeixes: require('@/assets/image/fission/hefeixes/give.png'),
        huizhouxes: require('@/assets/image/fission/huizhouxes/give.png'),
        shenzhenxhxt: require('@/assets/image/fission/shenzhenxhxt/give.png'),
        zhongshanxes: require('@/assets/image/fission/zhongshanxes/give.png'),
        zhongshanysx: require('@/assets/image/fission/zhongshanysx/give.png'),
        jiazhangbangbc: require('@/assets/image/fission/jiazhangbangbc/give.png'),
        nanningxes: require('@/assets/image/fission/nanningxes/give.png'),
        shaoxingxes: require('@/assets/image/fission/shaoxingxes/give.png'),
        shenzhenxes: require('@/assets/image/fission/shenzhenxes/give.png'),
        tianjinxes: require('@/assets/image/fission/tianjinxes/give.png'),
      },
      topPic: {
        xeskids: require('@/assets/image/fission/xeskids/toppic.png'),
        jiazhangbang: require('@/assets/image/fission/jiazhangbang/toppic.png'),
        hangzhouxes: require('@/assets/image/fission/hangzhouxes/toppic.png'),
        hefeixes: require('@/assets/image/fission/hefeixes/toppic.png'),
        huizhouxes: require('@/assets/image/fission/huizhouxes/toppic.png'),
        shenzhenxhxt: require('@/assets/image/fission/shenzhenxhxt/toppic.png'),
        zhongshanxes: require('@/assets/image/fission/zhongshanxes/toppic.png'),
        zhongshanysx: require('@/assets/image/fission/zhongshanysx/toppic.png'),
        jiazhangbangbc: require('@/assets/image/fission/jiazhangbangbc/toppic.png'),
        nanningxes: require('@/assets/image/fission/nanningxes/toppic.png'),
        shaoxingxes: require('@/assets/image/fission/shaoxingxes/toppic.png'),
        shenzhenxes: require('@/assets/image/fission/shenzhenxes/toppic.png'),
        tianjinxes: require('@/assets/image/fission/tianjinxes/toppic.png'),
      },
      channelEwm: {
        xeskids: require('@/assets/image/fission/xeskids/ewm.jpg'),
        jiazhangbang: require('@/assets/image/fission/jiazhangbang/ewm.jpg'),
        hangzhouxes: require('@/assets/image/fission/hangzhouxes/ewm.jpg'),
        hefeixes: require('@/assets/image/fission/hefeixes/ewm.jpg'),
        huizhouxes: require('@/assets/image/fission/huizhouxes/ewm.jpg'),
        shenzhenxhxt: require('@/assets/image/fission/shenzhenxhxt/ewm.jpg'),
        zhongshanxes: require('@/assets/image/fission/zhongshanxes/ewm.jpg'),
        zhongshanysx: require('@/assets/image/fission/zhongshanysx/ewm.jpg'),
        jiazhangbangbc: require('@/assets/image/fission/jiazhangbangbc/ewm.jpg'),
        nanningxes: require('@/assets/image/fission/nanningxes/ewm.jpg'),
        shaoxingxes: require('@/assets/image/fission/shaoxingxes/ewm.jpg'),
        shenzhenxes: require('@/assets/image/fission/shenzhenxes/ewm.jpg'),
        tianjinxes: require('@/assets/image/fission/tianjinxes/ewm.jpg'),
      },
      gzhImages: {
        xeskids: require('@/assets/image/fission/xeskids/gzh.png'),
        jiazhangbang: require('@/assets/image/fission/jiazhangbang/gzh.png'),
        hangzhouxes: require('@/assets/image/fission/hangzhouxes/gzh.png'),
        hefeixes: require('@/assets/image/fission/hefeixes/gzh.png'),
        huizhouxes: require('@/assets/image/fission/huizhouxes/gzh.png'),
        shenzhenxhxt: require('@/assets/image/fission/shenzhenxhxt/gzh.png'),
        zhongshanxes: require('@/assets/image/fission/zhongshanxes/gzh.png'),
        zhongshanysx: require('@/assets/image/fission/zhongshanysx/gzh.png'),
        jiazhangbangbc: require('@/assets/image/fission/jiazhangbangbc/gzh.png'),
        nanningxes: require('@/assets/image/fission/nanningxes/gzh.png'),
        shaoxingxes: require('@/assets/image/fission/shaoxingxes/gzh.png'),
        shenzhenxes: require('@/assets/image/fission/shenzhenxes/gzh.png'),
        tianjinxes: require('@/assets/image/fission/tianjinxes/gzh.png'),
      },
      dxlj: {
        xeskids: require('@/assets/image/fission/xeskids/dxlj.png'),
        jiazhangbang: require('@/assets/image/fission/jiazhangbang/dxlj.png'),
        hangzhouxes: require('@/assets/image/fission/hangzhouxes/dxlj.png'),
        hefeixes: require('@/assets/image/fission/hefeixes/dxlj.png'),
        huizhouxes: require('@/assets/image/fission/huizhouxes/dxlj.png'),
        shenzhenxhxt: require('@/assets/image/fission/shenzhenxhxt/dxlj.png'),
        zhongshanxes: require('@/assets/image/fission/zhongshanxes/dxlj.png'),
        zhongshanysx: require('@/assets/image/fission/zhongshanysx/dxlj.png'),
        jiazhangbangbc: require('@/assets/image/fission/jiazhangbangbc/dxlj.png'),
        nanningxes: require('@/assets/image/fission/nanningxes/dxlj.png'),
        shaoxingxes: require('@/assets/image/fission/shaoxingxes/dxlj.png'),
        shenzhenxes: require('@/assets/image/fission/shenzhenxes/dxlj.png'),
        tianjinxes: require('@/assets/image/fission/tianjinxes/dxlj.png'),
      },
      channelLogo: {
        xeskids: require('@/assets/image/fission/xeskids/logo.png'),
        jiazhangbang: require('@/assets/image/fission/jiazhangbang/logo.png'),
        hangzhouxes: require('@/assets/image/fission/hangzhouxes/logo.png'),
        hefeixes: require('@/assets/image/fission/hefeixes/logo.png'),
        huizhouxes: require('@/assets/image/fission/huizhouxes/logo.png'),
        shenzhenxhxt: require('@/assets/image/fission/shenzhenxhxt/logo.png'),
        zhongshanxes: require('@/assets/image/fission/zhongshanxes/logo.png'),
        zhongshanysx: require('@/assets/image/fission/zhongshanysx/logo.png'),
        jiazhangbangbc: require('@/assets/image/fission/jiazhangbangbc/logo.png'),
        nanningxes: require('@/assets/image/fission/nanningxes/logo.png'),
        shaoxingxes: require('@/assets/image/fission/shaoxingxes/logo.png'),
        shenzhenxes: require('@/assets/image/fission/shenzhenxes/logo.png'),
        tianjinxes: require('@/assets/image/fission/tianjinxes/logo.png'),
      },
      posterTitle: {
        xeskids: require('@/assets/image/fission/xeskids/posterTitle.png'),
        jiazhangbang: require('@/assets/image/fission/jiazhangbang/posterTitle.png'),
        hangzhouxes: require('@/assets/image/fission/hangzhouxes/posterTitle.png'),
        hefeixes: require('@/assets/image/fission/hefeixes/posterTitle.png'),
        huizhouxes: require('@/assets/image/fission/huizhouxes/posterTitle.png'),
        shenzhenxhxt: require('@/assets/image/fission/shenzhenxhxt/posterTitle.png'),
        zhongshanxes: require('@/assets/image/fission/zhongshanxes/posterTitle.png'),
        zhongshanysx: require('@/assets/image/fission/zhongshanysx/posterTitle.png'),
        jiazhangbangbc: require('@/assets/image/fission/jiazhangbangbc/posterTitle.png'),
        nanningxes: require('@/assets/image/fission/nanningxes/posterTitle.png'),
        shaoxingxes: require('@/assets/image/fission/shaoxingxes/posterTitle.png'),
        shenzhenxes: require('@/assets/image/fission/shenzhenxes/posterTitle.png'),
        tianjinxes: require('@/assets/image/fission/tianjinxes/posterTitle.png'),
      },

    }
  },
  created() {
    this.channel = sessionStorage.getItem('channel')
  },
}

可以看到引入文件裏面佔用了大部分重複的東西，一個個新增渠道也是很覺得很麻煩的事情，複製粘貼修改，再滾動複製粘貼修改...

這種低級效率的事情，實在不想寫，怎麼辦...

不慌，有webpack這麼強大的工具當然要好好利用，通過 require.context去處理引入文件問題。

具體功能，可以訪問require.context瞭解，就不多說啦

這時候代碼優化如下：

const modulesFiles = require.context('@/assets/image/fission', true, /\guide.(png|jpg)$/) 
const modulesFilesKeys = modulesFiles.keys().map(file => {
  return file.replace(/(^.\/)(\w+)(\/guide.(png|jpg))/, '$2')
})
// console.log(modulesFilesKeys)
const guideImages = {}
const giveImages = {}
const topPic = {}
const gzhImages = {}
const dxlj = {}
const channelLogo = {}
const posterTitle = {}
const channelEwm = {}
modulesFilesKeys.forEach(name => {
  guideImages[name]   = require(`@/assets/image/fission/${name}/guide.png`)
  giveImages[name]    = require(`@/assets/image/fission/${name}/give.png`)
  topPic[name]        = require(`@/assets/image/fission/${name}/toppic.png`)
  gzhImages[name]     = require(`@/assets/image/fission/${name}/gzh.png`)
  dxlj[name]          = require(`@/assets/image/fission/${name}/dxlj.png`)
  channelLogo[name]   = require(`@/assets/image/fission/${name}/logo.png`)
  posterTitle[name]   = require(`@/assets/image/fission/${name}/posterTitle.png`)
  channelEwm[name]    = require(`@/assets/image/fission/${name}/ewm.jpg`)
})
export default {
  data () {
    return {
      channel: '',
      channelName: {
        xeskids: '學而思kids',
        jiazhangbang: '家長幫',
        hangzhouxes: '杭州學而思',
        hefeixes: '合肥學而思',
        huizhouxes: '惠州學而思',
        shenzhenxhxt: '深圳小猴學堂',
        zhongshanxes: '中山學而思',
        zhongshanysx: '中山幼升小',
        jiazhangbangbc: '家長幫編程',
        nanningxes: '南寧學而思',
        shaoxingxes: '紹興學而思',
        shenzhenxes: '深圳學而思',
        tianjinxes: '天津學而思',
        nanjingxes: '南京學而思',
        xiamenjzb: '廈門家長幫',
      },
      guideText: {
        xeskids: '學而思kids',
        jiazhangbang: 'codemonkey',
        hangzhouxes: 'codemonkey',
        hefeixes: 'codemonkey',
        huizhouxes: 'codemonkey',
        shenzhenxhxt: 'codemonkey',
        zhongshanxes: 'codemonkey',
        zhongshanysx: 'codemonkey',
        jiazhangbangbc: 'codemonkey',
        nanningxes: 'codemonkey',
        shaoxingxes: 'codemonkey',
        shenzhenxes: 'codemonkey',
        tianjinxes: 'codemonkey',
        nanjingxes: 'codemonkey',
        xiamenjzb: 'codemonkey',
      },
      guideImages,
      giveImages,
      topPic,
      channelEwm,
      gzhImages,
      dxlj,
      channelLogo,
      posterTitle,
    }
  },
  created() {
    this.channel = sessionStorage.getItem('channel')
  },
}

但是，現在並沒有達到我的目的。 渠道商名字 channelName, 用來複制公衆號回覆的guideText，仍需要手動修改。

有沒有辦法不手動修改這些數據呢？

問題一直都有的，解決問題的辦法也總是會有的...(引用某個人經常說的話😂)

引入文件，可以正則匹配文件名，不就可以獲取到了嘛。。。

新建一個txt文件，把渠道名稱作爲文件名。

最終優化代碼如下：

const channelName = {}
const modulesFiles = require.context('@/assets/image/fission', true, /\/[\s\S]+\.txt$/) // 匹配對應渠道.txt文件
const modulesFilesKeys = modulesFiles.keys().map(file => {
  let regResult = file.replace(/^.\/(\w+)\/([\s\S]+).txt/, '$1,$2')
  let fileName = regResult.split(',')[0] // 匹配對應渠道文件夾名字
  let txtName = regResult.split(',')[1] // 匹配對應渠道.txt文件名
  channelName[fileName] = txtName
  return fileName
})
// console.log(modulesFilesKeys)
const guideText = {}
const guideImages = {}
const giveImages = {}
const topPic = {}
const gzhImages = {}
const dxlj = {}
const channelLogo = {}
const posterTitle = {}
const channelEwm = {}
modulesFilesKeys.forEach(name => { // 根據渠道文件夾名字訪問該渠道下的資源
  guideText[name]     = name === 'xeskids' ? '學而思kids' : 'codemonkey'
  guideImages[name]   = require(`@/assets/image/fission/${name}/guide.png`)
  giveImages[name]    = require(`@/assets/image/fission/${name}/give.png`)
  topPic[name]        = require(`@/assets/image/fission/${name}/toppic.png`)
  gzhImages[name]     = require(`@/assets/image/fission/${name}/gzh.png`)
  dxlj[name]          = require(`@/assets/image/fission/${name}/dxlj.png`)
  channelLogo[name]   = require(`@/assets/image/fission/${name}/logo.png`)
  posterTitle[name]   = require(`@/assets/image/fission/${name}/posterTitle.png`)
  channelEwm[name]    = require(`@/assets/image/fission/${name}/ewm.jpg`)
})
export default {
  data () {
    return {
      channel: '',
      channelName,
      guideText,
      guideImages,
      giveImages,
      topPic,
      channelEwm,
      gzhImages,
      dxlj,
      channelLogo,
      posterTitle,
    }
  },
  created() {
    this.channel = sessionStorage.getItem('channel')
  },
}

以後再新增渠道，只需要渠道新建文件夾，以及該渠道下的各個資源，上去文件就可以啦，再也不用擔心修改代碼的問題了。✌️✌️✌️