设计模式知识连载（29）---策略模式:

最新推荐文章于 2022-11-14 18:51:37 发布

宇智波幽助

最新推荐文章于 2022-11-14 18:51:37 发布

阅读量124

点赞数

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

本文链接：https://blog.csdn.net/yuzhiboyouzhu/article/details/78900321

版权

设计模式专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<body>


<h3>设计模式知识连载（29）---策略模式:</h3>
<p>
    将定义的一组算法封装起来，使其相互之间可以替换。封装的算法具有一定独立性，不会随客户端变化而变化。
</p>

<hr>

<form>
    <div>
        <input type="text" name="name" >
        <span></span>
    </div>
    <div>
        <input type="button" name="button">
    </div>
</form>





<script type="text/javascript">


    /**
    *   案例一：促销活动，方式一：初始
    */
    // 价格策略对象
    var PriceStrategy = function() {
        // 内部算法
        var _strategy = {
            // 100返30
            return30 : function(price) {
                // parseInt可通过~~、|等运算符替换，要注意此时price要在
                //【-2147483648,2147483647】之间
                // +price 转化为数字类型
                return +price + parseInt(price / 100) * 30 ;
            },
            // 100返50
            return50 : function(price) {
                return +price + parseInt(price / 100) * 50 ;
            },
            // 9折
            percent90 : function(price) {
                // JavaScript在处理小数乘法有bug，所以运算前转化为整数
                return price * 100 * 90 / 10000 ;
            },
            // 8折
            percent80 : function(price) {
                return price * 100 * 80 / 10000 ;
            },
            // 5折
            percent50 : function(price) {
                return price * 100 * 50 / 10000 ;
            }
        } 

        // 策略算法调用接口
        return function(algorithm, price) {
            // 如果算法存在，则调用算法，否则返回false
            return _strategy[algorithm] && _strategy[algorithm](price) ;
        }
    }
    // 测试实例
    var priceStrategy = PriceStrategy() ;
    var price = priceStrategy('return50', '314.67') ;
    console.log(price) ;


    /**
    *   案例二：jQuery缓冲函数，方式一：初始
    */
    // jquery
    // $('div').animate({width : '200px'}, 100, 'linear') ;
    // $('div').animate({width : '200px'}, 100, 'swing') ;

    // easing.js插件


    /**
    *   案例三：表单验证，方式一：初始
    */
    // 表单正则验证策略对象
    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) ? '' : '请输入正确的电话号码格式，如：010-12345678 或 0418-1234567' ;  
            }
        }
        return {
            // 验证接口type 算法 value表单值
            check : function(type, value) {
                // 去除首位空白符
                value = value.replace(/^\s+|\s+$/g, '') ;
                return _strategy[type] ? _strategy[type](value) : '没有该类型的检测方法' ;
            },
            // 添加策略
            addStrategy : function(type, fn) {
                _strategy[type] = fn ;
            }
        }
    } ;
    // 测试实例：
    // 拓展 延伸算法
    var inputStrategy = InputStrategy() ;
    inputStrategy.addStrategy('nickname', function(value) {
        return /^[a-zA-Z]\w{3,7}$/.test(value) ? '' : '请输入4-8位昵称，如：YYHQ' ;
    }) ;
    // 外观模式简化元素的获取
    function $tag(tag, context) {
        context = context || document ;
        return context.getElementsByTagName(tag) ;
    }
    // 提交按钮点击
    $tag('input')[1].onclick = function() {
        // 获取输入框内的内容
        var value = $tag('input')[0].value ;
        // 获取日期格式验证结果
        $tag('span')[0].innerHTML = inputStrategy.check('notNull', value) ;
        $tag('span')[0].innerHTML = inputStrategy.check('nickname', value) ;
    }
</script>   

</body>