策略模式

策略模式的定義是:定義一系列的算法,把它們一個個封裝起來,並且使它們可以互相替換。

策略模式可用於緩動動畫,表單驗證等方面。

下面的代碼是用於表單驗證的策略模式。

/*******************策略類********************/
var strategies = {
    isNonEmpty: function( value, errorMsg ){
        if ( value === '' ){
             return errorMsg; 
        }
    },                 
    minLength: function( value, length, errorMsg ){
        if ( value.length < length ){
            return errorMsg; 
        }
    },
    isMobile: function( value, errorMsg ){
        if ( !/(^1[3|5|8][0-9]{9}$)/.test( value ) ){
            return errorMsg; 
        }
    },
};
/**********************Validator類*********************/
var Validator = function() {
    this.cache = [];
};

Validator.prototype.add = function(dom, rules) {
    var self = this;
    
    for(var i = 0, rule; rule = rules[i++]) {
        (function(rule) {
            var strategyAry = rule.strategy.split(':');
            var errorMsg = rule.errorMsg;

            self.cache.push(function() {
                var strategy = strategyAry.shift();
                strateAry.unshift(dom.value);
                strateAry.push(errorMsg);
                return strategies[strategy].apply(dom, strateAry);
            })
        })(rule);    
    }
};

Validator.prototype.start = function() {
    for(var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
        var errorMsg = validatorFunc();
        if(errorMsg) {
            return errorMsg;
        }
    }
};
/****************調用方法****************/
var validatorFunc = function () {
    var validator = new Validator();

    validator.add(
        registerForm.userName,
        [
            { strategy: 'isNonEmpty', errorMsg: '用戶名不能爲空' },
            { strategy: 'minLength:6', errorMsg: '用戶名長度不能小於 10 位' },
        ],
    );
    validator.add(
        registerForm.password,
        [
            { strategy: 'minLength:6', errorMsg: '密碼長度不能小於 6 位' },
        ],
    );
    validator.add(
        registerForm.phoneNumber,
        [
            { strategy: 'isMobile', errorMsg: '手機號碼格式不正確' },
        ],
    );

    var errorMsg = validator.start();
    return errorMsg;
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章