HB法币交易头像实现

法币交易头像实现"/>

HB法币交易头像实现

正巧最近我在做OTC 项目，我就肯定要看一下龙头大哥，hb的做法呀，简单页面如下

1. 一开始我想到的用户头像是根据随机数来实现的，然后我就稀里糊涂的写了一个随机数实现背景颜色，代码如下

/*- 背景颜色随机
*/function randomBackground(){var r = Math.floor( Math.random()*256);var b = Math.floor( Math.random()*256);var g = Math.floor( Math.random()*256);return "rgb("+r+","+g+","+b+")";}

• 然后我就按照我思路走了一半，我发现我走错了，因为这个页面需要一直更新，导致，数据可能没变化，但是头像，一直在变，一直在变，搞得我很懵逼，然后我就好奇，HB 到底是根据怎么判断每个人的头像的，而且，刷新了还头像都不会变化，所以我现在我就把我一开始的想法推翻了，因为他这个肯定不是写的随机数，肯定是有其他办法，当时我有2个问题。如下
• 他是怎么实现每个头像不一样的？
• 他是如何判断每次刷新头像还是上一次一样的？

然后我就打开了他的源码查看，嘿嘿，不看不知道，一看吓一跳，我就简单的看了一下服务器返回的源码，因为这个是webpack 打包后的，不是很容易看代码，所以我只能大概猜测，然后终于把大概代码都看了一遍，找到了几个关键词

• ColorId

• 取余（除模）%

• 解释一下，为啥，打开Network，找到app.js 文件，全局搜索一下colorId然后你就能看见一串这样的代码
  

• 这个代码有什么用了，用处就大了，根据uid %10 去取余数，然后得到的应该是0-9 的数字，然后就会写0-9分别代表的背景颜色，

• 我相信到这里，很多人都明白了吧，因为订单中的uid 是不会变得，所以，每次除模得到相应的数字去寻找对应的id ，就能追加对应的头像

• 
  其实很简单，只是有些时候真的没想到那么多，果然是龙头大哥，果然nb，学习到了