一度の作業でのプロジェクト効率の最適化について記す

事の始まりはこうだった...製品:私たちは公衆番号の普及活動をして、ルート側と協力しなければなりません.バラバラ...私:はい...プロジェクトがオンラインになってから数日も経たないうちに、製品はまた私を探して、私たちは新しいルートの協力者を追加しなければなりません.私は聞いて、心の中で大いに警戒して、私の長年の経験で判断して、一言聞いて、この後ろに他の協力者の製品がありますか?
so... やはり配置できるようにして、少し自動的にします.
1つのアドレスにアクセスして、どのように異なるチャネル業者を区別しますか?
urlにchannelフィールドの区分を追加し、対応するチャネルコンテンツに一致させる方法は1つしかありません.
そして、今しなければならないのは、前に、変動する可能性のあるすべての内容を抽出することです...ファイルのフォーマット、名前などを統一...
後でこの書類を単独で変更すればいいです.
初歩的には悪くないようだが、会社の影響力を過小評価し、チャネル商が多ければ多いほど、書類を修正することも退屈になり、時間もかかり、他のページの内容に影響を与えるのではないかと心配し、自分で測定しなければならない.コードプレビューは次のとおりです.

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

導入ファイルには重複するものが大部分占められていることがわかりますが、導入画像の違いはチャネルフォルダ名です.
新規チャネルを1つずつ追加するのも面倒なので、コピーして貼り付けて修正し、スクロールしてコピーして貼り付けて修正します...
こんな非効率的なことは、本当に書きたくない.どうしよう.
慌てないで、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')
  },
}

これからチャネルを追加するには,チャネルにフォルダを新規作成し,そのチャネルの下の各リソースをファイルにアップロードすればよいので,コードの修正の問題を心配する必要はない.✌️✌️✌️