今天來個比較潮的,分析一下小米前端js排隊代碼;! 走過路過不要錯過了!
話說小米手機不錯,主要是miui不錯。買個手機天天要搶。其實我是比討厭這種營銷。把手機價格搞的低低的,吸引注意。好長一段時間,你很難搶的到手機。 相比小米,我更喜歡魅族,雖然我用的是小米1s.以后有點閑錢,換手機買一部魅族。
下面來享受這段代碼。 你想做搶購軟件?搶購機器人?先看懂這代碼吧!
10.15號的搶購js代碼,都寫到一個js文件中.里面的代碼是mini版本的,查個工具把他格式化一下就可以了。
http://p.www.xiaomi.com/open/131009/mi3/buy/process.min.js
小米為了增加代碼閱讀的復雜性(也可能為了轉義字符),把一些變量定義成一個數組,而且這個數組用16進制表示。
做過白帽子的,應該很熟悉。用16進制表示字符找出很多xss漏洞,sql注入漏洞吧。可以自己寫(其實alert或console.info
16進制就可以得到字符串)或找個工具轉成字符串,增加代碼的可讀寫性。
好了,下面就來分析代碼了。
以10.15的搶購代碼為例
為了閱讀性我們兩成兩段,一個是他的數組變量_$,另一段是就是其它代碼
_$ 變量太長了,我貼一點點,不完整!

var _$ = ["\x44\x4f\x4d\x43\x6f\x6e\x74\x65\x6e\x74\x4c\x6f\x61\x64\x65\x64", "\x6f\x6e\x72\x65\x61\x64\x79\x73\x74\x61\x74\x65\x63\x68\x61\x6e\x67\x65", "\x44\x4f\x4d\x43\x6f\x6e\x74\x65\x6e\x74\x4c\x6f\x61\x64\x65\x64", "\x6f\x6e\x72\x65\x61\x64\x79\x73\x74\x61\x74\x65\x63\x68\x61\x6e\x67\x65", '\x6c\x65\x66\x74', "\x73\x74\x72\x69\x6e\x67", "\x5b\x6f\x62\x6a\x65\x63\x74\x20\x4f\x62\x6a\x65\x63\x74\x5d", '\x6e\x75\x6d\x62\x65\x72', '\x3d', '\x3b\x20\x65\x78\x70\x69\x72\x65\x73\x3d', '', '\x3b\x20\x70\x61\x74\x68\x3d'];

