前端设计模式-策略模式_实施策略前端界面设计-优快云博客

本文链接：https://blog.youkuaiyun.com/Wind_AN/article/details/117625428

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
            一个问题匹配多个解决方案，不一定用到哪个方案
            可能随时新增方案
            把多种方案以闭包的方式保存起来，
            可以添加，可以删除
            举例：
                折扣方案
                满800减700
                满200减100
                1折
        */
        const claPrice = (function(){
            const sale = {
                "800": (price) => price -= 700,
                "200": (price) => price -= 100,
                "10%": (price) => price *= 0.1,
            }
            function claPrice(price,type) {
                if(!sale[type]) return "没有这个折扣";
                return sale[type](price);
            }
            claPrice.add = function(type,fn) {
                if(sale[type]) return "该折扣已经存在";
                sale[type] = fn;
                return "添加成功";
            }
            claPrice.remove = function(type) {
                delete sale[type];
            }
            return claPrice;
        }())
        claPrice.add("20%",(price) => price *= 0.2);
        claPrice.remove("20%");
        console.log(claPrice(1000,"20%"));
        // const res = claPrice(900,"800");
        // console.log(res);//200
    </script>
</body>
</html>