1.开始
最近接到这样一个需求,一个点击按钮,按照概率分配不同的链接。也就说点击同一个按钮,举个例子:50%的概率跳转到百度,30%概率跳到谷歌,20%概率跳到天猫。归根到底,这其实是一个权重分配的问题。大的思路是先解决概率分配,然后动态赋值跳转。
2.html页面
<a href="javascript:;" id="applyBtn">按流量跳转</a>
3.js页面
$(function() {
var page = {
init: function() {
this.bindEvent();
},
bindEvent: function() {
var self = this;
//页面加载时获取链接列表,并把按钮的data-link属性赋值
this.gentList();
//按钮点击时直接获取data-link跳转(权重已在内)
$(document).on('tap', '#applyBtn', async function() {
linkUrl = $(this).data("link");
location.href = linkUrl;
});
},
getList: function(tag) {
//获取所需分配的链接地址对象集合(一个接口的事,这里我就不多说了),得到后首先需调用getRandomItem()方法分配权限,然后在getRandomItem()里用renderItem()给按钮a标签赋值自定义属性link
},
//这是一个权重分配的方法,list是一个数组对象即各个链接的值,需要按需求从接口获取或写死也行
getRandomItem: function(list) {
var self = this;
var list = Array.prototype.splice.call(list, 0, 5);
//概率分配75%,10%,5%,5%,5%,条数,概率可以根据需求改变,对应列表数量,但请注意!!!这个概率的位置严格对应所得的list即链接列表的顺序,否则会改变。(很重要)
var probs = [75, 10, 5, 5, 5];
var sum = 0;
var factor = 0;
var random = Math.random();
for(var i = probs.length - 1; i >= 0; i--) {
sum += probs[i]; // 统计概率总和
};
random *= sum; // 生成概率随机数
for ( var i = probs.length - 1; i >= 0; i--) {
factor += probs[i];
if(random <= factor) {
return self.renderItem(list[i]);
}
}
},
//赋值自定义属性link,这里的obj就是getList()方法(一般是调用接口)得到的链接列表的返回值
renderItem: function(obj) {
var self = this;
//赋值自定义属性data-link
$('#applyBtn').data('link', obj)
}
};
page.init();
});
4.最后
其实在真正的业务中,如果有权限分配,肯定会有其它的参数在返回的列表里,例如链接名称,链接编号等,这里我做了省略,具体的还请根据需求。当然我这里只是班门弄斧,业务里有几个潜在问题,例如概率顺序必须一致我就没解决,但需求要求并没有那么细致,也请大家谅解。话说,我也想早下班,哈哈哈哈哈哈。好了,不说了,朋友又催我打王者荣耀啦。