/** * 代碼作者 小米公司 * 代碼分析者 huangzhir@gmail.com */ //是否回滾狀態 即時間等待是否結束 這個是用來做重新進入活動的狀態 var isRollStatus = false, //是否購買手機 isPhone = false, //是否購買盒子,有時用來做是否購買電視 isBox = false; /** * (function() {})(); 自調匿名函數用法,可以減少局部變量 * 注意,這是m可不是局部變量,雖然定義在自調匿名函數里, * ,因為不是用 var m={};而是用直接 用m={}; * */ (function() { m = { arrelems: [],//元素數組 在js 里用 {} 表示一個對象,用[]表示一個數組 這里這個都沒用到 ready: null, /* * doms 這個方法寫了這么一大堆,一眼看你還看不出這個要做什么, * 如果你看jquery的源碼,肯定很清楚,這個就是Jquery.read() 方法的源代碼 搬過來 * 那為什么要寫這么重新寫,而不用jquery呢,我想是因為這是一個搶購頁面,訪問次數非常的大, * 不去引用jquery,減少頁面的訪問連接數,你看這個頁面的源代碼就知道,css ,javascript 都沒引用其它鏈接。 * 這個頁面的js,也是10.15這次,才寫到一個js文件里,在頁面做引用的。以前也都放在一個頁面里,這樣可以減少服務器的負擔 * 這方面做的比較差或者說很差的就是12306,有用沒用都引用一大堆的 css 和 javascript * 除去這段Jquery.read() 方法的源代碼 代碼,你會發現小米的排隊代碼還是很簡單,很容易的理解的 */ doms: function() { var _this = this;// this 這是指m var isReady = false;// addDOMLoadEvent 是否已經完成,是否准備好 var readyList = [];// 這個用來在存放 addDOMLoadEvent 未完成之時,馬上要執行的方法 var timer; //利用 doScroll() 方法來模擬 addDOMLoadEvent 事件的方案 的timer 臨時定時器 _this.ready = function(fn) { // 設置m.ready 為一個方法 if (isReady) { fn.call(document);//執行 fn方法 相當於 fn(document); } else { readyList.push(function() { //數組新加一個方法 這個方法為調用 fn(this) 反返回值 return fn.call(this); }); }; return this; }; var onDOMReady = function() { // 這樣的寫法相當於 function onDOMReady() 執行 readyListx 方法,然后清空 //執行 readyList 數組里面的所有方法 方法名.call()和 方法名.apply() 作用差不多, call()傳參數是一個人個傳的,apply()是傳一個參數對象數組 for (var i = 0x0; i < readyList.length; i++) { //0x0 是16進制的表示方法 就是0 readyList[i].apply(document) }; readyList = null; }; var bindReady = function(evt) { if (isReady) { return }; isReady = true; onDOMReady.call(window); //觸發所有要要執行的方法 if (document.removeEventListener) { // 非ie 瀏覽器 document.removeEventListener(_$[0], bindReady, false) //_$[0]=DOMContentLoaded ,移除邦定DOMContentLoaded方法 ,DOMContentLoaded 與 onload 有點類似,DOMContentLoaded 僅當DOM加載完成,不包括樣式表,圖片,flash } else if (document.attachEvent) { // ie 瀏覽器 document.detachEvent(_$[1], bindReady); //_$[1]=onreadystatechange; ie的寫法 if (window == window.top) { clearInterval(timer); //清楚定時器 timer = null } } }; if (document.addEventListener) { document.addEventListener(_$[2], bindReady, false) // _$[2]=DOMContentLoaded 添加 DOMContentLoaded 綁定 bindReady 方法 } else if (document.attachEvent) { //_$[3]=onreadystatechange 功能同上 //利用 doScroll() 方法來模擬 addDOMLoadEvent 事件的方案,且現在主流的 JavaScript 框架(JQuery、YUI等)基本都采用的這一解決方案。 document.attachEvent(_$[3], function() { if ((/loaded|complete/).test(document.readyState)) bindReady() }); if (window == window.top) { timer = setInterval(function() { try { isReady || document.documentElement.doScroll(_$[4]) //_$[4]=left } catch (e) { return }; bindReady() }, 0x5) } } }, $: function() { //_$[5]=String 如果方法參數是字符串返回document.getElementById()對像,如果不是返回第1個參數對象 return typeof arguments[0x0] === _$[5] ? document.getElementById(arguments[0x0]) : arguments[0x0] }, extend: function(target, options) { //對象屬性copy for (name in options) { target[name] = options[name] }; return target }, //這個方法是不是也有點似曾相識的感覺,這個方法跟jquery.cookie.js 插件用法,代碼基本也一樣,后面一段實現方式有點不同 cookie: function(key, value, options) { if (arguments.length > 0x1 && String(value) !== _$[6]) { //_$[6]='[object Object]' 如果偉入的參數大於1個,value 不是對象類型 if (value === null || value === undefined) { options.expires = -0x1 }; if (typeof options.expires === _$[7]) { // _$[7]='number' var days = options.expires, t = options.expires = new Date(); t.setDate(t.getDate() + days) }; value = String(value); //_$[8]='=' _$[9]='; expires=' _$[10]='' _$[11]='; path=' _$[12]='' _$[13]='; domain=' $[14]='' $[15]='; secure' $[16]='' $[17]='' // key, value, options 拼接成cookie串, cookie='name=value;name2=value2;name3=value3;...' ; return (document.cookie = [encodeURIComponent(key), _$[8], options.raw ? value : encodeURIComponent(value), options.expires ? _$[9] + options.expires.toUTCString() : _$[10], options.path ? _$[11] + options.path : _$[12], options.domain ? _$[13] + options.domain : _$[14], options.secure ? _$[15] : _$[16]].join(_$[17])) }; //以下是從現有的document.cookie 中取key的value值 // 也就是說如果只有一個參數,如調用 cookie(key) 就從 document.cookie 取 key的value值 // ps:是不是似曾相識,這要買 jquery 里的 val() attr() 方法一樣 options = value || {}; var result, decode = options.raw ? function(s) { return s } : decodeURIComponent; // _$[18]= '(?:^|; )' _$[19]='=([^;]*)' //括號 "( )" 內的子表達式,如果希望匹配結果不進行記錄供以后使用,可以使用 "(?:xxxxx)" 格式 //用 [^ ] 包含一系列字符,則能夠匹配其中字符之外的任意一個字符 // (?:^|;)key=([^;]*) 正則圖形 http://www.regexper.com/#(%3F%3A%5E%7C%3B%20)key%3D(%5B%5E%3B%5D*) // 正則表達式用來"key=keyvalue; name1=value1; name2=value2; name3=value3" 中取出 key=keyvalue // _$[18]= '(?:^|; )' ,在;后面多了個空格,因為cookie的存放方式就是就分號后面有個空格,原來誤解了! // result[0x1] 取的就是value 匹配的第二組 第1組就是key=keyvalue return (result = new RegExp(_$[18] + encodeURIComponent(key) + _$[19]).exec(document.cookie)) ? decode(result[0x1]) : null }, addEvent: (function() { //為參數里的元素增加綁定方法 if (document.addEventListener) { return function(el, type, fn) { el.addEventListener(type, fn, false) } } else { //_$[20]='on' return function(el, type, fn) { el.attachEvent(_$[20] + type, function() { return fn.call(el, window.event) }) } } })(), randomDiff: function(option) { var paras = { randomS: 0x1, randomE: 0x5 }, options = m.extend(paras, option || {}), //把 option copy到 paras //隨機從 randomS 到 randomS 取一個數,這里就是隨機取1-5 randomNum = Math.random() * (options.randomE - options.randomS + 0x1) + options.randomS; return parseInt(randomNum) }, //取url中查詢參數name的value getQueryString: function(name) { //_$[21] ='(^|&)' _$[22]='=([^&]*)(&|$)' _$[23]='i' // (^|&)name=([^&]*)(&|$) 正則圖形 http://www.regexper.com/#(%5E%7C%26)name%3D(%5B%5E%26%5D*)(%26%7C%24) //RegExp 的第二個參數 i 執行對大小寫不敏感的匹配。 g 執行全局匹配(查找所有匹配而非在找到第一個匹配后停止)。 m 執行多行匹配 var reg = new RegExp(_$[21] + name + _$[22], _$[23]); //window.location.search 表示瀏覽器url中 包括?后面的參數 如:?pat=aa&key=value var r = window.location.search.substr(0x1).match(reg); //取出第二組的值,即([^&]*)的值 if (r != null) return unescape(r[0x2]); return null }, // 生成一個js <javascript id="elemid" src="src"/> 播放到body中 // 這個主要是用jsonp 跨域跟服務交互, 小米用這種方式把數據提交到服務器,在服務做排列 creatJs: function(src, elemid) { var Scrip = document.createElement(_$[24]); //_$[24]='script' Scrip.src = src; if ( !! elemid) { Scrip.id = elemid; if (m.$(elemid)) { document.body.removeChild(m.$(elemid)) } }; document.body.appendChild(Scrip) }, //這個表示 如果瀏覽器是手機,跳轉到參數url,如果 orgin='mapp' 就清空 phone: function(url) { url = url || _$[25]; // _$[25]='http://m.xiaomi.com' 這種很經典的寫法,如果url 沒值 取_$[25] 為默認值 //如果 cookie 中 orgin 的值為 mapp ,就設置orgin 為空 if (m.cookie(_$[26]) === _$[27]) { // _$[26]='orgin' _$[27]='mapp' m.cookie(_$[28], null, { //_$[28]='orgin' path: _$[29], //_$[29]='/' domain: _$[30] //_$[30]='.xiaomi.com' }); return }; var sUserAgent = navigator.userAgent; // $[31]= 'Android', $[32]= 'iPhone', $[33]='iPod', $[34]= 'Symbian' // 如果瀏覽器是移動設備,跳轉到url if (sUserAgent.indexOf(_$[31]) > -0x1 || sUserAgent.indexOf(_$[32]) > -0x1 || sUserAgent.indexOf(_$[33]) > -0x1 || sUserAgent.indexOf(_$[34]) > -0x1) { location.href = url } }, //初始化方法 init: function() { var _this = this; _this.doms() } }; m.init() })(); //jsonp的回調函數 json為服務端返回的數據 function hdcontrol(json) { var phonestart = json.status.miphone.hdstart, //是否手機搶購開始 phonestop = json.status.miphone.hdstop, //是否手機搶購結束 boxstart = json.status.mibox.hdstart, //是否盒子搶購開始 boxstop = json.status.mibox.hdstop; //是否盒子搶購結束 servertime = downServertime = json.stime; //服務端與客戶端的時差 var diffTime = parseInt(servertime - miphoneBuy.localTime()); //_$[35]='xm_difft_hd' _$[36]='/' _$[37]='.xiaomi.com' 寫入xm_difft_hd=時差 到cookie中 m.cookie(_$[35], diffTime, { path: _$[36], domain: _$[37], expires: 0x1 //一天后過期 }); //如果等待已經結束 if (isRollStatus) { if (json.status.allow) { //排隊成功,服務端返回排隊成功,這個真的太幸福,你基本搶到了!跳轉到那個購買頁面,選擇一下產品和驗證碼提交就ok了 if (isPhone === true) { //買手機 isPhone === false; //還是一個bug,我認為,這里應該用 isPhone=false; 不過這里也沒什么關系 ps:小米程序員也是人,雖然 6X12 工作,但偶而也會筆誤 ,哈哈 //_$[38]='' _$[39]='http://t.hd.xiaomi.com/s/' if (json.status.miphone.hdurl == null || json.status.miphone.hdurl == _$[38]) { //如果 hdurl為空,重新刷新頁面 window.location.reload() } else { //_$[39]='http://t.hd.xiaomi.com/s/' //瀏覽器url 轉向到購買小米頁面 //注意如果真訪問這個url是沒用的,系統會自動跳轉到排序頁面,只有排列成功才能進入這個頁面 ps:小米人家也不是吃素的, location.href = _$[39] + json.status.miphone.hdurl } } else if (isBox === true) { //買盒子,或電視,其它第二選項 isBox === false; //同上 ////_$[40]='' _$[41]='http://t.hd.xiaomi.com/s' if (json.status.mibox.hdurl == _$[40] || json.status.mibox.hdurl == null) { window.location.reload() } else { location.href = _$[41] + json.status.mibox.hdurl } } }; isRollStatus = false }; //只有手機搶購 寫入cookie if (phonestart === true && phonestop === false && boxstart === false && boxstop === true) { // 盒子已售完 'xm_xt_obox',//42 '/',//43 '.xiaomi.com',//44 m.cookie(_$[42], 0x1, { path: _$[43], domain: _$[44], expires: 0x1 }); //'xm_xt_ophone',//45 '/',//46 '.xiaomi.com',//47 m.cookie(_$[45], null, { path: _$[46], domain: _$[47] }); miphoneBuy.box(false); stepHtml.five() }; //只有盒子搶購 if (phonestart === false && phonestop === true && boxstart === true && boxstop === false) { //手機已售完 'xm_xt_ophone',//48 '/',//49 '.xiaomi.com',//50 m.cookie(_$[48], 0x1, { path: _$[49], domain: _$[50], expires: 0x1 }); //'xm_xt_obox',//51 '/',//52 '.xiaomi.com',//53 m.cookie(_$[51], null, { path: _$[52], domain: _$[53] }); miphoneBuy.box(false); stepHtml.six() }; //手機,盒子 都沒了 if (phonestart === false && phonestop === true && boxstart === false && boxstop === true) { // 'xm_xt_pre',//54 '/',//55 '.xiaomi.com',//56 m.cookie(_$[54], 0x1, { path: _$[55], domain: _$[56], expires: 0x1 }); // 'xm_xt_obox',//57 '/',//58 '.xiaomi.com',//59 m.cookie(_$[57], null, { path: _$[58], domain: _$[59] }); // 'xm_xt_ophone',//60 '/',//61 '.xiaomi.com',//62 m.cookie(_$[60], null, { path: _$[61], domain: _$[62] }); miphoneBuy.saleOut() } }; var miphoneBuy = { localTime: function() { //本地時間 return parseInt(new Date().getTime() / 0x3e8) //0x3e8 是16進制 表示10進行的1000 }, jsonInter: function() { //利用jsonp 調用服務端 這個除了排隊處,還用來做時差,還做手機和盒子搶購的狀態 var timestamp = new Date().getTime(); //'http://tc.hd.xiaomi.com/hdget?callback=hdcontrol&_=',//63 這個地址就是服務排列的url // 'jsonp' //64 m.creatJs(_$[63] + timestamp, _$[64]); }, checkCookie: function() { var _this = this; // 'xm_xt_pre',//65 如果有值,說明小米和盒子已經出售完 if (m.cookie(_$[65])) { _this.saleOut() } else { // 'xm_difft_hd',//66 if (!m.cookie(_$[66])) { //如果cookie 中 xm_difft_hd 沒有值,就提交服務端,取時間或者排隊 _this.jsonInter() }; setTimeout(function() { // 'xm_difft_hd',//67 服務器時間=本地時間+時差 servertime = downServertime = miphoneBuy.localTime() + parseInt(m.cookie(_$[67])); _this.jugeStatus() }, 0x64) //0x64 就是100 } }, saleOut: function() { if (window.timeInter) { clearInterval(timeInter) }; stepHtml.four(); miphoneBuy.box(false) }, jugeStatus: function() { //狀態判斷 ,定時器每秒查一下狀態 var _this = this; _this.timeNode(); timeInter = window.setInterval(function() { _this.timeNode(); servertime++ }, 0x3e8) // 0x3e8 =1000 每秒執行一次 }, configs: { // '10/15/2013 12:00:00',//68 開搶的開始時間 startDate: new Date(_$[68]).getTime(), preLogMin: 0x1e // 0x1e=30 }, timeNode: function() { //時間結點 ,根據本地的服務器時間,判斷現在處於哪一步,然后執行哪一步 var _this = this; var _this = this; var nowTime = servertime * 0x3e8, //服務器的當前時間 startTime = _this.configs.startDate, //開始倒計時時間 preLogTime = startTime - _this.configs.preLogMin * 0xea60; // 0xea60 =60000 if (m.cookie(_$[69])) { // 全部都售完 'xm_xt_pre',//69 _this.saleOut(); return }; if (m.cookie(_$[70])) { //如果有時差,'xm_difft_hd',//70 'xm_difft_hd',//71 //服務器的時間 =本地時間+ 時間差 ,倒計時都是用服務器時間 downServertime = miphoneBuy.localTime() + parseInt(m.cookie(_$[71])) }; if (nowTime < preLogTime) { //進入倒計時,還沒即將開始,暫時可以不用登錄 stepHtml.one(); _this.timeOut() } else if (nowTime >= preLogTime && nowTime < startTime) { //已經進入倒計時,即將開始,但還沒開始 stepHtml.two(); _this.timeOut() } else if (nowTime >= startTime) { //已經開始搶購 if (m.cookie(_$[72])) { // 盒子已售完 'xm_xt_obox',//72 stepHtml.five() } else if (m.cookie(_$[73])) { //手機已售完 'xm_xt_ophone',//73 stepHtml.six() } else { //盒子和手機都還有 stepHtml.three() } } }, timeOut: function() { //如果有倒計時間,重新觸發倒計時 var _this = this; _this.SetRemainTime(); if (window.InterValObj) { clearInterval(InterValObj) }; // InterValObj 表示離開始搶購的趕時間倒計時定時器 InterValObj = window.setInterval(function() { _this.SetRemainTime() }, 0x3e8) }, SetRemainTime: function() { //倒計時,設置倒計時時間 var _this = this, endtime = _this.configs.startDate, setEndtime = endtime / 0x3e8; surplusTime = setEndtime - downServertime; if (surplusTime >= 0x0) { //還在倒計 var second = Math.floor(surplusTime % 0x3c), //分鍾 minite = Math.floor((surplusTime / 0x3c) % 0x3c), //秒 hour = Math.floor((surplusTime / 0xe10) % 0x18), //小時 day = Math.floor((surplusTime / 0x15180) % 0x1e); //天 downServertime++; var timeArray = [second.toString(), minite.toString(), hour.toString(), day.toString()]; // '<span><ins>',//74 '</ins>小時<ins>',//75 '</ins>分<ins>',//76 '</ins></span>秒后開始',//77 var timeText = _$[74] + timeArray[0x2] + _$[75] + timeArray[0x1] + _$[76] + timeArray[0x0] + _$[77]; if (hour === 0x0) { //小時等於0 只要展示分鍾和秒鍾 // '<span><ins>',//78 '</ins>分<ins>',//79 '</ins></span>秒后開始',//80 timeText = _$[78] + timeArray[0x1] + _$[79] + timeArray[0x0] + _$[80]; if (minite === 0x0) { //如果不到一分,只民法秒鍾 //'<span><ins>',//81 '</ins></span>秒后開始',//82 timeText = _$[81] + timeArray[0x0] + _$[82] } }; //'surTime',//83 'surTime',//84 // !!對象 對象是否存在的用法 時間結點變化成新的倒計時間 if ( !! m.$(_$[83])) { m.$(_$[84]).innerHTML = timeText } } else { //停止倒計時 if (window.InterValObj) { clearInterval(InterValObj) } } }, box: function(bool) { if (bool) { //顯示 正在排序中 div //<div id="boxbg"></div><div id="box"><span class="close" onclick="miphoneBuy.box(false);" title="關閉">X</span><div class="buyNext_wrap"><h3>正在排隊中...</h3>您已在隊伍中,倒計時后請重新進入,稍安勿躁:-)<a id="reback" class="reback_btn">重新進入(<span id="initCount"> </span>)</a></div></div> //'boxbg',//85 'box',//86 var mboxbg = m.$(_$[85]); //排隊div bg var mbox = m.$(_$[86]); //排隊div // 'px',//87 mboxbg.style.height = Math.max(document.documentElement.clientHeight, document.documentElement.scrollHeight) + _$[87]; // 'block',//88 'block',//89 mboxbg.style.display = _$[88]; mbox.style.display = _$[89] } else { //隱藏 正在排序中 div // 'boxbg',//90 'box',//91 'none',//92 'none',//93 var mboxbg = m.$(_$[90]); var mbox = m.$(_$[91]); mboxbg.style.display = _$[92]; mbox.style.display = _$[93]; if (window.rollInter) { clearInterval(rollInter) //清楚 排除等待 }; Util.retime(); // 'reback',//94 '重新進入(<span id='initCount'>',//95 '</span>)',//96 m.$(_$[94]).innerHTML = _$[95] + count + _$[96] } }, init: function(option) { var _this = this; _this.checkCookie() } }; var stepHtml = { one: function() { //第一步 倒計時 即將開始, var mhtml = stepHtml.htmlString(); // 'hdBtns',//97 'hdSubTitle',//98 'hdLnks',//99 'miphone',//100 'mitv',//101 'hdMsg',//102 m.$(_$[97]).innerHTML = mhtml.btn[0x0]; m.$(_$[98]).innerHTML = mhtml.subTitle[0x0]; m.$(_$[99]).innerHTML = mhtml.lnks[0x0]; m.$(_$[100]).innerHTML = mhtml.phonebtn[0x0]; m.$(_$[101]).innerHTML = mhtml.tvbtn[0x0]; m.$(_$[102]).innerHTML = mhtml.msg[0x0]; m.$(_$[103]).innerHTML = mhtml.bottombtn[0x0] }, two: function() { //第二步,倒計時 ,離只有不到preLogMin(30)分),與第一步步有點不同,就是如果你還沒登錄,讓你提前登錄 var mhtml = stepHtml.htmlString(); var miID = (m.cookie(_$[104])); // 'userId',//104 if (miID) { m.$(_$[105]).innerHTML = mhtml.btn[0x0] // 'hdBtns',//105 倒計時 } else { m.$(_$[106]).innerHTML = mhtml.btn[0x1] // 'hdBtns',//106 提前登錄 }; //'hdLnks',//107 'hdSubTitle',//108 'miphone',//109 'mitv',//110 'hdMsg',//111 'bottombtn',//112 m.$(_$[107]).innerHTML = mhtml.lnks[0x0]; m.$(_$[108]).innerHTML = mhtml.subTitle[0x0]; m.$(_$[109]).innerHTML = mhtml.phonebtn[0x0]; m.$(_$[110]).innerHTML = mhtml.tvbtn[0x0]; m.$(_$[111]).innerHTML = mhtml.msg[0x0]; m.$(_$[112]).innerHTML = mhtml.bottombtn[0x0] }, three: function() { //第三步,開始搶,兩個都還有 var mhtml = stepHtml.htmlString(); // 'hdBtns',//113 'hdSubTitle',//114 'miphone',//115 'mitv',//116 'hdMsg',//117 'hdLnks',//118 'bottombtn',//119 m.$(_$[113]).innerHTML = mhtml.btn[0x2]; m.$(_$[114]).innerHTML = mhtml.subTitle[0x0]; m.$(_$[115]).innerHTML = mhtml.phonebtn[0x1]; m.$(_$[116]).innerHTML = mhtml.tvbtn[0x1]; m.$(_$[117]).innerHTML = mhtml.msg[0x4]; m.$(_$[118]).innerHTML = mhtml.lnks[0x0]; m.$(_$[119]).innerHTML = mhtml.bottombtn[0x1] }, four: function() { //第四步 ,支付 //'hdBtns',//120 'miphone',//121 'mitv',//122 'hdSubTitle',//123 'hdMsg',//124 'hdLnks',//125 'bottombtn',//126 var mhtml = stepHtml.htmlString(); m.$(_$[120]).innerHTML = mhtml.btn[0x3]; m.$(_$[121]).innerHTML = mhtml.phonebtn[0x2]; m.$(_$[122]).innerHTML = mhtml.tvbtn[0x2]; m.$(_$[123]).innerHTML = mhtml.subTitle[0x3]; m.$(_$[124]).innerHTML = mhtml.msg[0x3]; m.$(_$[125]).innerHTML = mhtml.lnks[0x3]; m.$(_$[126]).innerHTML = mhtml.bottombtn[0x2] }, five: function() { //第五步, 小米電視或盒子已售罄,但還有小米手機 //'hdBtns',//127 'miphone',//128 'hdSubTitle',//129 'mitv',//130 'hdMsg',//131 'hdLnks',//132 'bottombtn',//133 var mhtml = stepHtml.htmlString(); m.$(_$[127]).innerHTML = mhtml.btn[0x4]; m.$(_$[128]).innerHTML = mhtml.phonebtn[0x1]; m.$(_$[129]).innerHTML = mhtml.subTitle[0x2]; m.$(_$[130]).innerHTML = mhtml.tvbtn[0x2]; m.$(_$[131]).innerHTML = mhtml.msg[0x1]; m.$(_$[132]).innerHTML = mhtml.lnks[0x1]; m.$(_$[133]).innerHTML = mhtml.bottombtn[0x1] }, six: function() { //第六部, 小米手機已售罄,但還有小米電視或盒子 //'hdBtns',//134 'miphone',//135 'hdSubTitle',//136 'mitv',//137 'hdMsg',//138 'hdLnks',//139 'bottombtn',//140 var mhtml = stepHtml.htmlString(); m.$(_$[134]).innerHTML = mhtml.btn[0x5]; m.$(_$[135]).innerHTML = mhtml.phonebtn[0x2]; m.$(_$[136]).innerHTML = mhtml.subTitle[0x1]; m.$(_$[137]).innerHTML = mhtml.tvbtn[0x1]; m.$(_$[138]).innerHTML = mhtml.msg[0x2]; m.$(_$[139]).innerHTML = mhtml.lnks[0x2]; m.$(_$[140]).innerHTML = mhtml.bottombtn[0x2] }, htmlString: function() { var htmlSum = { //'<span class="untime"><label id="surTime" class="unbtn"></label></span>',//141 //'<a class="unbtn" target="_blank" href="http://p.www.xiaomi.com/zt/xm_account/limitfacade.html?third=http%253A%252F…MmRiNzY0ZWY0MDJlYTVkODBlZA%252C%252C&sign=3C15pt35v9KK5SR8saFsKQ89uRo%253D" title="提前登錄" >提前登錄</a>',//142 //'<a class="btn1 cu" onclick="showBox(\'phone\');" id="buyNext">購買手機>><span class="value">1999元</span></a><span class="line">|</span><a class="btn2 cu" onclick="showBox('box');" title="購買盒子">購買電視>><span class="value">2999元</span></a>',//143 //'<a class="btn1 cu" href="http://t.hd.xiaomi.com/r/?_a=payment_check" target="_blank"><span class="value">1999元</span>支付手機>></a><span class="line">|</span><a class="btn2 cu" href="http://t.hd.xiaomi.com/r/?_a=payment_check_tv" target="_blank">支付電視>><span class="value">2999元</span></a>',//144 //'<a class="btn1 cu" onclick="showBox(\'phone\');">購買手機>><span class="value">1999元</span></a><span class="line">|</span></a><a class="btn2 cu" href="http://t.hd.xiaomi.com/r/?_a=payment_check_tv" target="_blank">支付電視>><span class="value">2999元</span></a>',//145 //'<a class="btn1 cu" onclick="showBox(\'box\');">購買電視>><span class="value">2999元</span></a><span class="line">|</span><a class="btn2 cu" href="http://t.hd.xiaomi.com/r/?_a=payment_check" target="_blank">支付手機>><span class="value">1999元</span></a>',//146 btn: [_$[141], _$[142], _$[143], _$[144], _$[145], _$[146]], //'',//147 //'小米手機3已售罄,您可繼續購買小米電視',//148 //'小米電視已售罄,您可繼續購買小米手機3',//149 //'全部小米手機3及小米電視已售罄',//150 subTitle: [_$[147], _$[148], _$[149], _$[150], ], //'',//151 //'購機成功用戶請在3小時內下單,3小時內支付。[url=http://t.hd.xiaomi.com/r/?_a=payment_check ]支付手機》[/url]',//152 //'購機成功用戶請在3小時內下單,3小時內支付。[url=http://t.hd.xiaomi.com/r/?_a=payment_check_tv]支付電視》[/url]',//153 //'購機成功用戶請在3小時內下單,3小時內支付。',//154 //'購機成功用戶請在3小時內下單,3小時內支付。[url=http://t.hd.xiaomi.com/r/?_a=payment_check ]支付手機》[/url][url=http://t.hd.xiaomi.com/r/?_a=payment_check_tv]支付電視》[/url]',//155 msg: [_$[151], _$[152], _$[153], _$[154], _$[155]], //'[url=http://t.hd.xiaomi.com/r/?_a=20131009&_op=check]手機預約查詢[/url][url=http://t.hd.xiaomi.com/r/?_a=20131009_tv&_op=check]電視預約查詢[/url]',//156 //'[url=http://t.hd.xiaomi.com/r/?_a=20131009&_op=check]手機預約查詢[/url][url= http://t.hd.xiaomi.com/c/?_a=20131015_mi_tv_3a52v09cc&_op=check]電視購買查詢[/url]',//157 //'[url=http://t.hd.xiaomi.com/c/?_a=20131015_m3_7e52109fc&_op=check]手機購買查詢[/url][url=http://t.hd.xiaomi.com/r/?_a=20131009_tv&_op=check]電視預約查詢[/url]',//158 //'[url=http://t.hd.xiaomi.com/c/?_a=20131015_m3_7e52109fc&_op=check]手機購買查詢[/url][url= http://t.hd.xiaomi.com/c/?_a=20131015_mi_tv_3a52v09cc&_op=check]電視購買查詢[/url]',//159 //' ',//160 lnks: [_$[156], _$[157], _$[158], _$[159], _$[160], ], //'<a class="btn de"><span>1999元(16GB)</span>即將開始</a>',//161 //'<a id="hdredPhone" onClick="showBox(\'phone\');" class="btn cu"><span>1999元(16GB)</span>立即購買</a>',//162 //'<a class="btn" href="http://t.hd.xiaomi.com?_a=payment_check " target="_blank"><span>1999元(16GB)</span>立即支付</a>',//163 phonebtn: [_$[161], _$[162], _$[163]], //'<a class="btn de"><span>2999元</span>即將開始</a>',//164 //'<a onClick="showBox(\'box\');" class="btn cu"><span>2999元</span>立即購買</a>',//165 //'<a class="btn" href="http://t.hd.xiaomi.com/r/?_a=payment_check_tv" target="_blank"><span>2999元</span>立即支付</a>',//166 tvbtn: [_$[164], _$[165], _$[166]], //'<label class="btn unbtn">即將開始</label>',//167 //'<a id="hdblackPhone" onClick="showBox(\'phone\');" class="btn cu">購買手機</a>',//168 //'<a class="btn cu" href="http://t.hd.xiaomi.com/r/?_a=payment_check " target="_blank">支付手機</a>',//169 bottombtn: [_$[167], _$[168], _$[169]] }; return htmlSum } }; var randomCount = parseInt(Math.random() * (0xa - 0x5 + 0x1) + 0x5), //隨機取5 到 11 中的整數 count = randomCount, CONFIG = { count: randomCount }, Util = { time: function() { // 進入活動(排列)時間倒計 var b = m.$(_$[170]); // 'reback',//170 if (count === 0x0) { //如果倒計時時間為0 b.innerHTML = _$[171]; // '進入活動',//171 b.className = _$[172]; // 'reback_btn_next',//172 this.start(); return false }; count = count - 0x1; b.innerHTML = _$[173] + count + _$[174]//'重新進入(<span id=\'initCount\'>',//173 '</span>)',//174 }, start: function() { //進入活動(開始排列搶購) var me = this, reback = m.$(_$[175]); // 'reback',//175 reback.onclick = function() { //點擊進入活動按鈕, isRollStatus = true; miphoneBuy.jsonInter(); //提交服務端排隊 me.retime(); reback.onclick = null; return false } }, retime: function() { //重新計時 count時間重新設 m.$(_$[176]).className = _$[177]; //'reback',//176 'reback_btn',//17 count = CONFIG.count } }; var loginInfo = { data: { userId: 0x0, userName: _$[178] //'',//178 }, init: function() { this.data.userId = m.cookie(_$[179]); // 'userId',//179 從cookie中取userid if (!this.data.userId) return false; //沒取到,直接返回 //'XM_',//180 '_UN',//181 '',//182 this.data.userName = (this.data.userId) ? m.cookie(_$[180] + this.data.userId + _$[181]) : _$[182]; // '',//183 如果有用戶id,沒用用戶名,通過jsonp 取用戶信息,回調 loginInfo.getAccountInfo 方法 if (this.data.userName == null || this.data.userName == _$[183]) { var script = document.createElement(_$[184]); // 'script',//184 //'https://account.xiaomi.com/pass/userInfoJsonP?userId=',//185 '&callback=loginInfo.getAccountInfo',//186 script.src = _$[185] + this.data.userId + _$[186]; script.type = _$[187]; //'text/javascript',//187 script.async = true; //異步 document.getElementsByTagName(_$[188])[0x0].appendChild(script) // 'head',//188 } else { this.upUserInfo() } }, upUserInfo: function() { var nickName = this.data.userName; if ( !! m.$(_$[189])) { // 'LoginArea',//189 //'LoginArea',//190 '歡迎您 ',//191 '!<a href=\'http://order.xiaomi.com/site/logout\'>退出</a>',//192 m.$(_$[190]).innerHTML = _$[191] + nickName + _$[192]; //'LoginArea',//193 '12px',//194 m.$(_$[193]).style.paddingLeft = _$[194] } }, getAccountInfo: function(data) { if (data.userId) { this.data.userName = (data.uniqName) ? data.uniqName : data.userId; var option = { path: _$[195], // '/',//195 domain: _$[196] //'.xiaomi.com',//196 }; //'XM_',//197 '_UN',//198 m.cookie(_$[197] + this.data.userId + _$[198], this.data.userName, option); this.upUserInfo() } } }; function showBox(gtype) { //彈出人太多了div gtype 什是手機還是盒子 if (m.cookie(_$[199])) { // 'userId',//199 if (gtype === _$[200]) { // 'phone',//200 isPhone = true } else if (gtype === _$[201]) { // 'box',//201 isBox = true }; miphoneBuy.box(true); m.$(_$[202]).innerHTML = CONFIG.count; // 'initCount',//202 //重新進入活動定時器 rollInter = window.setInterval(_$[203], 0x3e8) // 'Util.time()',//203 } else { location.href = _$[204] //'http://p.www.xiaomi.com/zt/xm_account/limitfacade.html?third=http%253A%252F…0ZWY0MDJlYTVkODBlZA%252C%252C&sign=3C15pt35v9KK5SR8saFsKQ89uRo%253D',//204 } }; m.ready(function() { m.phone(_$[205]); // 如果是手機瀏覽器,跳轉到參數的url 'http://p.www.xiaomi.com/m/zt/open/index.html'//205 miphoneBuy.init(); loginInfo.init() })
這段代碼除了m.doms的方法之外,其它都還比較簡單。讓我還沒開始享受就完了。也讓我成了標題黨。
總結一下這段代碼的意思。
先看一下,10.15,排列的url(其中1382068597029表示當前時間的getTime()值)
http://tc.hd.xiaomi.com/hdget?callback=hdcontrol&_=1382068597029
返回值

