zoukankan      html  css  js  c++  java
  • 03-策略模式

    定义一系列的算法,把每一个算法封装起来, 并且使它们可相互替换。

    策略模式把对象本身和运算规则区分开来,其功能非常强大,因为这个设计模式本身的核心思想就是面向对象编程的多形性的思想。


    原来我们这么写:

    function computed(method, count) {
        let total;
        if (method === 'get') {
            total = count * 2;
        }
        if (method === 'post') {
            total = count * 3;
        }
        if (method === 'put') {
            total = count * 4;
        }
        return total;
    }
    
    let r1 = computed('get', 10);
    let r2 = computed('post', 20);
    let r3 = computed('put', 30);
    
    console.log(r1);
    console.log(r2);
    console.log(r3);

    策略模式:

    let computedObj = {
        'get': function(count) {
            return count * 2;
        },
        'post': function(count) {
            return count * 2;
        },
        'put': function(count) {
            return count * 2;
        },
    }
    
    function countTotal(method, count) {
        return computedObj[method](count);
    }
    let res1 = countTotal('get', 10);
    let res2 = countTotal('post', 20);
    let res3 = countTotal('put', 30);
    
    console.log(res1);
    console.log(res2);
    console.log(res3);

    策略模式之表单提交:

    <!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>策略模式-表单提交</title>
    </head>
    
    <body>
        <form id="registerForm" class="form">
            <div class="form-item">
                <input type="text" name="username">
            </div>
            <div class="form-item">
                <input type="text" name="password">
            </div>
            <button type="submit">注册</button>
        </form>
    </body>
    
    </html>
    
    
    <script>
        // 常规写法
        let oForm = document.querySelector('#registerForm');
        // oForm.onsubmit = function(e) {
        //     // 阻止表单默认提交行为
        //     e.preventDefault();
        //     if (oForm.username.value == '') {
        //         return alert('用户名不能为空')
    
        //     }
        //     if (oForm.password.value.length <= 6) {
        //         return alert('密码不能小于6位');
        //     }
        // }
        // ------------------------------------------------------------------------------------------------------
    
        // 策略模式
    
        // 一组策略
        // let rules = {
        //     isNull: function(value, msg) {
        //         if (value === '') return msg;
        //     },
        //     isMinLength: function(value, length, msg) {
        //         if (value.length < length) return msg;
        //     }
        // }
        // let validatorFn = function(method, value, msg, length, ) {
        //     if (length) {
        //         return rules[method](value, length, msg)
        //     }
        //     return rules[method](value, msg)
        // }
        // oForm.onsubmit = function(e) {
        //     e.preventDefault();
        //     let v1 = validatorFn('isNull', oForm.username.value, '用户名不能为空');
        //     let v2 = validatorFn('isMinLength', oForm.password.value, '密码长度不能小于6', 6);
        //     if (v1) console.log(v1);
        //     if (v2) console.log(v2);
        //     else console.log('校验通过');
        // }
    
        // ------------------------------------------------------------------------------------------------------
        // 通过上面我们发现,我们对于length处理的很蹩脚,我们想要规则写成这样的形式:'密码长度 : 6',我们改造一下
    
        // 策略不变
        let rules = {
            isNull: function(value, msg) {
                if (value === '') return msg;
            },
            isMinLength: function(value, length, msg) {
                if (value.length < length) return msg;
            }
        }
    
    
        // 我们创造一个添加规则的类 
        class AddRules {
            constructor() {
                this.saveArr = [];
            }
            add(ele, rule, tip) {
                let ruleVal;
                if (rule.includes(':')) {
                    let ruleKey = rule.split(':')[0];
                    ruleVal = rule.split(':')[1];
                    rule = ruleKey;
                }
                this.saveArr.push(function() {
                    let tempArr = [];
                    if (ruleVal) {
                        tempArr.push(ele.value, ruleVal, tip);
                    } else {
                        tempArr.push(ele.value, tip);
                    }
                    return rules[rule].apply(ele, tempArr)
                })
    
            };
    
            valid() {
                let count = 0;
                let res = []
                this.saveArr.forEach(item => {
                    let r = item();
                    if (r) {
                        count++;
                        console.log(r);
                    }
                })
                if (count > 0) {
                    return false
                } else {
                    return true;
                }
            }
        }
        let temp = new AddRules();
        temp.add(oForm.username, 'isNull', '用户名不能为空');
        temp.add(oForm.password, 'isMinLength:6', '密码长度不小于6');
        oForm.onsubmit = function(e) {
            // 去除表单默认提交行为
            e.preventDefault();
            if (temp.valid()) {
                console.log('校验通过');
            }
        }
    
       
    </script>
  • 相关阅读:
    HDOJ 2095 find your present (2)
    HDOJ 2186 悼念512汶川大地震遇难同胞——一定要记住我爱你
    九度 1337 寻找最长合法括号序列
    九度 1357 疯狂地Jobdu序列
    HDOJ 1280 前m大的数
    九度 1343 城际公路网
    九度 1347 孤岛连通工程
    HDOJ 2151 Worm
    九度 1342 寻找最长合法括号序列II
    九度 1346 会员积分排序
  • 原文地址:https://www.cnblogs.com/haoqiyouyu/p/14749456.html
Copyright © 2011-2022 走看看