设计模式-策略模式_js版

前言

设计模式是一种写代码的思想，可以让我们的代码结构良好，维护性，可阅读性更好，相信大家没有人想要写跟屎一样的代码，维护起来也很恶心，那么今天我就以我的经历来写一篇，常用的和在我写代码的时候用到的设计模式，也是做一下记录，方便自己回顾。

策略模式

1. 啥是策略模式呢？
2. 策略模式能够解决什么样的问题呢？
3. 怎么用策略模式呢？

• 策略模式就是“策略”嘛就是根据不同的策略执行不同的代码呗。可以消除大量的判断语句，重复代码，而且可以让你的代码更好扩展
• 不知道你们是否对一堆的if else困扰过。通过使用策略模式重构代码。
• 策略模式没有啥固定模式吧，就是一种思想，大致的写法还是有的，后面我会举几个简单的例子。

 const fn = (param, tag) => {
           if (tag === "a") {
               param *= 10
           } else if (tag === "b") {
               param += 10
           } else if (tag === "c") {
               param -= 10
           } else if (tag === "d") {
               param /= 10
           } else if (tag === "e") {
               param **= 2
           }
           return param

       }

转成策略模式

   const fn = (param, tag) => {
           const map = {
               "a": () => { param *= 10 },
               "b": () => { param += 10 },
               "c": () => { param -= 10 },
               "d": () => { param /= 10 },
               "e": () => { param **= 2 },
           }
           return map[tag]()
       }

 const fn2 = (tag) => {
            let imgsrc = "http://aaa/"
            if (tag === "1") {
                imgsrc += 'assets/feeEventPicture/pic1.png'
            } else if (tag === "2") {
                imgsrc += 'assets/feeEventPicture/aaa.png'
            }
            else if (tag === "3") {
                imgsrc += 'assets/feeEventPicture/bbb.png'
            }
            else if (tag === "4") {
                imgsrc += 'assets/feeEventPicture/pic4.png'
            } else {
                imgsrc += 'assets/feeEventPicture/default.png'
            }
            return imgsrc
        }

转成策略模式

const fn2 = (tag) => {
            const map = {
                "1": "pic1",
                "2": "aaa",
                "3": "bbb",
                "4": "pic4",
                "5": "default",
            }
            return `assets/feeEventPicture/${map[tag]}.png`
        }

最后在举一个vue源码中用到策略模式，这个方法是一个util方法，在shared文件夹util.js文件中的第89行

    /**
     * Make a map and return a function for checking if a key
     * is in that map.
     *
     *  //map 对象中的[name1,name2,name3,name4]  变成这样的map{name1:true,name2:true,name3:true,name4:true}
     *  并且传进一个key值取值，这里用到策略者模式
     */
    function makeMap(str, expectsLowerCase) {
        var map = Object.create(null);   //创建一个新的对象
        var list = str.split(',');    //按字符串,分割
        for (var i = 0; i < list.length; i++) {
            map[list[i]] = true;   //map 对象中的[name1,name2,name3,name4]  变成这样的map{name1:true,name2:true,name3:true,name4:true}
        }
        return expectsLowerCase
            ? function (val) {
            return map[val.toLowerCase()];
        }   //返回一个柯里化函数 toLowerCase转换成小写
            : function (val) {
            return map[val];
        }   //返回一个柯里化函数 并且把map中添加一个 属性建
    }