当前位置:千赢国际官网 > 千赢网页手机版登入 > 轻松学习,来看看机智的前端童鞋怎么防盗千赢

轻松学习,来看看机智的前端童鞋怎么防盗千赢

文章作者:千赢网页手机版登入 上传时间:2019-11-30

JavaScript 中的 this 全面解析

2017/05/26 · JavaScript · this

原文出处: Simon_ITer   

GitHub地址:

this的指向问题应该是让每一个前端er都头疼的问题,我也一样,曾经遇到甚至都是一顿乱猜。最近在研读一些书籍如《你不知道的JavaScript》和《JavaScript语言精粹与编程实践》,让我对this的问题豁然开朗。故写下此篇文章,分享一下我的心得。

轻松学习 JavaScript (3):函数中的默认参数

2017/11/11 · JavaScript · 函数, 参数

原文出处: Dhananjay Kumar   译文出处:码农网 – 小峰   

JavaScript函数可以有默认参数值。通过默认函数参数,你可以初始化带有默认值的正式参数。如果不初始化具有某些值的参数,则该参数的默认值为undefined。

请看下列代码:

function foo(num1){ console.log(num1); } foo();

1
2
3
4
function foo(num1){
    console.log(num1);
}
foo();

在调用函数foo时,你没有传递任何参数,因此变量num1的默认值设置为undefined。但是,有时你可能需要设置默认值而非undefined。过去,最好的策略是测试参数值undefined,然后分配一个值。所以,在上面的例子中,如果你想要将num1的默认值设置为9,那么你可以按照以下代码所示的方式做:

function foo(num1) { if (num1 === undefined) { num1 = 9; } console.log(num1); } foo();

1
2
3
4
5
6
7
function foo(num1) {
    if (num1 === undefined) {
        num1 = 9;
    }
    console.log(num1);
}
foo();

ECMAScript 6引入了函数的默认参数。使用ECMA 2015的默认参数功能,你将不再需要检查未定义的参数值。现在,你可以将9设置为参数本身的默认值。你可以重写上述函数以使用默认值,如下所示:

function foo(num1 =9) { console.log(num1); } foo();

1
2
3
4
function foo(num1 =9) {
    console.log(num1);
}
foo();

对于函数foo,如果num1参数的值未被传递,那么JavaScript将设置9作为num1的默认值。

来看看机智的前端童鞋怎么防盗

2016/07/12 · JavaScript · 4 评论 · HTML5

原文出处: VaJoy   

很多开发的童鞋都是只身混江湖、夜宿城中村,如果居住的地方安保欠缺,那么出门在外难免担心屋里的财产安全。

事实上世面上有很多高大上的防盗设备,但对于机智的前端童鞋来说,只要有一台附带摄像头的电脑,就可以简单地实现一个防盗监控系统~

纯 JS 的“防盗”能力很大程度借助于 H5 canvas 的力量,且非常有意思。如果你对 canvas 还不熟悉,可以先点这里阅读我的系列教程。

step1. 调用摄像头

我们需要先在浏览器上访问和调用摄像头,用来监控屋子里的一举一动。不同浏览器中调用摄像头的 API 都略有出入,在这里我们以 chrome 做示例:

JavaScript

<video width="640" height="480" autoplay></video> <script> var video = document.querySelector('video'); navigator.webkitGetUserMedia({ video: true }, success, error); function success(stream) { video.src = window.webkitURL.createObjectURL(stream); video.play(); } function error(err) { alert('video error: ' err) } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<video width="640" height="480" autoplay></video>
 
<script>
    var video = document.querySelector('video');
 
    navigator.webkitGetUserMedia({
                video: true
            }, success, error);
 
    function success(stream) {
        video.src = window.webkitURL.createObjectURL(stream);
        video.play();
    }
 
    function error(err) {
        alert('video error: ' err)
    }
</script>

运行页面后,浏览器出于安全性考虑,会询问是否允许当前页面访问你的摄像头设备,点击“允许”后便能直接在 <video> 上看到摄像头捕获到的画面了:

千赢国际官网 1

step2. 捕获 video 帧画面

