低成本实现“猜你喜欢”需求的几种思路（本质为随机数与“换一换”）

这个话题的第一次出现，是在 2017 年 8 月份的时候，到现在也蛮久了，之所以想起来说要小结一下，是因为这一年里不少新同学都过问过这么个问题，自己虽然做的不算多，但也通过几种情况完成了各类需求，给了他们一些思路指点，既然陆陆续续会遇到，那就干脆写个笔记也方便以后用。

当初自己第一次遇到一个需求，其实需求文档上写的是做一个“猜你喜欢”，然而并没有后端的支持，也就是实际上这个“猜你喜欢”本质并不是“猜”，而是一个随机展示，剥掉外皮看本质，落地执行也就清晰了，最终那个“猜你喜欢”上线后，就是随机渲染，以及所谓的“换一换”。

好了，小回忆之后就是总结了，基于后端提供的不同数据情况，这里列举一些常见的套路，如果以后有新的，再慢慢补进来。

后端能够提供随机数据

先从最简单的说吧，如果是大 project，产品很重视，后端也有独立人员提供支持对接的话，肯定是优先从后端提供现成的数据返回，有了后端的随机数据，那前端只需要直接请求过来展示就 ok。

后端不随机，但有翻页

适用于一般的 project，比如一个投稿活动，在作品展示页面，除了按“热门/最新”排列作品，需求方可能会想提供一个随机作品模块来提高那些位于榜单后面的作品曝光量，那这个情况肯定不会单独要求后端做一个随机数据的接口返回，我们要基于作品列表接口，通过随机页码的方式来实现需求。

// 执行请求之前，定义一个随机正整数，比如举例是随机从1~10页里取其中1页
// 由于page通常都是从1开始，所以要用ceil向上取整
const randomPage = Math.ceil(Math.random() * 10)

$.ajax({
  // ……
  data: {
    page: randomPage,
  },
  success: function (data) {
    // ……
  },
  //……
})

注 1：如果要保证所有作品都覆盖到随机范围内，可以先这样定个静态随机值上限，第一次获取到数据后，再从接口返回的 count 总数去计算总页数（活动接口通常会有一个作品总数量值，用于体现当前参与情况），更新这个上限值。

注 2：需要“换一换”按钮，则点击按钮时重新生成一个 page 值请求新的列表数据即可。

后端不随机，没有翻页

这种情况也遇到过一次，就是后端是一个推荐作者列表，因为这种需求数据量不是很大，所以并没有做翻页，前端部分则只有一个小小的模块，每次展示 4 位作者，刷新页面随机推荐 4 位上来，或者手动换一拨。

$.ajax({
  // ……
  success: function (data) {
    // 假设result是数据源
    // 假设列表展示的数量是6个
    const randomLength = 6

    // 所以这里先计算出一个随机范围的最大上限，以保证不会随机到数据范围外
    const randomRange = data.result.length - randomLength

    // 计算起始的随机值，因为数组是从0开始下标，所以这里是用round来进行四舍五入取整
    const min = Math.round(Math.random() * randomRange)

    // 截止的数即为起始值假设列表数量
    const max = min + randomLength

    // 渲染列表
    for (let i = min; i < max; i++) {
      // ……
    }
  },
})

注：需要“换一换”按钮，则点击按钮时重新生成一个 min 值，并更新对应的 max 值，随机取本地数据的另外一段数据来渲染，无需请求接口。

目前主要就这 3 种情况，以后有别的话，再继续补充。