在我的小程序豆子碎片项目中，要求查询最新的、最火的、以及最不受欢迎的文章列表？

我使用了3个按钮和1个列表，点击这三个按钮来执行这三种列表查询，查询出来的数据使用这个列表来展示出来。

这三个按钮分别命名为最火，最新，最冷。我最开始是这样实现功能的。

每个按钮绑定一个点击事件，例如bindHotBtn，bindNewBtn，bindColdBtn。然后在JS文件中每个函数内调用后台的查询列表接口。

由于从后端传来的列表数据的数据结构一样，所以后端接口可以优化为1个，添加一个字段表示查询类型，这样就可以根据点击按钮不同查询不同的列表结果。

那么，再仔细思考一下，小程序端也可以进行优化，合并为一个函数，使用小程序的ID属性来区分点击了哪个按钮？

WXML页面写法如下：

 <!-- 查询快捷按钮-->
    <view class="weui-flex">
      <view class="weui-flex__item">
        <view class="placeholder" id="btnHot" bindtap="bindBtn" hover-class="placeholder-hover">最火</view>
      </view>
      <view class="weui-flex__item">
        <view class="placeholder" id="btnNew" bindtap="bindBtn" hover-class="placeholder-hover">最新</view>
      </view>
      <view class="weui-flex__item">
        <view class="placeholder" id="btnCold" bindtap="bindBtn" hover-class="placeholder-hover">最冷</view>
      </view>
    </view>

JS页面写法如下：

  bindBtn: function (e) {
    let btnId = e.target.id;
    let qtype = 1;
    switch (btnId) {
      case "btnHot":
        // 按浏览次数倒序排序，再按创建升序
        qtype = 1;
        break;
      case "btnNew":
        // 按创建倒序排序
        qtype = 2;
        break;
      case "btnCold":
        // 按浏览次数升序排序，再按创建升序
        qtype = 3;
        break;
      default:
        break;
    }
    this.setData({
      artList: [],
      qtype: qtype,
      op: 2,
    })


    this.getArtList(1, qtype)
  },

这样的效果当按钮特别多时，效果非常明显的，减少代码，减少错误。例如，你如果做个计算器，当输入数字时，完全可以一个函数搞定。

项目已经开源，开源地址参考我主页的个人网站。