前端js脚本与防止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个请求。处理这个问题可以参考防止重复提交
也可以使用函数节流方式处理。如下代码:

//网站上写的代码
/**
 * 抢购按钮
 *
 * */
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脚本,单纯的使用前端技术其实是有很大的难度!特此献给那些正在努力学习前端并想在前端的道路上越走越远的童鞋们。祝福你们。

时间: 2024-11-07 18:23:45

前端js脚本与防止js脚本的相关文章

js实现动态加载脚本的方法实例汇总

本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查资料研究js动态脚本的加载,不过真让人伤心啊!,网上几乎都是同一篇文章,4种方法,讨厌其中拷贝别人成果的人,也不加个原文的链接.哎!关键是最后一种方法还有点错误.经过两天的研究查阅资料,在这里和大家分享一下. 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在

paip.最好的脚本语言node js 环境搭建连接mysql

6.4 一些说明 数据属性可以重写同名的方法属性.这是为了避免在大型系统中产生问题的意外名称冲突.所以用一些减少冲突的常用方法是很有效果的.常用的方法包括:大写字母方法名称,用唯一的字符串来做为数据属性的名称(可以是个下划线_)或者用动词命名方法和用名字命名数据属性. 数据属性就像和对象的普通用户一样可以被方法引用.换句话说,类不能用来实现纯净的数据类型.事实上,在python中不能强制数据隐藏,一切基于约定.(另一方面,如C中写的,python的实现可以做到完全隐藏实现细节并且在必要是可以控制

js的延迟脚本----defer与异步脚本----async

延迟脚本----defer: 一般而言,js的引入<script></script>被放在body的结束符之前,这主要是为了让页面的所有节点被加载完了之后在执行js代码,防止js获取dom节点失败的情况出现. 如果你一定要将<script></script>放在head中,又担心无法获取到dom节点的话,可以如以下代码形式定义延迟脚本defer: <script type="text/javascript" defer="

前端自动化 shell 脚本命令 与 shell-node 脚本命令 简单使用 之 es6 转译

(背景: 先用 babel 转译 es6 再 用 browserify 打包 模块化文件,来解决浏览器不支持模块化 )(Browserify是一个让node模块可以用在浏览器中的神奇工具) 今天折腾了一上午,对于前端好多自动化管理的命令用起来,步骤甚多,故想写一个脚本文件,将项目所需要执行到命令 都 写在一个脚本文件中,在命令行 只需写一个命令即 完成所有事情.配置的环境: node + git1.第一步:在项目根目录下 新建 package.json 配置文件 { "name": &

前端的瑞士军刀:Modernizr.js

前言 Modernizr.js既能给老版本浏览器打补丁,又能保证新浏览器渐进增强的用户体验. 作用: 从实际操作来看,Modernizr默认做的事情很少,除了(在你选择的情况下)给不支持html5的标签的浏览器,如IE6,7,8追加一点由Remy Sharp开发的html5垫片脚本,使其识别<aside>.<section>等html5元素之外,它主要做的就是浏览器‘功能检测’. 因此,它知道浏览器是否支持各种html5和css3特性. 下载地址:www.modernizr.com

淘宝网前端开发面试题(二)--JS 面试题

转载请注明文章来源http://www.cnblogs.com/muqiangwei/p/5570470.html 所有答案仅供参考,不负责答案对错(^_^) 1.js 是什么,js 和 html 的开发如何结合? js是javascript的缩写,是一种基于对象的.事件驱动的脚本语言.它一共由三个部分组成:分别是DOM,BOM,ECMAscript.HTML 是超文本标记语言.HTML里的每一个标签就是JS里面的DOM节点.JS操作DOM节点就是在操作HTML的标签. 2.怎样添加.删除.复制

前端开发之走进Vue.js

Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.js来构建一个中大型的前端项目,同时做好相应的部署与优化工作. 文章将以PPT图片附加文字介绍的形式展开,不会涉及知识点的具体代码,点到为止.有兴趣的同学可以查看相应的文档进行了解. Vue.js简介 从上图的介绍中我们不难发现Vue.js是一款轻量级的以数据驱动的前端JS框架,其和jQuery最大的

前端页面js与flash交互——js获取flash对象,并传递参数

背景介绍: 最近在搞一个项目,涉及到图片选取,裁剪,上传等,由于浏览器安全性问题,js无法获取到<input type="file">中选取的文件路径,而且对照片的裁剪,抠图等由HTML5实现的功能,对各大浏览器的兼容性,真是不敢太大胆.这个时候就引进了flash,然后所有js做不了的让flash来做,然后由js来控制页面元素.就这样开始了js与as的交互之旅,听做flash的大叔说,flash调js的函数式很好调的,而js调as不大容易.最终的情况是as调js错误层出不穷

前端MVVM框架:Knockout.JS(一)

前言 在我们平时开发 Web 应用程序的时候,如果项目不算特别大的话,一般都是拿 jQuery 再配合一些前端 UI 框架就在项目上面应用了.如果页面逻辑稍微复杂的话,那个在写前端 JavaScript 代码时,势必会充斥前大量 jQuery 的选择器的应用.我并不想说它好或不好.只想问一下,有没有更方便的方法呢?有过 WPF 开发经验的同学一定会知道 MVVM(Model View ViewModel) 这种开发模式.它可以很轻松的将 View 与 对应的后端代码隔离开来.使项目易于维护.那么

前端迷思与React.js

前端迷思与React.js 前端技术这几年蓬勃发展, 这是当时某几个项目需要做前端技术选型时, 相关资料整理, 部分评论引用自社区. 开始吧: 目前, Web 开发技术框架选型为两种的占 80% .这种戏剧性的变化持续了近 6 年. 自 2013 年 5 月推出以来,ReactJS 在过去三年中已成为了 Web 开发领域的中坚力量. 任何组件与框架都有它的适用场景, 我们应该冷静分析与权衡, 先来看React.js 1 从功能开发角度说,React的思路很好.2 从页面设计角度说,传统的HTML