光是开着摄像头监视房间可没有任何意义,浏览器不会帮你对监控画面进行分析。所以这里我们得手动用脚本捕获 video 上的帧画面,用于在后续进行数据分析。

从这里开始咱们就要借助 canvas 力量了。在 Canvas入门(五)一文我们介绍过 ctx.drawImage() 方法,通过它可以捕获 video 帧画面并渲染到画布上。

我们需要创建一个画布,然后这么写:

JavaScript

<video width="640" height="480" autoplay></video> <canvas width="640" height="480"></canvas> <script> var video = document.querySelector('video'); var canvas = document.querySelector('canvas'); // video捕获摄像头画面 navigator.webkitGetUserMedia({ video: true }, success, error); function success(stream) { video.src = window.webkitURL.createObjectURL(stream); video.play(); } function error(err) { alert('video error: ' err) } //canvas var context = canvas.getContext('2d'); setTimeout(function(){ //把当前视频帧内容渲染到画布上 context.drawImage(video, 0, 0, 640, 480); }, 5000); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<video width="640" height="480" autoplay></video>
<canvas width="640" height="480"></canvas>
 
<script>
    var video = document.querySelector('video');
    var canvas = document.querySelector('canvas');
 
    // video捕获摄像头画面
    navigator.webkitGetUserMedia({
                video: true
            }, success, error);
 
    function success(stream) {
        video.src = window.webkitURL.createObjectURL(stream);
        video.play();
    }
 
    function error(err) {
        alert('video error: ' err)
    }
 
    //canvas
    var context = canvas.getContext('2d');
 
    setTimeout(function(){
        //把当前视频帧内容渲染到画布上
        context.drawImage(video, 0, 0, 640, 480);
    }, 5000);
 
</script>

如上代码所示,5秒后把视频帧内容渲染到画布上(下方右图)

千赢国际官网 2

step3. 对捕获的两个帧画面执行差异混合

在上面我们提到过,要有效地识别某个场景,需要对视频画面进行数据分析。

那么要怎么识别咱们的房子是否有人突然闯入了呢?答案很简单 —— 定时地捕获 video 画面,然后对比前后两帧内容是否存在较大变化。

我们先简单地写一个定时捕获的方法,并将捕获到的帧数据存起来:

JavaScript

//canvas var context = canvas.getContext('2d'); var preFrame, //前一帧 curFrame; //当前帧 //捕获并保存帧内容 function captureAndSaveFrame(){ console.log(context); preFrame = curFrame; context.drawImage(video, 0, 0, 640, 480); curFrame = canvas.toDataURL; //转为base64并保存 } //定时捕获 function timer(delta){ setTimeout(function(){ captureAndSaveFrame(); timer(delta) }, delta || 500); } timer();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    //canvas
    var context = canvas.getContext('2d');
    var preFrame,   //前一帧
        curFrame;   //当前帧
 
    //捕获并保存帧内容
    function captureAndSaveFrame(){ console.log(context);
        preFrame = curFrame;
        context.drawImage(video, 0, 0, 640, 480);
        curFrame = canvas.toDataURL;  //转为base64并保存
    }
 
    //定时捕获
    function timer(delta){
        setTimeout(function(){
            captureAndSaveFrame();
            timer(delta)
        }, delta || 500);
    }
 
    timer();

如上代码所示,画布会每隔500毫秒捕获并渲染一次 video 的帧内容(夭寿哇,做完这个动作不小心把饼干洒了一地。。。(“▔□▔)/)

千赢国际官网 3

留意这里我们使用了 canvas.toDataURL 方法来保存帧画面。

接着就是数据分析处理了,我们可以通过对比前后捕获的帧画面来判断摄像头是否监控到变化,那么怎么做呢?

熟悉设计的同学肯定常常使用一个图层功能 —— 混合模式:

千赢国际官网 4

当有两个图层时,对顶层图层设置“差值/Difference”的混合模式,可以一目了然地看到两个图层的差异:

千赢国际官网 5

“图A”是我去年在公司楼下拍的照片,然后我把它稍微调亮了一点点,并在上面画了一个 X 和 O 得到“图B”。接着我把它们以“差值”模式混合在一起,得到了最右的这张图。

