Question

我有一个左右部分的页面。右侧部分根据用户在左侧选择的过滤器显示结果。每次用户选择左侧的过滤器并按下按钮时，我都会向服务器发出查询以获取结果。

我注意到我的if / else子句看起来很糟糕，每次添加新的过滤器我都要做很多工作。有什么方法可以避免这种情况吗？

目前我有以下过滤条件：foo, bar, fromdate, todate, profile

我的if / else看起来像这样：

var query = "?"
if (self.foo === '' && self.bar === '' && self.fromdate === '' && self.todate === '' && self.profile === '')
   query = "";
else if (self.foo.length > 2 && self.bar === '' && self.fromdate === '' && self.todate === '' && self.profile === '')
   query += "foo=" + self.foo;
else if (self.foo.length > 2 && self.bar.length > 2 && self.fromdate === '' && self.todate === '' && self.profile === '')
   query += "foo=" + self.foo + "&bar=" + self.bar;

// ...

xhr.open('GET', apiURL+query)
self.loading = true
xhr.onload = function () {
    self.requests = JSON.parse(xhr.responseText)
    //do stuff
    self.loading = false;
}

问题有没有办法让if / else更容易理解和管理？

Answer 1

我的建议

    var queryParams = [
       'foo',
       'bar',
       'profile',
       etc...
    ]
    var query = '';
    queryParams 
       .forEach(key => query = self[key].length > 2 ? 
           query + `&${key}=${self[key]}` : query );
    query = query.length ? '?' + query : query;

当你想添加密钥时，只需更新queryParams数组，无需触及逻辑。

Answer 2

我会以某种方式做到这一点

var query = '?';
query += self.foo.length > 2 ? '&foo=' + self.foo : '';
query += self.bar.length > 2 ? '&bar=' + self.bar : '';
query += self.fromdate ? '&fromdate=' + self.fromdate : '';
query += self.todate ? '&todate=' + self.todate : '';
query += self.profile ? '&profile=' + self.profile : '';

对象

var self = {
  foo: "hello",
  bar: "w",
  profile: "me"
}

您将获得query作为?&foo=hello&profile=me的结果。开头?&的组合不会影响请求，因此您无需删除前导&。

Answer 3

也许这个例子会激励你。我希望它是简单，声明和灵活的解决方案 - 无论您在html模板中绑定到params模型的输入数量多少，js代码都保持不变。

<div id="app">
  <input type="text" v-model="params.foo">
  <input type="text" v-model="params.bar">
  <input type="text" v-model="params.baz">
  <button @click="submit">Submit</button>
</div>

<script src="https://unpkg.com/vue@2.5.3/dist/vue.min.js"></script>

contourf(X,Y, log(V_E));
ylabel( cb = colorbar, 'Electric Potenial (V)' ) # note added 'cb' step
set(cb, 'yticklabel', exp(get(cb, 'ytick')))

过滤结果集时如何避免多个if / else

3 个答案: