《JavaScript设计模式》笔记之策略模式

最新推荐文章于 2024-07-30 22:36:34 发布

Posden

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量144

点赞数

分类专栏： JavaScript设计模式文章标签： javascript javascript 设计模式策略模式

本文链接：https://blog.csdn.net/weixin_44420276/article/details/101914626

版权

JavaScript设计模式专栏收录该内容

10 篇文章 0 订阅

订阅专栏

策略模式：将定义的一组算法封装起来，使其相互之间可以替换。封装的算法具有一定独立性，不会随客户变化而变法。

项目需求

一部分商品5折出售，一部分商品8折出售，一部分商品9折出售；普通用户满100返30，高级用户满100返50.。。。

version 1.0

// 100 返 30
function return30(price){}

//  100 返 50
function return50(price){}

// 9折
function percent(price) {}

// ，，，

如果采用状态模式那么就会为每一个商品创建一个状态对象，这么做是不是多余了？

策略模式，不需要管理状态，状态之间没有依赖关系、策略之间可以相互替换、在策略对象内部保存的是相互独立的一些算法。

为实现对每种商品的策略调用，你首先要将这些算法封装在一个策略对象内，然后对每种商品的策略调用时，直接对策略对象中的算法调用即可，而策略算法又独立在策略对象中。

策略对象

var PriceStrategy = function(){
    var stragtegy = {
        // 100 返 30
        return30 :function(price){
            return +price + parseInt(price / 100)*30
        },
        // 100 返 50
        return50 :function(price){
            return +price + parseInt(price / 100)*50
        },
        // 9折
        parcent90 :function(price){
            return price * 100 * 90 / 10000
        },
        // 8折
        parcent80 :function(price){
            return price * 100 * 80 / 10000
        },
        // 5折
        parcent50 :function(){
            return price*1000*50 /100000
        }
    }

    return function(algorithm,price){
        return stragtegy[algorithm]&& stragtegy[algorithm](price)

    }
}()


var price = PriceStrategy('return50','314.7')

console.log(price)

缓冲对象

写jQuery动画时的缓冲对象就是运用策略模式实现的。例如让一个div运动起来，通过对jQuery的animate动画传入不同运动算法就可以实现两种不同的运动曲线。

$('div').animate({width:'200px'},1000,'linear')

表单验证

验证某一种表单内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <input type="text">
    <span></span>

    <script>
        var InputStrategy = function () {
            var strategy = {
                notNull: function (value) {
                    return /\s+/.test(value) ? '请输入内容' : ''
                },
                number: function (value) {
                    return /^[0-9]+(\.[0-9]+)?$/.test(value) ? '' : '请输入数字'
                },
                phone: function (value) {
                    return /^\d{3}\-\d{8}$|^\d{4}-\d{7}$/.test(value) ? '' : '请输入正确的电话号码'
                }
            }
            return {
                // 验证接口
                check: function (type, value) {
                    value = value.replace(/^\s+|\s+$/g, '');
                    return strategy[type] ? strategy[type](value) : '没有该类型的检测方法'
                },
                addStrategy: function (type, fn) {
                    strategy[type] = fn
                }
            }
        }()

        // 算法拓展 可以添加

        InputStrategy.addStrategy('nickname', function (value) {
            return /^[a-zA-Z]\w{3,7}$/.test(value) ? '' : '请输入4-8位昵称'
        })

        // console.log(InputStrategy)

        function $tag(tag, context) {
            context = context || document;
            return context.getElementsByTagName(tag)[0];

        }

        $tag('input').onclick = function () {
            var value = $tag('input').value;
            console.log(value)
            $tag('span').innerHTML = InputStrategy.check('number', value);
        }
    </script>
</body>

</html>

Posden

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript设计模式》笔记之策略模式

策略模式：将定义的一组算法封装起来，使其相互之间可以替换。封装的算法具有一定独立性，不会随客户变化而变法。项目需求一部分商品5折出售，一部分商品8折出售，一部分商品9折出售；普通用户满100返30，高级用户满100返50.。。。version 1.0// 100 返 30function return30(price){}// 100 返 50function return50(...
复制链接

扫一扫