JavaScript

“差值”模式原理:要混合图层双方的RGB值中每个值分别进行比较,用高值减去低值作为合成后的颜色,通常用白色图层合成一图像时,可以得到负片效果的反相图像。用黑色的话不发生任何变化(黑色亮度最低,下层颜色减去最小颜色值0,结果和原来一样),而用白色会得到反相效果(下层颜色被减去,得到补值),其它颜色则基于它们的亮度水平

1
“差值”模式原理:要混合图层双方的RGB值中每个值分别进行比较,用高值减去低值作为合成后的颜色,通常用白色图层合成一图像时,可以得到负片效果的反相图像。用黑色的话不发生任何变化(黑色亮度最低,下层颜色减去最小颜色值0,结果和原来一样),而用白色会得到反相效果(下层颜色被减去,得到补值),其它颜色则基于它们的亮度水平

在CSS3中,已经有 blend-mode 特性来支持这个有趣的混合模式,不过我们发现,在主流浏览器上,canvas 的 globalCompositeOperation 接口也已经良好支持了图像混合模式:

于是我们再建多一个画布来展示前后两帧差异:

JavaScript

<video width="640" height="480" autoplay></video> <canvas width="640" height="480"></canvas> <canvas width="640" height="480"></canvas> <script> var video = document.querySelector('video'); var canvas = document.querySelectorAll('canvas')[0]; var canvasForDiff = document.querySelectorAll('canvas')[1]; // video捕获摄像头画面 navigator.webkitGetUserMedia({ video: true }, success, error); function success(stream) { video.src = window.URL.createObjectURL(stream); video.play(); } function error(err) { alert('video error: ' err) } //canvas var context = canvas.getContext('2d'), diffCtx = canvasForDiff.getContext('2d'); //将第二个画布混合模式设为“差异” diffCtx.globalCompositeOperation = 'difference'; var preFrame, //前一帧 curFrame; //当前帧 //捕获并保存帧内容 function captureAndSaveFrame(){ preFrame = curFrame; context.drawImage(video, 0, 0, 640, 480); curFrame = canvas.toDataURL(); //转为base64并保存 } //绘制base64图像到画布上 function drawImg(src, ctx){ ctx = ctx || diffCtx; var img = new Image(); img.src = src; ctx.drawImage(img, 0, 0, 640, 480); } //渲染前后两帧差异 function renderDiff(){ if(!preFrame || !curFrame) return; diffCtx.clearRect(0, 0, 640, 480); drawImg(preFrame); drawImg(curFrame); } //定时捕获 function timer(delta){ setTimeout(function(){ captureAndSaveFrame(); renderDiff(); timer(delta) }, delta || 500); } timer(); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<video width="640" height="480" autoplay></video>
<canvas width="640" height="480"></canvas>
<canvas width="640" height="480"></canvas>
 
<script>
    var video = document.querySelector('video');
    var canvas = document.querySelectorAll('canvas')[0];
    var canvasForDiff = document.querySelectorAll('canvas')[1];
 
    // video捕获摄像头画面
    navigator.webkitGetUserMedia({
                video: true
            }, success, error);
 
    function success(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.play();
    }
 
    function error(err) {
        alert('video error: ' err)
    }
 
    //canvas
    var context = canvas.getContext('2d'),
        diffCtx = canvasForDiff.getContext('2d');
    //将第二个画布混合模式设为“差异”
    diffCtx.globalCompositeOperation = 'difference';
 
    var preFrame,   //前一帧
        curFrame;   //当前帧
 
    //捕获并保存帧内容
    function captureAndSaveFrame(){
        preFrame = curFrame;
        context.drawImage(video, 0, 0, 640, 480);
        curFrame = canvas.toDataURL();  //转为base64并保存
    }
 
    //绘制base64图像到画布上
    function drawImg(src, ctx){
        ctx = ctx || diffCtx;
        var img = new Image();
        img.src = src;
        ctx.drawImage(img, 0, 0, 640, 480);
    }
 
    //渲染前后两帧差异
    function renderDiff(){
        if(!preFrame || !curFrame) return;
        diffCtx.clearRect(0, 0, 640, 480);
        drawImg(preFrame);
        drawImg(curFrame);
    }
 
    //定时捕获
    function timer(delta){
        setTimeout(function(){
            captureAndSaveFrame();
            renderDiff();
            timer(delta)
        }, delta || 500);
    }
 
    timer();
 
