vue设计模式之策略模式 filters

策略模式（Strategy ）是属于设计模式中 对象行为型模式, 主要是定义一系列的算法 , 把这些算法一个个封装成单独的类 .

实际应用：【替换if-else,switch】

普通if-else

var performanceS = function( salary ){
    //...
    return salary * 4;
};
var performanceA = function( salary ){
    //...
    return salary * 3;
};
var performanceB = function( salary ){
    //...
    return salary * 2;
};
var calculateBonus = function( performanceLevel, salary ){
    if ( performanceLevel === 'S' ){
        return performanceS( salary );
    }
    if ( performanceLevel === 'A' ){
        return performanceA( salary );
    }
    if ( performanceLevel === 'B' ){
        return performanceB( salary );
    }
};
calculateBonus( 'A' , 10000 ); // 输出：30000

js策略模式写法

var strategies = {
    "S": function( salary ){
        return salary * 4;
    },
    "A": function( salary ){
        return salary * 3;
    },
    "B": function( salary ){
        return salary * 2;
    }
};

var calculateBonus = function( level, salary ){
    return strategies[ level ]( salary );
};

console.log( calculateBonus( 'A', 10000 ) ); // 输出：30000

vue写法：

# template部分
<template>
  <div>{{ salary | calculateBonus }}<div> <!-- 一个参数 -->
  <div>{{ level  | calculateBonus(salary) }}<div> <!-- 2个参数 -->
</template>


//官网：https://cn.vuejs.org/v2/guide/filters.html

<!--
 1.filters 用在双花括号插值和 v-bind 表达式:
  <div>{{ salary | calculateBonus }}<div>
  <div v-bind:id="rawId | formatId"></div>
 -->

<!-- 2. filters 管道符‘|’ 前面的为第一个参数，多个参数的使用函数方式传入-->

<!-- 3. 多个filters依次执行
    message | filterA | filterB  
    # message 传入filterA；
    # filterA 结果 传入filterB
  -->

export default {
  name: "App",
  data(){
    return {
        level:'A',
        salary: 10000
    }
  },
  filters:{
    calculateBonus(level, salary) {
      const strategies = {
        "S": function( salary ){
              return salary * 4;
             },
        "A": function( salary ){
              return salary * 3;
             },
        "B": function( salary ){
              return salary * 2;
             }
       };
      return strategies[ level ]( salary );
    },
  }, 
  methods:{}
}

参考:JS设计模式 之 策略模式 - 雨中愚 - 博客园https://www.cnblogs.com/yuzhongyu/p/14203862.html