前端js腳本與防止js腳本

時間 2019-11-16

原文原文鏈接

前言

身爲一名前端開發工程師，有時候業務場景是沒法用手速模擬的，老司機也有翻車的時候【你懂得】。所以我特地寫這一篇文章，但願可以對你們有所幫助。javascript

涉及到的內容：

1.chrome瀏覽器
2.js代碼
3.函數節流複製代碼

第一步

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

點擊snippets

第二步

如圖所示
java

點擊new snippet -->輸入腳本‘名稱’-->Ctrl+s保存。

第三步

如圖所示
chrome

選擇新建立的腳本‘名稱’，在如圖所示的第二步進行編輯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.腳本代碼bash

/**
* 最簡單的腳本代碼
* 版本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腳本，單純的使用前端技術實際上是有很大的難度！特此獻給那些正在努力學習前端並想在前端的道路上越走越遠的童鞋們。祝福大家。以爲不錯的話就點【❤】哦！高併發

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。