</script>

效果如下(夭寿啊,做完这个动作我又把雪碧洒在键盘上了。。。(#--)/ )

千赢国际官网 6

可以看到,当前后两帧差异不大时,第三个画布几乎是黑乎乎的一片,只有当摄像头捕获到动作了,第三个画布才有明显的高亮内容出现。

因此,我们只需要对第三个画布渲染后的图像进行像素分析——判断其高亮阈值是否达到某个指定预期:

JavaScript

var context = canvas.getContext('2d'), diffCtx = canvasForDiff.getContext('2d'); //将第二个画布混合模式设为“差异” diffCtx.globalCompositeOperation = 'difference'; var preFrame, //前一帧 curFrame; //当前帧 var diffFrame; //存放差异帧的imageData //捕获并保存帧内容 function captureAndSaveFrame(){ preFrame = curFrame; context.drawImage(video, 0, 0, 640, 480); curFrame = canvas.toDataURL(); //转为base64并保存 } //绘制base64图像到画布上 function drawImg(src, ctx){ ctx = ctx || diffCtx; var img = new Image(); img.src = src; ctx.drawImage(img, 0, 0, 640, 480); } //渲染前后两帧差异 function renderDiff(){ if(!preFrame || !curFrame) return; diffCtx.clearRect(0, 0, 640, 480); drawImg(preFrame); drawImg(curFrame); diffFrame = diffCtx.getImageData( 0, 0, 640, 480 ); //捕获差异帧的imageData对象 } //计算差异 function calcDiff(){ if(!diffFrame) return 0; var cache = arguments.callee, count = 0; cache.total = cache.total || 0; //整个画布都是白色时所有像素的值的总和 for (var i = 0, l = diffFrame.width * diffFrame.height * 4; i < l; i = 4) { count = diffFrame.data[i] diffFrame.data[i 1] diffFrame.data[i 2]; if(!cache.isLoopEver){ //只需在第一次循环里执行 cache.total = 255 * 3; //单个白色像素值 } } cache.isLoopEver = true; count *= 3; //亮度放大 //返回“差异画布高亮部分像素总值”占“画布全亮情况像素总值”的比例 return Number(count/cache.total).toFixed(2); } //定时捕获 function timer(delta){ setTimeout(function(){ captureAndSaveFrame(); renderDiff(); setTimeout(function(){ console.log(calcDiff()); }, 10); timer(delta) }, delta || 500); } timer();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
    var context = canvas.getContext('2d'),
        diffCtx = canvasForDiff.getContext('2d');
    //将第二个画布混合模式设为“差异”
    diffCtx.globalCompositeOperation = 'difference';
 
    var preFrame,   //前一帧
        curFrame;   //当前帧
 
    var diffFrame;  //存放差异帧的imageData
 
    //捕获并保存帧内容
    function captureAndSaveFrame(){
        preFrame = curFrame;
        context.drawImage(video, 0, 0, 640, 480);
        curFrame = canvas.toDataURL();  //转为base64并保存
    }
 
    //绘制base64图像到画布上
    function drawImg(src, ctx){
        ctx = ctx || diffCtx;
        var img = new Image();
        img.src = src;
        ctx.drawImage(img, 0, 0, 640, 480);
    }
 
    //渲染前后两帧差异
    function renderDiff(){
        if(!preFrame || !curFrame) return;
        diffCtx.clearRect(0, 0, 640, 480);
        drawImg(preFrame);
        drawImg(curFrame);
        diffFrame = diffCtx.getImageData( 0, 0, 640, 480 );  //捕获差异帧的imageData对象
    }
 
    //计算差异
    function calcDiff(){
        if(!diffFrame) return 0;
        var cache = arguments.callee,
            count = 0;
        cache.total = cache.total || 0; //整个画布都是白色时所有像素的值的总和
        for (var i = 0, l = diffFrame.width * diffFrame.height * 4; i < l; i = 4) {
            count = diffFrame.data[i] diffFrame.data[i 1] diffFrame.data[i 2];
            if(!cache.isLoopEver){  //只需在第一次循环里执行
                cache.total = 255 * 3;   //单个白色像素值
            }
        }
        cache.isLoopEver = true;
        count *= 3;  //亮度放大
        //返回“差异画布高亮部分像素总值”占“画布全亮情况像素总值”的比例
        return Number(count/cache.total).toFixed(2);
    }
 
    //定时捕获
    function timer(delta){
        setTimeout(function(){
            captureAndSaveFrame();
            renderDiff();
            setTimeout(function(){
                console.log(calcDiff());
            }, 10);
 
            timer(delta)
        }, delta || 500);
    }
 
    timer();

注意这里我们使用了 count *= 3 来放大差异高亮像素的亮度值,不然得出的数值实在太小了。我们运行下页面(图片较大加载会有点慢)

千赢国际官网 7

经过试(xia)验(bai),个人觉得如果 calcDiff() 返回的比值如果大于 0.20,那么就可以定性为“一间空屋子,突然有人闯进来”的情况了。

step4. 上报异常图片

当上述的计算发现有状况时,需要有某种途径通知我们。有钱有精力的话可以部署个邮件服务器,直接发邮件甚至短信通知到自己,but 本文走的吃吐少年路线,就不搞的那么高端了。

那么要如何简单地实现异常图片的上报呢?我暂且想到的是 —— 直接把问题图片发送到某个站点中去。

这里我们选择博客园的“日记”功能,它可以随意上传相关内容。

JavaScript

p.s.,其实这里原本是想直接把图片传到博客园相册上的,可惜POST请求的图片实体要求走 file 格式,即无法通过脚本更改文件的 input[type=file],转 Blob 再上传也没用,只好作罢。

1
p.s.,其实这里原本是想直接把图片传到博客园相册上的,可惜POST请求的图片实体要求走 file 格式,即无法通过脚本更改文件的 input[type=file],转 Blob 再上传也没用,只好作罢。

我们在管理后台创建日记时,通过 Fiddler 抓包可以看到其请求参数非常简单:

千赢国际官网 8

从而可以直接构造一个请求:

JavaScript

//异常图片上传处理 function submit(){ //ajax 提交form $.ajax({ url : '', type : "POST", data : { '__VIEWSTATE': '', '__VIEWSTATEGENERATOR': '4773056F', 'Editor$Edit$txbTitle': '告警' Date.now(), 'Editor$Edit$EditorBody': '<img src="' curFrame '" />', 'Editor$Edit$lkbPost': '保存' }, success: function(){ console.log('submit done') } }); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    //异常图片上传处理
    function submit(){
 
        //ajax 提交form
        $.ajax({
            url : 'http://i.cnblogs.com/EditDiary.aspx?opt=1',
            type : "POST",
            data : {
                '__VIEWSTATE': '',
                '__VIEWSTATEGENERATOR': '4773056F',
                'Editor$Edit$txbTitle': '告警' Date.now(),
                'Editor$Edit$EditorBody': '<img src="' curFrame '" />',
                'Editor$Edit$lkbPost': '保存'
            },
            success: function(){
                console.log('submit done')
            }
        });
    }

当然如果请求页面跟博客园域名不同,是无法发送 cookie 导致请求跨域而失效,不过这个很好解决,直接修改 host 即可(怎么修改就不介绍了,自行百度吧)

我这边改完 host,通过  的地址访问页面,发现摄像头竟然失效了~

通过谷歌的文档可以得知,这是为了安全性考虑,非 HTTPS 的服务端请求都不能接入摄像头。不过解决办法也是有的,以 window 系统为例,打开 cmd 命令行面板并定位到 chrome 安装文件夹下,然后执行:

ZSH

chrome --unsafely-treat-insecure-origin-as-secure="" --user-data-dir=C:testprofile

1
chrome --unsafely-treat-insecure-origin-as-secure="http://i.cnblogs.com/h5monitor/final.html"  --user-data-dir=C:testprofile

此举将以沙箱模式打开一个独立的 chrome 进程,并对指定的站点去掉安全限制。注意咱们在新开的 chrome 中得重新登录博客园。

这时候便能正常访问摄像头了,我们对代码做下处理,当差异检测发现异常时,创建一份日记,最小间隔时间为5秒(不过后来发现没必要,因为博客园已经有做了时间限制,差不多10秒后才能发布新的日记)

JavaScript

//定时捕获 function timer(delta){ setTimeout(function(){ captureAndSaveFrame(); renderDiff(); if(calcDiff() > 0.2){ //监控到异常,发日志 submit() } timer(delta) }, delta || 500); } setTimeout(timer, 60000 * 10); //设定打开页面十分钟后才开始监控 //异常图片上传处理 function submit(){ var cache = arguments.callee, now = Date.now(); if(cache.reqTime && (now - cache.reqTime < 5000)) return; //日记创建最小间隔为5秒 cache.reqTime = now; //ajax 提交form $.ajax({ url : '', type : "POST", timeout : 5000, data : { '__VIEWSTATE': '', '__VIEWSTATEGENERATOR': '4773056F', 'Editor$Edit$txbTitle': '告警' Date.now(), 'Editor$Edit$EditorBody': '<img src="' curFrame '" />', 'Editor$Edit$lkbPost': '保存' }, success: function(){ console.log('submit done') }, error: function(err){ cache.reqTime = 0; console.log('error: ' err) } }); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
    //定时捕获
    function timer(delta){
        setTimeout(function(){
            captureAndSaveFrame();
            renderDiff();
            if(calcDiff() > 0.2){  //监控到异常,发日志
                submit()
            }
 
            timer(delta)
        }, delta || 500);
    }
 
    setTimeout(timer, 60000 * 10);  //设定打开页面十分钟后才开始监控
 
 
    //异常图片上传处理
    function submit(){
        var cache = arguments.callee,
            now = Date.now();
        if(cache.reqTime && (now - cache.reqTime < 5000)) return;  //日记创建最小间隔为5秒
 
        cache.reqTime = now;
 
        //ajax 提交form
        $.ajax({
            url : 'http://i.cnblogs.com/EditDiary.aspx?opt=1',
            type : "POST",
            timeout : 5000,
            data : {
                '__VIEWSTATE': '',
                '__VIEWSTATEGENERATOR': '4773056F',
                'Editor$Edit$txbTitle': '告警' Date.now(),
                'Editor$Edit$EditorBody': '<img src="' curFrame '" />',
                'Editor$Edit$lkbPost': '保存'
            },
            success: function(){
                console.log('submit done')
            },
            error: function(err){
                cache.reqTime = 0;
                console.log('error: ' err)
            }
        });
    }

执行效果:

千赢国际官网 9

日记也是妥妥的出来了:

千赢国际官网 10

点开就能看到异常的那张图片了:

千赢国际官网 11

要留意的是,博客园对日记发布数量是有做每日额度限制来防刷的,达到限额的话会导致当天的随笔和文章也无法发布,所以得谨慎使用:

千赢国际官网 12

不过这种形式仅能上报异常图片,暂时无法让我们及时收悉告警,有兴趣的童鞋可以试着再写个 chrome 插件,定时去拉取日记列表做判断,如果有新增日记则触发页面 alert。

另外我们当然希望能直接对闯入者进行警告,这块比较好办 —— 搞个警示的音频,在异常的时候触发播放即可:

JavaScript

//播放音频 function fireAlarm(){ audio.play() } //定时捕获 function timer(delta){ setTimeout(function(){ captureAndSaveFrame(); if(preFrame && curFrame){ renderDiff(); if(calcDiff() > 0.2){ //监控到异常 //发日记 submit(); //播放音频告警 fireAlarm(); } } timer(delta) }, delta || 500); } setTimeout(timer, 60000 * 10); //设定打开页面十分钟后才开始监控

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    //播放音频
    function fireAlarm(){
        audio.play()
    }
 
 
    //定时捕获
    function timer(delta){
        setTimeout(function(){
            captureAndSaveFrame();
            if(preFrame && curFrame){
                renderDiff();
                if(calcDiff() > 0.2){  //监控到异常
                    //发日记
                    submit();
                    //播放音频告警
                    fireAlarm();
                }
            }
            timer(delta)
        }, delta || 500);
    }
 
    setTimeout(timer, 60000 * 10);  //设定打开页面十分钟后才开始监控

最后说一下,本文代码均挂在我的github上,有兴趣的童鞋可以自助下载。共勉~

1 赞 4 收藏 4 评论

千赢国际官网 13

隐式绑定

关于this,一般来说,谁调用了方法,该方法的this就指向谁,如:

function foo(){ console.log(this.a) } var a = 3; var obj = { a: 2, foo: foo }; obj.foo(); // 输出2,因为是obj调用的foo,所以foo的this指向了obj,而obj.a = 2

1
2
3
4
5
6
7
8
9
10
11
12
function foo(){
    console.log(this.a)
}
 
var a = 3;
 
var obj = {
    a: 2,
    foo: foo
};
 
obj.foo(); // 输出2,因为是obj调用的foo,所以foo的this指向了obj,而obj.a = 2

如果存在多次调用,对象属性引用链只有上一层或者说最后一层在调用位置中起作用,如:

function foo() { console.log( this.a ) } var obj2 = { a: 42, foo: foo } var obj1 = { a: 2, obj2: obj2 } obj1.obj2.foo(); // 42

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function foo() {
    console.log( this.a )
}
 
var obj2 = {
    a: 42,
    foo: foo
}
 
var obj1 = {
    a: 2,
    obj2: obj2
}
 
obj1.obj2.foo(); // 42

检查未定义的参数

即使你在调用函数时明确地传递undefined作为参数值,参数值也将设置为默认值。

function foo(num1 =9) { console.log(num1); } foo(undefined);

1
2
3
4
function foo(num1 =9) {
    console.log(num1);
}
foo(undefined);

在上面的代码中,你传递undefined为num1的值;因此,num1的值将被设置为默认值9。

隐式丢失

一个最常见的this绑定问题就是被隐式绑定的函数会丢失绑定对象,也就是说他回应用默认绑定,从而把this绑定到全局对象或者undefined上,取决于是否是严格模式。

function foo() { console.log( this.a ) } var obj1 = { a: 2, foo: foo } var bar = obj1.foo; // 函数别名! var a = "oops, global"; // a是全局对象的属性 bar(); // "oops, global"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function foo() {
    console.log( this.a )
}
 
var obj1 = {
    a: 2,
    foo: foo
}
 
var bar = obj1.foo; // 函数别名!
 
var a = "oops, global"; // a是全局对象的属性
 
bar(); // "oops, global"

虽然bar是obj.foo的一个引用,但是实际上,它引用的是foo函数本身,因此此时的bar()其实是一个不带任何修饰的函数调用,因此应用了默认绑定

一个更微妙、更常见并且更出乎意料的情况发生在传入回调函数时

function foo() { console.log( this.a ) } function doFoo( fn ){ // fn 其实引用的是 foo fn(); //

1
2
3
4
5
6
7
function foo() {
    console.log( this.a )
}
 
function doFoo( fn ){
    // fn 其实引用的是 foo
    fn(); //

参数传递其实就是一种隐式赋值,因此我们传入函数时也会被隐式赋值,所以结果和上一个例子一样,如果把函数传入语言内置的函数而不是传入自己声明的函数(如setTimeout等),结果也是一样的

运行时计算默认值

JavaScript函数默认值在运行时计算。为了更好地理解这一点,请看以下代码:

function foo(value = koo()) { return value; } function koo() { return "Ignite UI"; } var a = foo(); console.log(a);

1
2
3
4
5
6
7
8
function foo(value = koo()) {
    return value;
}
function koo() {
     return "Ignite UI";
}
var a = foo();
console.log(a);

在函数foo中,参数值的默认值设置为函数koo。在运行时调用函数foo时,将计算函数koo。调用foo函数后,你会得到如下图所示的输出(在这个例子中,我们使用了Ignite UI框架)。千赢国际官网 14

 

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:轻松学习,来看看机智的前端童鞋怎么防盗千赢

关键词: 千赢国际官网 qy8千亿国际