開篇
早上,朋友說淘寶一塊錢搶東西來了,一看還有點新鮮,叫“砍價”,就是用戶用鼠標一刀刀的砍,價錢就一直減,直到減到一元,感覺還比較新鮮,於是想寫個插件還砍他一砍,於是就有了這個插件
本來沒什么可說了,上代碼就完了,但我還是把過程記錄一下吧,分享分享
所用工具:Chrome
砍價地址:http://www.tmall.com
淘寶砍價界面和本插件最終實現的效果
分析實現
首先,找到上圖中幕后指使者,也就是腳本
查看源代碼,慢慢分析,慢慢看,一個個排除,直到look到這一段
進入上面的js腳本一探究竟
是不是看不懂,這明顯經過了壓縮,要想容易理解,最好能恢復壓縮前的樣子,但是我們沒辦法實現這一點,就只能借助工具將格式化一下了
格式化后的代碼片段
是不是要好看多了,接下來對其進行分析,此腳本是基於淘寶的KISSY庫寫的,多看幾遍腳本就可以發現,此腳本注冊了如下幾個模塊
hyp,model,view,ua-helper
hyp主要為模塊入口,負責初始化和調度其他模塊
model為核心模塊
view負責顯示
ua-helper為輔助模塊
在搶票界面上移動鼠標,然后監聽提交地址,再用提交地址去代碼中搜索,便會發現此代碼
它在model模塊內,搜索使用到 i 這個變量的地方便會發現這個函數
分析代碼發現,這正是砍價的核心代碼,blade就是砍的意思,jsonp就是對ajax的封裝,如下:
明白了調用方式,我們只需要調用此函數即可
為了更好的效果,我還發現了
var cx = l.locationToDegree(x1, y1);
o._limitScratch(r, cx);
這兩句是揮動刀的動畫,於是組裝一段代碼將其放入初始化代碼中便得到了如下代碼
寫好代碼,將其封裝成chorme插件
文件:
然后打開chrome設置界面
啟用開發者模式,瀏覽到文件目錄,點擊確定即可(下載的話,需要先解壓)。
使用效果
經過測試,秒殺插件就可以使用了,等待開始后,插件會調用淘寶的腳本自動砍價,砍價間隔默認為250毫秒左邊砍一下,再過250毫秒右邊砍一下,如此往復。
如果你嫌揮刀太慢,不夠勁爆,你可以這樣做
打開TbBlade.js,修改圖中的數值,然后重新加載插件,刷新網頁即可
最新
提示“網絡忙”,“商品到別人碗里去了”之類的遮罩層會被隱藏,不會擋住揮刀動畫了。