利用js-tool-big-box工具库，快速实现了一个抽奖功能本来我们都是要加班的，但昨天同事下班特别早，按时打卡就走

本来我们都是要加班的，但昨天同事下班特别早，按时打卡就走了。我们还很惊讶，老张怎么走这么早。今天早上来公司，我悄悄问他：老张，昨天那么早干啥去了？老张悄悄的说：我跟你说，你别跟别人说。我说：嗯，一定不会说的，放心吧。

老张说：之前的一个领导现在单干去了，突然有个很急的需求让我做，给我2000块钱。

我说：哦？好干吗？

他说：是个抽奖功能。

我说：那可很复杂啊，你一晚上就干完了？

他说：很简单的，我10分钟就搞定了，然后跟甲方说做了一晚上。

我说：快给我介绍介绍，下次我有机会也用。

然后他给我介绍了一下他的私单过程。

1 抽奖需求

甲方要求做一个抽奖功能，不需要特别完美。他们是和一个出版社合作的，用户们达到一定等级，可以定期抽奖送书。然后需要把这些用户收集起来，每次有几十个，或者上百个。然后还要输入，本次抽奖会有几个幸运用户，然后点击抽奖按钮后呢，把这些幸运用户展示出来就可以了。

然后我问：那抽奖这个界面，给用户们截图吗？他们怎么知道你不是内定的？老张说：抽奖的时间点有直播，用户可以看见，不会作弊的。

2 界面准备

界面呢，需要做这些准备。

1 有一个区域，可以展示所有参与抽奖的读者；

2 有一个输入框，可以输入本次希望有几个幸运用户，这是一个可变的；

3 准备一个按钮，点击按钮后，执行抽奖事件；

4 准备一个中奖区域，可以让用户看到，本次抽奖，都有谁中奖了；

我们以Vue模板为例，看一下准备的代码：

<div class="center">{{ people }}</div>
<div class="center">
      <label>中奖人数：</label><input type="text" v-model="num" />
</div>
<div class="center">
      <el-button @click="handleLuck">开始抽奖</el-button>
</div>
<div class="center">
      <label>中奖人员：</label><span>{{ luckPeople }}</span>
</div>

3 数据准备

我们先模拟一些备选用户，这里先准备50个吧，然后放入数据依赖中，代码如下：

data () {
    return {
      people: '李伟, 王芳, 张强, 李娜, 王磊, 刘静, 张丽, 陈伟, 李敏, 王静, 张杰, 陈娜, 刘强, 李芳, 王强, 李丽真, 陈静, 刘杰, 王娜, 张敏, 李静, 王丽, 张强, 刘伟, 陈强, 李杰, 王敏, 张静, 刘芳, 陈杰, 李娜, 王伟, 张磊, 刘静, 陈丽, 李强, 王杰, 张娜, 刘敏, 陈静, 李丽, 王强, 张杰, 刘芳, 陈娜, 李敏, 王静, 张丽, 刘强, 陈伟',
      luckPeople: '',
      num: 0,
    }
  },

4 抽奖事件

这里的抽奖呢，我们采用了非常丰富，便捷的js工具库 js-tool-big-box，首先需要安装

4.1 执行安装命令

npm i js-tool-big-box

4.2 引入dataBox对象

获取随机幸运者的公共方法被放到了dataBox对象中，所以需要引入这个对象，获取幸运者的公共方法是luck

import { dataBox } from 'js-tool-big-box';

4.3 按钮事件

当点击按钮的时候，就要开始抽奖了，我们可以在输入框中输入本次希望获奖的人数，也就是数据依赖中的num变量。

handleLuck() {
      let luckNum = Number(this.num);
      let luckPeople = this.people.split(',');
      let resultLuckPeople = dataBox.luck(luckPeople, luckNum);
      this.luckPeople = resultLuckPeople.join(',');
}

看上面这段代码，dataBox.luck方法呢，需要传入2个参数：

1 第一个参数呢，是备选名单，需要传入一个字符串数组；

2 第二个参数呢，是个数值型，表示希望获奖的人数；

我们来看一下效果：

4.5 希望5个人中奖

听完老张的讲解后，我开始对这个js-tool-big-box工具库感兴趣了。我说，你用的这个工具库真是方便快捷啊。

他说：嗯，反正以后前端项目，基本utils目录可以减少很多代码了，也不用每个项目的公共方法拷来拷去了，你看上次做那个项目，少引了好几个第三方库，至少时间日期的、cookie的、copy文字到剪贴板的不用引了。而且登录页检测密码强度啦、之前写的很多正则验证啦、发送jsonp请求啦、下载文件啦、字符串中间加星号隐藏啦、数组去重啦，这些，我都不用再写公共方法了，里面还有很多方法，使用起来特别便捷。

我问：那这个工具库和咱们之前用的lodash哪个好呢？

他说：那个库，你能和作者交流吗？你看他多久不更新了，互联网讲究活跃啊，而且咱们都是做前端开发的，你去看看这个工具库的学习文档，百度就能搜到，几乎都是咱们项目中特别常用的，符合中国开发者特色的方法。而且js-tool-big-box的作者还说，一起交流会有小礼物，很不错的。

我说：哦？还有小礼物？你拿到什么礼物了？我正好要给女朋友买个苹果15pro呢。

老张说：你试试不就知道了，试试又不花钱。