vue は js new Map() を使用して複数の if else 実行メソッドを最適化します

序文

• 実際の開発では、ビジネスニーズに基づいて状況を判断しなければならないことがよくありますが、ES6 を直接使用する当社の技術により、その問題を解決できます。

• 条件に応じて異なるメソッドを実行することがよくあり、if else が複数存在することになり、見た目があまり美しくなく、手間がかかります。

• js new map () はこの問題を解決できます。これはコンテナであり、set と get を通じてアクセスできます。

• Mapはキー値の形で存在するので、その値をメソッドとして保存して実行すれば問題は解決します。

• 注: マップのキーの種類に注意してください。たとえば、保存時に数値 1 が使用され、取得時に文字列 1 が使用されるため、これも取得に失敗します。

画像表示 - 注: 形式を正しく保存しても、値を取得できずエラーが報告される場合は、キーのタイプが間違っている可能性があります。

コード実装 - dom - コピーして直接表示できる

<template>
  <div class="result-box">
    <el-form :inline="true" :model="form">
      <el-form-item label="第一个值">
        <el-input v-model="form.oneprice" placeholder="输入值"></el-input>
      </el-form-item>
​
      <el-form-item label="运算规则">
        <el-select v-model="form.region" placeholder="选择计算规则">
          <el-option label="乘法" value="1"></el-option>
          <el-option label="加法" value="2"></el-option>
          <el-option label="减法" value="3"></el-option>
        </el-select>
      </el-form-item>
​
      <el-form-item label="第二个值">
        <el-input v-model="form.twoprice" placeholder="输入值"></el-input>
      </el-form-item>
​
      <el-form-item label="计算结果">
        <el-input v-model="form.result" placeholder="请点击计算结果"></el-input>
      </el-form-item>
​
      <el-form-item>
        <el-button type="primary" @click="onSubmit">计算结果</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
​
<script>
export default {
  name: 'Newmap',
  data () {
    return {
      form: {
        // 计算值
        oneprice: null,
        twoprice: null,
        // 计算规则
        calculaterule: null,
        // 计算结果
        result: null
      },
      map: null
    }
  },
  created () {
    this.$nextTick(() => {
      this.map = new Map([
        ['1', this.calculatemultiplication],
        ['2', this.calculateaddition],
        ['3', this.calculatesubtraction]
      ])
    })
  },
  methods: {
    // x - 第一个值
    // y - 第二个值
    // 乘法
    calculatemultiplication (x, y) {
      this.$message.success('执行乘法')
      this.form.result = x * y
    },
    // 加法
    calculateaddition (x, y) {
      this.$message.success('执行加法')
      this.form.result = Number(x) + Number(y)
    },
    // 减法
    calculatesubtraction (x, y) {
      this.$message.success('执行减法')
      this.form.result = Number(x) - Number(y)
    },
​
    // 计算结果
    onSubmit () {
      // if else - 优化之前
      // if (this.form.region == 1) {
      //   this.calculatemultiplication(this.form.oneprice, this.form.twoprice)
      // } else if (this.form.region == 2) {
      //   this.calculateaddition(this.form.oneprice, this.form.twoprice)
      // } else if (this.form.region == 3) {
      //   this.calculatesubtraction(this.form.oneprice, this.form.twoprice)
      // } else {
      //   // 默认处理
      // }
​
      // 使用new map （）优化之后
      let dispose = this.map.get(this.form.region)
      dispose(this.form.oneprice, this.form.twoprice)
    }
  }
}
</script>
​
<style lang="scss" scoped>
.result-box {
  padding: 40px 20px;
}
</style>

---

要約:

このプロセスを終えると、Vue が複数の if else 実行メソッドを最適化するために js new Map() を使用することについても最初に深い印象を受けると思いますが、実際の開発では遭遇する状況が明らかに異なるため、理解する必要があります。その原則を守り、その原点から決して離れることはありません。さあ、労働者を殴ってください！

不備があればご指摘ください、ありがとうございます - Feng Guo Wuhen