javascript - 条件不同，执行事件相同的情况 怎么封装？

问题描述

问 题

wzCommon.checkRequired = function (parent, errorStr, fn) {
    var required = parent.find('.required'),
        oNumber = parent.find('.number'),
        oTel = parent.find('.tel'),
        flag = true;
    if (required.length > 0) {
        required.each(function () {
            var getVal = $(this).val();
            if (getVal === '') {
                layer.msg(errorStr, {icon: 2});
                flag = false;
                return false;
            }
        });
    }
    if (oNumber.length > 0) {
        oNumber.each(function () {
            var verifyNumber = $(this).val();
            if (isNaN(verifyNumber)) {
                layer.msg(errorStr, {icon: 2});
                flag = false;
                return false;
            }
        });
    }
    
    if (oTel.length > 0) {
        oTel.each(function () {
            var getVal = $(this).val();
            debugger;
            if (!wzCommon.isPhoneNo(getVal)) {
                layer.msg(errorStr, {icon: 2});
                flag = false;
                return false;
            }
        });
    }
    
    if (flag) {
        fn();
    }
    return true;
};

我的思路是这样，但是不清除怎么写

wzCommon.checkStr = function (obj, errorStr, fn) {
    if (obj.length > 0) {
        obj.each(function () {
            var getVal = $(this).val();
            if (这里是不同条件) {
                layer.msg(errorStr, {icon: 2});
                flag = false;
                return false;
            }
        });
    }
    
    if (flag) {
        fn();
    }
    return true;
};

解决方案

// 既然你已经抽离出来, 只剩不同条件的判断, 那写一个检测器就好了啊.
var verifier = {
    common  : function(val) { return !!val },
    required: function(val) { return val==='' },
    number  : function(val) { return isNaN(num) },
    // ... 以此类推
};


// 这里你只需要处理一个 prop 参数, 这个参数你可以放到元素 data-prop 里, 也可以直接用类名, 很好处理
obj.each(function () {
    var getVal = $(this).val();
    // 假设你直接把 props 写在元素上
    var prop   = $(this).attr('data-prop') || 'common';
    if ( verifier[prop](getVal) ){
        layer.msg(errorStr, {icon: 2});
        flag = false;
        return false;
    }
});

这篇关于javascript - 条件不同，执行事件相同的情况 怎么封装？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！