hdcontrol({"stime":1382068631,"status":{"allow":false,"miphone":{"hdstart":false,"hdstop":false,"hdurl":"","duration":null},"mibox":{"hdstart":false,"hdstop":false,"hdurl":"","duration":null}}})
這段代碼只是搶購js的前端排隊代碼,真正的排除代碼當然是放在后台的服務器上了。也就是說,你完全知道這段代碼,對你搶購也沒太大的幫助。如果排隊沒成功(json.status.allow=false),直接訪問購買的頁面,服務端會讓你跳轉到排隊頁面。
那服務端的排列規則,只小米自己知道。有時可能公平,也可能不公平(也人說他是直接標志的,我覺得這個可能性比較低)。
以10.15這次搶購為例子,可以肯定小米給每個帳號的概率肯定是不一樣的。我想這樣做的目的只防止黃牛,減少不滿。但很多時候也會誤傷。如果黃牛的特點跟普通用戶一樣,或者普通用戶也當小黃牛。這時誤傷的概率就比較大了。這個要靠小米的后台分析能力了。他們最好的辦法就是增加供給。
扯遠了,又跑題了。這段代碼,進入頁面ready
后就執行miphoneBuy.init方法,方法里面里的checkCookie,如果第一次登錄,調用就取一下miphoneBuy.jsonInter()服務器的時間。然后啟動定時器,每秒鍾執行一次,查看現在的狀態,根據服務器的時間與開始搶的時間(如果已經開始搶購了,還要根據cookie中手機和盒子是否已經saleout
,這個cookie是由調用miphoneBuy.jsonInter()后,服務器的返回值
json.status.miphone.hdstart,json.status.miphone.hdstop,
json.status.mibox.hdstart, json.status.mibox.hdstop;決定寫入的,判斷出展示
stepHtml的哪一步的方法。共6步,代表意思見代碼注解。
當倒計時完成,開始搶購時,展示第三步(展示購買按鈕),點擊購買手機,或盒子(TV),發現頁面沒用直接調用服務端排列。
而是var randomCount
= parseInt(Math.random() * (0xa - 0x5 + 0x1) + 0x5), //隨機取5 到 11
中的整數。隨機取5-11秒,讓頁面再次等待5-11秒,才提交服務端排隊。如果沒排上又是等第一次取的randomCount秒。
那了解這段代碼,我們能做些什么。可以在控制台上輸入。
isPhone = true;
//或者isBox=true;
isRollStatus = true;
miphoneBuy.jsonInter(); //提交服務端排隊
跳過頁面等待,直接提交服務端排隊
或者把等待進入活動的等待時間修改成更小的值如
count=0;CONFIG.count=0;
或者寫個程序,登錄后,保持sesion,直接訪問排除url,返回成功直接進入購買頁面。
那這樣我們這樣有沒有作用呢?
這取決於服務端的規則。
1,如果服務端完全公平,都不考慮黃牛,不考慮你調用次數,這個代碼很有作用。這以現在情況我覺得不太可能
2,如果服務端,有做防止黃牛情況,而且根據不同的帳號給不同的概率,而且還做了防頻繁提交。
那我們的代碼只能設計成count=5;CONFIG.count=5;但作用有只有一點點點。
如果我是開發者,這種情況比可能性最大
3,如果服務端,是直接分配好了,打標志。那我們代碼根據沒作用。我覺得這個不太可能。
以上純屬理論分析。