参数冗杂的优化解决办法看这里

迷南。 2023-02-21 11:36 13阅读 0赞

在前端很容易出现多种判断和多种输入框联合搜索的情况，如果按部就班的进行书写if语句会提高维护成本等问题。  
首先先看一下当前的问题：

### 多块逻辑代码层叠冗杂 ###

if (!!this.CustName) { 
          this.params.queryGroup.Groups.push({ //需要向params参数中push的字段
            Op: "and",
            Rules: [
              { 
                Field: "CustomerName",
                Data: this.CustName,
                Op: "eq"
              }
            ]
          });
          sessionStorage.setItem("CustName", this.CustName);//存取session值保证记忆性
        } else { 
          sessionStorage.removeItem("CustName");
        }

↓  
当然这只是一个判断区块，在一个当下的系统里，上联的搜索框将会包括很多这样的区块。所以会导致代码很长。然后我们来分析这个问题。

### 首先分类 ###

![在这里插入图片描述][20200630102312651.png]  
但是大致可以分为两种，一框一搜和一框多搜。

#### 一框一搜 ####

对于一框一搜的情况类似于之前的代码展示，当然彼此的代码可能不同，但是思路是相通的，代码是要看后台给出的接口以对应。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]  
红色区域表示搜索的Op方式，搜索哪一列，用哪一个取到的数据（输入框绑定的数据），列与数据之间的匹配方式是（如模糊，全等，大于小于等）。

所以这四个数据是需要传入的，但模板是一定的。

singleQuery(Filed:any,Op1:any,Op2:any,Data:any){ 
        this.params.queryGroup.Groups.push({ 
        Op: Op1,
        Rules: [
          { 
            Field: Filed,
            Data: Data,
            Op: Op2
          }
        ]
      });
     }

对于引入方法后的判断逻辑代码展示

if (!!this.CustName) { 
          this.singleQuery("CustName","and","cn",this.CustName);
          sessionStorage.setItem("CustName", this.CustName);
        } else { 
          sessionStorage.removeItem("CustName");
        }

如果说一框一搜只是简单的把共性提取出来，那一框多搜是否可以借鉴这个模式呢？

#### 一框多搜 ####

如图片之前的演示截图中的一个框既可以搜索姓名，也可以搜到别的数据。  
在传入的参数也要因此多一条规则的限定，即不再用之前的and(&&)，改为使用or(||)，即每个规则的字符组都可以拿到相应的数据进行搜索。

if (!!this.ManyColumn) { 
          this.params.queryGroup.Groups.push({ 
            Op: "or",
            Rules: [
              { 
                Field: "PlateNumber",
                Data: this.ManyColumn,
                Op: "cn"
              },
              { 
                Field: "VinNumber",
                Data: this.ManyColumn,
                Op: "cn"
              },
              { 
                Field: "HolderName",
                Data: this.ManyColumn,
                Op: "cn"
              }
            ]
          });
        }

如果说一搜一是横向比较即在不同的一搜一输入框中进行提取共性（红色），那么一搜多将纵向比较，提取规则的共性。  
![在这里插入图片描述][20200630104152994.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]

createrules(Filed:any,Date:any,Op:any){ 
      var rules={ 
      Field: Filed,
      Data: Date,
      Op: Op
      }
      return rules;
    }

此处即可以简化为一个方法创建某些特定值，创建特定的几次。

↓简化后的：

if (!!this.ManyColumn) { 
          this.params.queryGroup.Groups.push({ 
            Op: "or",
            Rules: [
              a.createrules("PlateNumber",this.ManyColumn,"cn"),
              a.createrules("VinNumber",this.ManyColumn,"cn"),
              a.createrules("HolderName",this.ManyColumn,"cn"),
            ]
          });
        }

### 同页面中重复使用的搜索 ###

如在页面中，查找和下载（对于列表而言），都需要进行搜索相同的输入框的判断，则可以将共用的部分存入方法中，进行简化代码。

sameFilterGroups() 
    { 
    if (!!this.CustName) { 
          this.singleQuery("CustName","and","cn",this.CustName);
          sessionStorage.setItem("CustName", this.CustName);
        } else { 
          sessionStorage.removeItem("CustName");
        }
    }

则共用部分直接调用sameFilterGroup方法即可。

### 整合类的思考 ###

进一步思考，能否利用设计模式中的模式对此类方法进行整合，实现自动拼装。

先更新到这里，后续对设计模式中合适的模式进行学习后会进行补充。

一个月没怎么更新了。有点手生。

[20200630102312651.png]: https://img-blog.csdnimg.cn/20200630102312651.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200630102851282.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[20200630104152994.png]: https://img-blog.csdnimg.cn/20200630104152994.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200630104419152.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70