年会没中奖,老板买了一个抽奖程序
-
为什么不选择用前端和后端
splice
?- 大多数人一开始想google法都会是
splihttps和http的区别ce
,这是个很正确也很直观的理解。但是要注意splice
是性能消耗很大的操作,如果抽奖池女配每天都在抱大腿我要成仙量级一大就会明显影响性能了
- 大多数人一开始想google法都会是
-
为什么给
list[random]
赋值,然后长度减一?- 我们需要把中奖的用户剥离出去,然后把数组末尾的用户填进来,最后把整个数组的长度减一,这样下一轮遍历的时候,就是个全前端是什么工作新的数组,而且对整个数组的改动是最小的,性能消耗最小.
React 实现
使用 create-react-app 创建一个项目, 并且配置 tailwindcss
npx create-react-app my-project
npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p
先定前端开发义几个状态
// 当前抽几等奖奖
const [current, setCurrent] = useState(awards.length - 1);
const award = awards[current];
// 是否结束
const [over, setOver] = useState(false);
// 当前抽了几次
const [currentTime, setCurrentTime] = useState(0);
// 是的在进行中
const goingRef = useRef(false);
// 已经中奖用户,拥有用户数据过滤
const [winners, setWinners] = useState([]);
// 中奖结果输出
const [result, setResult] = useState({});
// 界面展示用户
const [showUsers, setShowUsers] = useState([]);
// 一次抽几个
const currentNumber = award.count / award.time;
按开始暂停实现
const toggle = () => {
if (over) {
return;
}
if (!goingRef.current) {
if (award.count > currentWinNumber) {
const winnerIds = winners.map((w) => w.id);
let others = winnerIds.length
? users.filter((u) => !winnerIds.includes(u.id))
: users;
goingRef.current = setInterval(() => {
setShowUsers(randomCountUser(others, currentNumber));
}, 200);
} else {
if (current > 0) {
setCurrentTime(0);
setShowUsers([]);
setCurrent(current - 1);
} else {
setOver(true);
}
}
} else {
clearInterval(goingRef.current);
goingRef.current = false;
setWinners([...winners, ...showUsers]);
setResult((prev) => {
let sumWinners = prev[award.name] || [];
sumWinners = sumWinners.concat(showUsers);
return {
...prev,
[award.name]: sumWinners,
};
});
setCurrentTime(currentTime + 1);
}
};
使用 tailwind CSS
使用 grid
布局 place-items-stretch
这个 class 可以让子元素铺满整个区域
总结
这就https和http的区别总结了,这么快吗https域名? 还没到100行代码,老板买的抽奖程序,就这么简单吗?是否有内定前端名额?,好吧,那我们来在增加一个内定名额吧
如何100%中奖,
增加内定参数
const suerData={
'一等奖':[701,702]
}
701 和 702 是我后前端开发需要学什么面增加的2个用户,后面我希望这 2 个用户获得一等奖
自定义 hooks
其实抽奖的核心都是随机数,我们只需要定义入参和出参,抽奖过程中的参数我们不关心, 所有我们可以抽取出一个自定义HTTP hoohttps域名k。
输入
- users 所有用户
- awards 所有奖项
- sureData 内定名额
输出
- toggle 开始或停止
- award 当前抽的奖项
- showUsers 显示的用户
- result 中奖结果
const reducer = (state, payload) => ({ ...state, ...payload });
function useLottery(users, awards, sureData = {}) {
// 是的在进行中
const goingRef = useRef(false);
const [state, setState] = useReducer(reducer, {
current: awards.length - 1,
over: false, //是否结束
currentTime: 0, // 当前抽了几次
winners: [], // 已经中奖用户,拥有用户数据过滤
result: [], // 中奖结果输出
showUsers: [], // 界面展示用户
sure: sureData,
});
const { current, over, currentTime, winners, result, showUsers, sure } =
state;
// 当前抽几等奖奖
const award = awards[current];
// 一次抽几个
const currentNumber = award.count / award.time;
//currentWinNumber
const currentWinNumber = currentTime * currentNumber;
const toggle = () => {
if (over) {
return;
}
if (!goingRef.current) {
if (award.count > currentWinNumber) {
const winnerIds = winners.map((w) => w.id);
let others = winnerIds.length
? users.filter((u) => !winnerIds.includes(u.id))
: users;
goingRef.current = setInterval(() => {
setState({
showUsers: randomCountUser(others, currentNumber),
});
}, 200);
} else {
if (current > 0) {
setState({
currentTime: 0,
showUsers: [],
current: current - 1,
});
} else {
setState({
over: true,
});
}
}
} else {
clearInterval(goingRef.current);
goingRef.current = false;
// 最终显示用户,为了可以直接修改
let finailyShowUsers = showUsers;
let finailySureData = { ...sure };
// 如果有内定名额逻辑
if (Array.isArray(sure[award.name])) {
finailyShowUsers = showUsers.map((p, index) => {
let sureUser;
sureUser = sure[award.name][index]
? users.find((u) => u.id === sure[award.name][index])
: undefined;
if (sureUser) {
finailySureData[award.name] = sure[award.name].filter(
(id) => id !== sureUser.id
);
return sureUser;
} else {
return p;
}
});
}
let sumWinners = result[award.name] || [];
sumWinners = sumWinners.concat(finailyShowUsers);
setState({
winners: [...winners, ...finailyShowUsers],
showUsers: finailyShowUsers,
currentTime: currentTime + 1,
sure: finailySureData,
result: {
...result,
[award.name]: sumWinners,
},
});
}
};
return {
toggle,
result,
award,
showUsers,
};
}
测试
使用 hooks
const { toggle, award, showUsers, result } = useLottery(users, awards, {
三等奖: [701, 702],
});
发布 npm 包
当然这个hook 我们可以发布一个 npm 包,未来说不定前端会开发移动端的抽奖前端是什么工作页面,我们可以公用这个抽奖逻辑,http://www.baidu.com只需要重新女配末世养崽日常写视图部分就好了 在发包之前,还需要对这个 hook 进行测试,这里我使用 @testing-library/react-hooks,在供品夫人这里就不展开叙述了,先预留一前端学什么篇文章《如何测试 reac前端工程师t hooks?》
最后
通过本文我学会了
- 发https安全问题布一个 react hooks npm 包
- 使用 github action 自动发布 npm 包
- 使用 gith女配没有求生欲藤萝为枝ub pages 部署预工商银行览页面
- 所有的抽奖程序都是随机数
- 是程序就可能会有内定名额
抽奖程序 plus(附加内定名额) 我也免费赠送给大家,希望各位喜欢。
- 体验地址:maqi1520.gihttps认证thub.io/react-use-l…
- npm: www.npmjs.com/package/@ma…
- git前端和后端的区别hub: github.com/maqi1520/re…
全文结束女配没有求生欲txt, 记得点赞 . 希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。
领导说开始就滚动屏幕,领导喊停就停,就这么个抽前端和后端奖形式,大家都懂的。
奖品数据 JSON
先定义一个 JSON 描述下奖品情况吧
[
{
name: "一等奖",
count: 10,
img: "https://www.6hu.cc/storage/2022/02/24655-4EYgMg.png",
time: 10,
},
{
name: "二等奖",
count: 30,
img: "https://www.6hu.cc/storage/2022/02/24655-qr5OGY.png",
time: 5,
},
{
name: "三等奖",
count: 50,
img: "https://www.6hu.cc/storage/2022/02/24655-6aMp5A.png",
time: 5,
},
];
time 是抽奖次数, count 是奖品数量
模拟用户
这里使https域名用大名鼎鼎的 faker.js 目前已经由社区维护了, 首先要安装包
npm install @faker-js/faker -D
生成700名用户
import faker from "@faker-js/faker";
faker.setLocale("zh_CN");
const users = new Array(700).fill(null).map((item, index) => ({
id: index + 1,
name: faker.name.lastName() + faker.name.firstName(),
}));
id 要唯一,因为可能存在同名的情况
JS 实现抽奖
也就是要从一个用户列表中随机出几个用户
const randomCountUser = (list, count) => {
let shows = [];
for (let index = 0; index < count; index++) {
const random = Math.floor(Math.random() * list.length);
shows.push(list[random]);
list[random] = list[list.length - 1];
list.length--;
}
return shows;
};
-
为什么不选择用前端和后端
splice
?- 大多数人一开始想google法都会是
splihttps和http的区别ce
,这是个很正确也很直观的理解。但是要注意splice
是性能消耗很大的操作,如果抽奖池女配每天都在抱大腿我要成仙量级一大就会明显影响性能了
- 大多数人一开始想google法都会是
-
为什么给
list[random]
赋值,然后长度减一?- 我们需要把中奖的用户剥离出去,然后把数组末尾的用户填进来,最后把整个数组的长度减一,这样下一轮遍历的时候,就是个全前端是什么工作新的数组,而且对整个数组的改动是最小的,性能消耗最小.
React 实现
使用 create-react-app 创建一个项目, 并且配置 tailwindcss
npx create-react-app my-project
npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p
先定前端开发义几个状态
// 当前抽几等奖奖
const [current, setCurrent] = useState(awards.length - 1);
const award = awards[current];
// 是否结束
const [over, setOver] = useState(false);
// 当前抽了几次
const [currentTime, setCurrentTime] = useState(0);
// 是的在进行中
const goingRef = useRef(false);
// 已经中奖用户,拥有用户数据过滤
const [winners, setWinners] = useState([]);
// 中奖结果输出
const [result, setResult] = useState({});
// 界面展示用户
const [showUsers, setShowUsers] = useState([]);
// 一次抽几个
const currentNumber = award.count / award.time;
按开始暂停实现
const toggle = () => {
if (over) {
return;
}
if (!goingRef.current) {
if (award.count > currentWinNumber) {
const winnerIds = winners.map((w) => w.id);
let others = winnerIds.length
? users.filter((u) => !winnerIds.includes(u.id))
: users;
goingRef.current = setInterval(() => {
setShowUsers(randomCountUser(others, currentNumber));
}, 200);
} else {
if (current > 0) {
setCurrentTime(0);
setShowUsers([]);
setCurrent(current - 1);
} else {
setOver(true);
}
}
} else {
clearInterval(goingRef.current);
goingRef.current = false;
setWinners([...winners, ...showUsers]);
setResult((prev) => {
let sumWinners = prev[award.name] || [];
sumWinners = sumWinners.concat(showUsers);
return {
...prev,
[award.name]: sumWinners,
};
});
setCurrentTime(currentTime + 1);
}
};
使用 tailwind CSS
使用 grid
布局 place-items-stretch
这个 class 可以让子元素铺满整个区域
总结
这就https和http的区别总结了,这么快吗https域名? 还没到100行代码,老板买的抽奖程序,就这么简单吗?是否有内定前端名额?,好吧,那我们来在增加一个内定名额吧
如何100%中奖,
增加内定参数
const suerData={
'一等奖':[701,702]
}
701 和 702 是我后前端开发需要学什么面增加的2个用户,后面我希望这 2 个用户获得一等奖
自定义 hooks
其实抽奖的核心都是随机数,我们只需要定义入参和出参,抽奖过程中的参数我们不关心, 所有我们可以抽取出一个自定义HTTP hoohttps域名k。
输入
- users 所有用户
- awards 所有奖项
- sureData 内定名额
输出
- toggle 开始或停止
- award 当前抽的奖项
- showUsers 显示的用户
- result 中奖结果
const reducer = (state, payload) => ({ ...state, ...payload });
function useLottery(users, awards, sureData = {}) {
// 是的在进行中
const goingRef = useRef(false);
const [state, setState] = useReducer(reducer, {
current: awards.length - 1,
over: false, //是否结束
currentTime: 0, // 当前抽了几次
winners: [], // 已经中奖用户,拥有用户数据过滤
result: [], // 中奖结果输出
showUsers: [], // 界面展示用户
sure: sureData,
});
const { current, over, currentTime, winners, result, showUsers, sure } =
state;
// 当前抽几等奖奖
const award = awards[current];
// 一次抽几个
const currentNumber = award.count / award.time;
//currentWinNumber
const currentWinNumber = currentTime * currentNumber;
const toggle = () => {
if (over) {
return;
}
if (!goingRef.current) {
if (award.count > currentWinNumber) {
const winnerIds = winners.map((w) => w.id);
let others = winnerIds.length
? users.filter((u) => !winnerIds.includes(u.id))
: users;
goingRef.current = setInterval(() => {
setState({
showUsers: randomCountUser(others, currentNumber),
});
}, 200);
} else {
if (current > 0) {
setState({
currentTime: 0,
showUsers: [],
current: current - 1,
});
} else {
setState({
over: true,
});
}
}
} else {
clearInterval(goingRef.current);
goingRef.current = false;
// 最终显示用户,为了可以直接修改
let finailyShowUsers = showUsers;
let finailySureData = { ...sure };
// 如果有内定名额逻辑
if (Array.isArray(sure[award.name])) {
finailyShowUsers = showUsers.map((p, index) => {
let sureUser;
sureUser = sure[award.name][index]
? users.find((u) => u.id === sure[award.name][index])
: undefined;
if (sureUser) {
finailySureData[award.name] = sure[award.name].filter(
(id) => id !== sureUser.id
);
return sureUser;
} else {
return p;
}
});
}
let sumWinners = result[award.name] || [];
sumWinners = sumWinners.concat(finailyShowUsers);
setState({
winners: [...winners, ...finailyShowUsers],
showUsers: finailyShowUsers,
currentTime: currentTime + 1,
sure: finailySureData,
result: {
...result,
[award.name]: sumWinners,
},
});
}
};
return {
toggle,
result,
award,
showUsers,
};
}
测试
使用 hooks
const { toggle, award, showUsers, result } = useLottery(users, awards, {
三等奖: [701, 702],
});
发布 npm 包
当然这个hook 我们可以发布一个 npm 包,未来说不定前端会开发移动端的抽奖前端是什么工作页面,我们可以公用这个抽奖逻辑,http://www.baidu.com只需要重新女配末世养崽日常写视图部分就好了 在发包之前,还需要对这个 hook 进行测试,这里我使用 @testing-library/react-hooks,在供品夫人这里就不展开叙述了,先预留一前端学什么篇文章《如何测试 reac前端工程师t hooks?》
最后
通过本文我学会了
- 发https安全问题布一个 react hooks npm 包
- 使用 github action 自动发布 npm 包
- 使用 gith女配没有求生欲藤萝为枝ub pages 部署预工商银行览页面
- 所有的抽奖程序都是随机数
- 是程序就可能会有内定名额
抽奖程序 plus(附加内定名额) 我也免费赠送给大家,希望各位喜欢。
- 体验地址:maqi1520.gihttps认证thub.io/react-use-l…
- npm: www.npmjs.com/package/@ma…
- git前端和后端的区别hub: github.com/maqi1520/re…
全文结束女配没有求生欲txt, 记得点赞 . 希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。
PK创意闹新春,我正在参加「春节创意投稿大赛」,详情请看:春节创意投稿大赛
前言
昨天参加了公司年会,显然我啥奖项都没中,什么“优秀员工”都跟我们前端工程师无关,不然我不会在这里写NPM文了,等等,这里为什么要用“我们”,[疑问.jpg],前端工程师应该是评不工作总结到“优秀员工”的,[打脸.png],https和http的区别如果有小伙伴获得,欢迎在女配美炸天评论区分享,《前端工程师如前端学什么何入选优秀员工?》
先说下今年公司的奖项
- 一等奖 iPhone13 10名
- 二等奖 Apple Watch 30名
- 三等级 AirPos 50名
没有特等奖,感觉中奖率还蛮高的前端和后端哪个工资高,那么有多少人参加呢?http://www.baidu.com有 700 人?怎么有那么多人,[疑问.jpg],我怎么记得女配末世带娃求生公司只有 350 人左右,2021 招了这么多人HTTPS吗?然后呢,这个抽奖程序是买的,大概花了 5000+ 具体不记得了,我在想这个程序给内部开发不好吗?好用得着买前端和后端?算了,不纠结了,一起来看下抽女配每天都在为国争光奖程序怎么实现的女配满眼都是钱吧!
抽奖程序
领导说开始就滚动屏幕,领导喊停就停,就这么个抽前端和后端奖形式,大家都懂的。
奖品数据 JSON
先定义一个 JSON 描述下奖品情况吧
[
{
name: "一等奖",
count: 10,
img: "https://www.6hu.cc/storage/2022/02/24655-4EYgMg.png",
time: 10,
},
{
name: "二等奖",
count: 30,
img: "https://www.6hu.cc/storage/2022/02/24655-qr5OGY.png",
time: 5,
},
{
name: "三等奖",
count: 50,
img: "https://www.6hu.cc/storage/2022/02/24655-6aMp5A.png",
time: 5,
},
];
time 是抽奖次数, count 是奖品数量
模拟用户
这里使https域名用大名鼎鼎的 faker.js 目前已经由社区维护了, 首先要安装包
npm install @faker-js/faker -D
生成700名用户
import faker from "@faker-js/faker";
faker.setLocale("zh_CN");
const users = new Array(700).fill(null).map((item, index) => ({
id: index + 1,
name: faker.name.lastName() + faker.name.firstName(),
}));
id 要唯一,因为可能存在同名的情况
JS 实现抽奖
也就是要从一个用户列表中随机出几个用户
const randomCountUser = (list, count) => {
let shows = [];
for (let index = 0; index < count; index++) {
const random = Math.floor(Math.random() * list.length);
shows.push(list[random]);
list[random] = list[list.length - 1];
list.length--;
}
return shows;
};
-
为什么不选择用前端和后端
splice
?- 大多数人一开始想google法都会是
splihttps和http的区别ce
,这是个很正确也很直观的理解。但是要注意splice
是性能消耗很大的操作,如果抽奖池女配每天都在抱大腿我要成仙量级一大就会明显影响性能了
- 大多数人一开始想google法都会是
-
为什么给
list[random]
赋值,然后长度减一?- 我们需要把中奖的用户剥离出去,然后把数组末尾的用户填进来,最后把整个数组的长度减一,这样下一轮遍历的时候,就是个全前端是什么工作新的数组,而且对整个数组的改动是最小的,性能消耗最小.
React 实现
使用 create-react-app 创建一个项目, 并且配置 tailwindcss
npx create-react-app my-project
npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p
先定前端开发义几个状态
// 当前抽几等奖奖
const [current, setCurrent] = useState(awards.length - 1);
const award = awards[current];
// 是否结束
const [over, setOver] = useState(false);
// 当前抽了几次
const [currentTime, setCurrentTime] = useState(0);
// 是的在进行中
const goingRef = useRef(false);
// 已经中奖用户,拥有用户数据过滤
const [winners, setWinners] = useState([]);
// 中奖结果输出
const [result, setResult] = useState({});
// 界面展示用户
const [showUsers, setShowUsers] = useState([]);
// 一次抽几个
const currentNumber = award.count / award.time;
按开始暂停实现
const toggle = () => {
if (over) {
return;
}
if (!goingRef.current) {
if (award.count > currentWinNumber) {
const winnerIds = winners.map((w) => w.id);
let others = winnerIds.length
? users.filter((u) => !winnerIds.includes(u.id))
: users;
goingRef.current = setInterval(() => {
setShowUsers(randomCountUser(others, currentNumber));
}, 200);
} else {
if (current > 0) {
setCurrentTime(0);
setShowUsers([]);
setCurrent(current - 1);
} else {
setOver(true);
}
}
} else {
clearInterval(goingRef.current);
goingRef.current = false;
setWinners([...winners, ...showUsers]);
setResult((prev) => {
let sumWinners = prev[award.name] || [];
sumWinners = sumWinners.concat(showUsers);
return {
...prev,
[award.name]: sumWinners,
};
});
setCurrentTime(currentTime + 1);
}
};
使用 tailwind CSS
使用 grid
布局 place-items-stretch
这个 class 可以让子元素铺满整个区域
总结
这就https和http的区别总结了,这么快吗https域名? 还没到100行代码,老板买的抽奖程序,就这么简单吗?是否有内定前端名额?,好吧,那我们来在增加一个内定名额吧
如何100%中奖,
增加内定参数
const suerData={
'一等奖':[701,702]
}
701 和 702 是我后前端开发需要学什么面增加的2个用户,后面我希望这 2 个用户获得一等奖
自定义 hooks
其实抽奖的核心都是随机数,我们只需要定义入参和出参,抽奖过程中的参数我们不关心, 所有我们可以抽取出一个自定义HTTP hoohttps域名k。
输入
- users 所有用户
- awards 所有奖项
- sureData 内定名额
输出
- toggle 开始或停止
- award 当前抽的奖项
- showUsers 显示的用户
- result 中奖结果
const reducer = (state, payload) => ({ ...state, ...payload });
function useLottery(users, awards, sureData = {}) {
// 是的在进行中
const goingRef = useRef(false);
const [state, setState] = useReducer(reducer, {
current: awards.length - 1,
over: false, //是否结束
currentTime: 0, // 当前抽了几次
winners: [], // 已经中奖用户,拥有用户数据过滤
result: [], // 中奖结果输出
showUsers: [], // 界面展示用户
sure: sureData,
});
const { current, over, currentTime, winners, result, showUsers, sure } =
state;
// 当前抽几等奖奖
const award = awards[current];
// 一次抽几个
const currentNumber = award.count / award.time;
//currentWinNumber
const currentWinNumber = currentTime * currentNumber;
const toggle = () => {
if (over) {
return;
}
if (!goingRef.current) {
if (award.count > currentWinNumber) {
const winnerIds = winners.map((w) => w.id);
let others = winnerIds.length
? users.filter((u) => !winnerIds.includes(u.id))
: users;
goingRef.current = setInterval(() => {
setState({
showUsers: randomCountUser(others, currentNumber),
});
}, 200);
} else {
if (current > 0) {
setState({
currentTime: 0,
showUsers: [],
current: current - 1,
});
} else {
setState({
over: true,
});
}
}
} else {
clearInterval(goingRef.current);
goingRef.current = false;
// 最终显示用户,为了可以直接修改
let finailyShowUsers = showUsers;
let finailySureData = { ...sure };
// 如果有内定名额逻辑
if (Array.isArray(sure[award.name])) {
finailyShowUsers = showUsers.map((p, index) => {
let sureUser;
sureUser = sure[award.name][index]
? users.find((u) => u.id === sure[award.name][index])
: undefined;
if (sureUser) {
finailySureData[award.name] = sure[award.name].filter(
(id) => id !== sureUser.id
);
return sureUser;
} else {
return p;
}
});
}
let sumWinners = result[award.name] || [];
sumWinners = sumWinners.concat(finailyShowUsers);
setState({
winners: [...winners, ...finailyShowUsers],
showUsers: finailyShowUsers,
currentTime: currentTime + 1,
sure: finailySureData,
result: {
...result,
[award.name]: sumWinners,
},
});
}
};
return {
toggle,
result,
award,
showUsers,
};
}
测试
使用 hooks
const { toggle, award, showUsers, result } = useLottery(users, awards, {
三等奖: [701, 702],
});
发布 npm 包
当然这个hook 我们可以发布一个 npm 包,未来说不定前端会开发移动端的抽奖前端是什么工作页面,我们可以公用这个抽奖逻辑,http://www.baidu.com只需要重新女配末世养崽日常写视图部分就好了 在发包之前,还需要对这个 hook 进行测试,这里我使用 @testing-library/react-hooks,在供品夫人这里就不展开叙述了,先预留一前端学什么篇文章《如何测试 reac前端工程师t hooks?》
最后
通过本文我学会了
- 发https安全问题布一个 react hooks npm 包
- 使用 github action 自动发布 npm 包
- 使用 gith女配没有求生欲藤萝为枝ub pages 部署预工商银行览页面
- 所有的抽奖程序都是随机数
- 是程序就可能会有内定名额
抽奖程序 plus(附加内定名额) 我也免费赠送给大家,希望各位喜欢。
- 体验地址:maqi1520.gihttps认证thub.io/react-use-l…
- npm: www.npmjs.com/package/@ma…
- git前端和后端的区别hub: github.com/maqi1520/re…
全文结束女配没有求生欲txt, 记得点赞 . 希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。