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，學習到了