前端js指令碼與防止js指令碼

小小坤發表於2017-11-27
前端JS指令碼

前言

身為一名前端開發工程師，有時候業務場景是無法用手速模擬的，老司機也有翻車的時候【你懂得】。因此我特意寫這一篇文章，希望能夠對大家有所幫助。

涉及到的內容：

1.chrome瀏覽器
2.js程式碼
3.函式節流複製程式碼

第一步

開啟chrome瀏覽器，使用組合鍵Ctrl+shift+i開啟開發者工具，接下來如圖所示。


點選snippets

第二步

如圖所示


點選new snippet -->輸入指令碼‘名稱’-->Ctrl+s儲存。

第三步

如圖所示


選擇新建立的指令碼‘名稱’，在如圖所示的第二步進行編輯js程式碼。最後如第三步所示：run 執行程式碼。

js指令碼程式碼

1.以下是網站上的程式碼：

<body>
        <div class="box">
            <img class="img" src="image/pict.png" />
            <button class="btn" id='btn'>搶購</button>
        </div>
        <script type="text/javascript">
            /**
             * 搶購按鈕
             * 
             * */
            btn.onclick=function(){
                console.log('搶購成功！');
            };
        </script>
    </body>複製程式碼

每次點選搶購 控制檯輸出 搶購成功！
2.指令碼程式碼

/**
* 最簡單的指令碼程式碼
* 版本1.0.1
*/
btn.click();//觸發按鈕執行click事件

/**
 * 使用for迴圈執行搶購的指令碼程式碼
 * 版本1.0.2
 * */
for(var i=0;i<100;i++){
    btn.click();
}複製程式碼

通過上邊的指令碼js程式碼可以知道，我們可以在chrome瀏覽器內建指令碼，並控制執行。


當開發人員模擬真實環境的高併發情況，我們們就可以使用這種指令碼的方式模擬測試。通過剛剛的指令碼我們發現我們開發的頁面中的js是有很多問題的。假設【搶購按鈕】觸發的是請求資料介面。則會出現在一個時間內發出n個請求。處理這個問題可以參考juejin.im/post/59bf6b…
也可以使用函式節流方式處理。如下程式碼：

//網站上寫的程式碼
/**
 * 搶購按鈕
 * 
 * */
btn.onclick=function(){
     throttle(function(){
        console.log('搶購成功！');
    },500);
};
/**
 * 函式節流
 * @fn {function} 回撥函式
 * @time {number} 時間，毫秒
 * 
 * */
function throttle(fn,time){
    if(throttle.id){
        clearTimeout(throttle.id);
    };
    throttle.id=setTimeout(function(){
        fn();
    },time||200);
}複製程式碼

通過以上方式我們可以過濾掉惡意迴圈觸發事件。這種函式節流方式也得到大家的一致認可與推廣。

總結

通過上述方式，我們不僅學會了製做簡單的js指令碼，也學到一種簡單的阻止js指令碼的方法。想要真正的寫一些有用的js指令碼還需要你們自己努力哦！想要正在遮蔽掉惡意的js指令碼，單純的使用前端技術其實是有很大的難度！特此獻給那些正在努力學習前端並想在前端的道路上越走越遠的童鞋們。祝福你們。覺得不錯的話就點【❤】哦！

相關文章