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

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

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去處理引入文件問題。而後經過keys()遍歷文件夾下的文件。

具體功能，能夠訪問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')
  },
}

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