【JS】JS多条件判断、高重复代码的优化

最新推荐文章于 2024-08-01 09:53:08 发布

ew45218

最新推荐文章于 2024-08-01 09:53:08 发布

阅读量480

点赞数 11

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/ew45218/article/details/136505122

版权

本文讨论了在JavaScript中，如何通过提取重复代码并重构为函数式编程方式来优化处理多条件判断的代码，特别是针对`advanced.propertyLink`中的复杂逻辑，如根据条件显示/隐藏字段并更新验证规则。

摘要由CSDN通过智能技术生成

JS多条件判断、高重复代码的优化。
原代码：

TextInput.forEach(el=>{
	if(el.advanced&&el.advanced.enable){
		console.log("el.advanced.propertyLink",el.advanced.propertyLink)
		if(el.advanced.propertyLink.length==1){
			const pl= el.advanced.propertyLink[0]
			console.log(this.value[pl.mainControl],pl.value)
			//判断类型
			if(pl.condition=='='){
				//显示属性
				console.log("pl.property",pl.property,pl.linkControl)
				if(pl.property==1){
					//必填
					if(this.value[pl.mainControl]==pl.value){
						this.$set(this.rules, pl.linkControl, [{ required: true, message: el.title+' is required', trigger: 'change' }]);
					}else{
						this.$set(this.rules, pl.linkControl, [{ required: false, message: el.title+' is required', trigger: 'change' }]);
					}
				}else if(pl.property==2){
					//显示
					if(this.value[pl.mainControl]==pl.value){
						//显示 E
						this.showField(pl.linkControl)
					}else{
						//隐藏 H
						this.hideField(pl.linkControl) 
					}
				}else if(pl.property==3){
					//隐藏
					if(this.value[pl.mainControl]==pl.value){
						//隐藏 H
					    this.hideField(pl.linkControl)
					}else{
						//显示 E
						this.showField(pl.linkControl)
					}
				}
			}else if(pl.condition=='>'){
				
			}else if(pl.condition=='<'){
				
			}else if(pl.condition=='>='){
				
			}else if(pl.condition=='<='){
				
			}else if(pl.condition=='<>'){
				
			}else if(pl.condition=='IN'){
				const arr = pl.value.split(",")
				if(pl.property==1){
					//必填
					if(arr.includes(this.value[pl.mainControl])){
						this.$set(this.rules, pl.linkControl, [{ required: true, message: el.title+' is required', trigger: 'change' }]);
					}else{
						this.$set(this.rules, pl.linkControl, [{ required: false, message: el.title+' is required', trigger: 'change' }]);
					}
				}else if(pl.property==2){
					//显示
					if(arr.includes(this.value[pl.mainControl])){
						//显示 E
						this.showField(pl.linkControl)
					}else{
						//隐藏 H
						this.hideField(pl.linkControl) 
					}
				}else if(pl.property==3){
					//隐藏
					if(arr.includes(this.value[pl.mainControl])){
						//隐藏 H
					    this.hideField(pl.linkControl)
					}else{
						//显示 E
						this.showField(pl.linkControl)
					}
				}
			}else if(pl.condition=='NOT IN'){
				const arr = pl.value.split(",")
				if(pl.property==1){
					//必填
					if(arr.includes(this.value[pl.mainControl])){
						this.$set(this.rules, pl.linkControl, [{ required: false, message: el.title+' is required', trigger: 'change' }]);
					}else{
						this.$set(this.rules, pl.linkControl, [{ required: true, message: el.title+' is required', trigger: 'change' }]);
					}
				}else if(pl.property==2){
					//显示
					if(arr.includes(this.value[pl.mainControl])){
						//隐藏 H
						this.hideField(pl.linkControl) 
					}else{
						//显示 E
						this.showField(pl.linkControl)
					}
				}else if(pl.property==3){
					//隐藏
					if(arr.includes(this.value[pl.mainControl])){
						//显示 E
						this.showField(pl.linkControl)
					}else{
						//隐藏 H
						this.hideField(pl.linkControl)
					}
				}
				
			}else if(pl.condition=='LIKE'){
				
			}else if(pl.condition=='NO LIKE'){
				
			}
		}
	}
})

代码优化：
1、提取重复内容
2、灵活使用方法作为参数传参

TextInput.forEach(el => {
    if (el.advanced && el.advanced.enable) {
		if(el.advanced.propertyLink.length==1){
			const pl = el.advanced.propertyLink[0];
			if (pl) {
			    this.handlePropertyLink(pl, this.value, this.rules, el.title, this.showField, this.hideField);
			}
		}
        
    }
});
//关联属性
handlePropertyLink(pl, value, rules, title, showField, hideField) {
    const conditions = {
        '=': this.handleEqualCondition,
        'IN': this.handleInCondition,
        'NOT IN': this.handleNotInCondition,
        // 其他条件
    };
    if (conditions[pl.condition]) {
        conditions[pl.condition](pl, value, rules, title, showField, hideField);
    }
},
//等于
handleEqualCondition(pl, value, rules, title, showField, hideField) {
    const controlValue = value[pl.mainControl];
    if (pl.property == 1) {
        rules[pl.linkControl] = [{ required: controlValue == pl.value, message: `请完成${title}`, trigger: 'change' }];
    } else if (pl.property == 2) {
        controlValue == pl.value ? showField(pl.linkControl) : hideField(pl.linkControl);
    } else if (pl.property == 3) {
        controlValue == pl.value ? hideField(pl.linkControl) : showField(pl.linkControl);
    }
},
 //IN
 handleInCondition(pl, value, rules, title, showField, hideField) {
    const arr = pl.value.split(",");
    const controlValue = value[pl.mainControl];
    if (pl.property == 1) {
        rules[pl.linkControl] = [{ required: arr.includes(controlValue), message: `请完成${title}`, trigger: 'change' }];
    } else if (pl.property == 2) {
        arr.includes(controlValue) ? showField(pl.linkControl) : hideField(pl.linkControl);
    } else if (pl.property == 3) {
        arr.includes(controlValue) ? hideField(pl.linkControl) : showField(pl.linkControl);
    }
},
//NOT IN
 handleNotInCondition(pl, value, rules, title, showField, hideField) {
    const arr = pl.value.split(",");
    const controlValue = value[pl.mainControl];
    if (pl.property == 1) {
        rules[pl.linkControl] = [{ required: !arr.includes(controlValue), message: `${title} is required`, trigger: 'change' }];
    } else if (pl.property == 2) {
        arr.includes(controlValue) ? hideField(pl.linkControl) : showField(pl.linkControl);
    } else if (pl.property == 3) {
        arr.includes(controlValue) ? showField(pl.linkControl) : hideField(pl.linkControl);
    }
},