JavaScript Design Pattern Strategy Pattern Case Sharing

foreword

The strategy design pattern refers to a problem that matches multiple solutions, which one is not necessarily used, and it is possible to add multiple solutions at any time

For example, when we go to buy books, the bookstore will hold some promotional activities, such as 20 off 100, 50 off 200, 20% off, etc., but there are more than these promotions, and promotions will be added in the future, such as 30% off on Double 11. After the double 11 event is over, the 30% discount event needs to be cancelled.

First, we don't use the strategy design pattern to implement the calculation of the discounted price. We declare a method that accepts two parameters. One of these two parameters is the price and the other is the discount type. Then use the if statement in the method to determine the discount type and calculate the price. If If there is no discount, it is the original price, and finally return the calculated discount price

?

//price 价格
//type 折扣种类
 function calcPrice(price, type) {
            if (type == '100_20') {
                price -= 20
            } else if (type == '200_50') {
                price -= 50
            }
            return price;

        }
        // 使用
        const bookPrice = calcPrice(300, '100_20')

This method is okay if there are relatively few discount activities, but every time you add a new discount activity, you need to add the if statement of the discount activity to the method to judge and remember the field of the new discount type to avoid the previous discount activity. The name is repeated, and the if statement needs to be manually deleted when the discount activity expires. In the long run, the code is not only redundant but also very maintainable

Implemented using the strategy design pattern:

We declare a closure function. There is a discount type center in the closure function, which contains several default discount types and a method to calculate the discount price. In the method, we define two methods for him, one is to add The discount type method, one is to delete the discount type method, and then expose the calculation discount method

?

//计算折扣价格闭包函数
        const calcPrice = (function() {
            // 折扣种类中心
            const sale = {
           //100-20折扣活动
                    '100_20': function(price) {
                        return price -= 20
                    },
                    //200-50折扣活动
                    '200_50': function(price) {
                        return price -= 50
                    },
                    //打八折折扣活动
                    '80%': function(price) {
                        return price *= 0.8
                    },
                }

               /** *
               * 计算折扣价格
               * price 价格
               * type 折扣类型
               * **/
            function totalPrice(price, type) {
                // 判断折扣种类里面是否拥有这个折扣类型，如果有就执行，没有就返回原价
                if (sale[type]) {
                    // 使用折扣函数
                    price = sale[type](price)
                }
                // 返回价格
                return price
            }
            /**
             *
             *  添加折扣方法
             *  type  折扣类型
             * callback 折扣类型方法
             * **/
            totalPrice.add = function(type, callback) {
                    // 判断折扣类型是否存在
                    if (sale[type]) return '折扣已存在'
                    //给折扣类型中心添加折扣价格方法
                    sale[type] = callback
                    return '折扣方法添加成功'
                }
                // 删除折扣方法
                totalPrice.del(type){
                //通过delete关键字删除折扣类型中心方法
                   delete   sale[type]
                }
             // 被return出去的函数，才是计算价格的本体
            return totalPrice
        })();
        //使用计算价格
        const bookPrice = calcPrice(240, '200_50');
       //添加打七折折扣类型方法
       calcPrice.add('70%',function(price) { return price *= 0.7 })
       //删除打八折折扣类型方法
        calcPrice.add('80%')

The strategy design pattern is easy to maintain, easy to understand, and easy to expand