整理总结的一些前端面试题,JS核心系列

JS核心系列:浅谈 call apply 与 bind

2016/03/01 · JavaScript
· apply,
bind,
call

原文出处: 一像素   

在JavaScript中,call、apply和bind
是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向,从而可以达到接花移木的效果。本文将对这三个方法进行详细的讲解,并列出几个经典应用场景。

 

call(thisArgs [,args…])


该方法可以传递一个thisArgs参数和一个参数列表,thisArgs指定了函数在运行期的调用者,也就是函数中的this对象,而参数列表会被传入调用函数中。thisArgs的取值有以下4种情况:

(1) 不传,或者传null,undefined, 函数中的this指向window对象

(2) 传递另一个函数的函数名,函数中的this指向这个函数的引用

(3)
传递字符串、数值或布尔类型等基础类型,函数中的this指向其对应的包装对象,如
String、Number、Boolean

(4) 传递一个对象,函数中的this指向这个对象

JavaScript

function a(){ console.log(this); //输出函数a中的this对象 } function
b(){} //定义函数b var obj = {name:’onepixel’}; //定义对象obj a.call();
//window a.call(null); //window a.call(undefined);//window a.call(1);
//Number a.call(”); //String a.call(true); //Boolean a.call(b);//
function b(){} a.call(obj); //Object

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function a(){
    console.log(this); //输出函数a中的this对象
}
function b(){} //定义函数b
 
var obj = {name:’onepixel’}; //定义对象obj
 
a.call(); //window
a.call(null); //window
a.call(undefined);//window
a.call(1); //Number
a.call(”); //String
a.call(true); //Boolean
a.call(b);// function b(){}
a.call(obj); //Object

这是call的核心功能,它允许你在一个对象上调用该对象没有定义的方法,并且这个方法可以访问该对象中的属性,至于这样做有什么好处,我待会再讲,我们先看一个简单的例子:

JavaScript

var a = { name:’onepixel’, //定义a的属性 say:function(){ //定义a的方法
console.log(“Hi,I’m function a!”); } }; function b(name){
console.log(“Post params: “+ name); console.log(“I’m “+ this.name);
this.say(); } b.call(a,’test’); >> Post params: test I’m onepixel
I’m function a!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var a = {
 
    name:’onepixel’, //定义a的属性
 
    say:function(){ //定义a的方法
        console.log("Hi,I’m function a!");
    }
};
 
function b(name){
    console.log("Post params: "+ name);
    console.log("I’m "+ this.name);
    this.say();
}
 
b.call(a,’test’);
>>
Post params: test
I’m onepixel
I’m function a!

当执行b.call时,字符串test作为参数传递给了函数b,由于call的作用,函数b中的this指向了对象a,
因此相当于调用了对象a上的函数b,而实际上a中没有定义b 。

 

apply(thisArgs[,args[]])


apply和call的唯一区别是第二个参数的传递方式不同,apply的第二个参数必须是一个数组,而call允许传递一个参数列表。值得你注意的是,虽然apply接收的是一个参数数组,但在传递给调用函数时,却是以参数列表的形式传递,我们看个简单的例子:

JavaScript

function b(x,y,z){ console.log(x,y,z); } b.apply(null,[1,2,3]); // 1 2
3

1
2
3
4
5
function b(x,y,z){
    console.log(x,y,z);
}
 
b.apply(null,[1,2,3]); // 1 2 3

apply的这个特性很重要,我们会在下面的应用场景中提到这个特性。

 

bind(thisArgs [,args…])


bind是ES5新增的一个方法,它的传参和call类似,但又和call/apply有着显著的不同,即调用call或apply都会自动执行对应的函数,而bind不会执行对应的函数,只是返回了对函数的引用。粗略一看,bind似乎比call/apply要落后一些,那ES5为什么还要引入bind呢?

其实,ES5引入bind的真正目的是为了弥补call/apply的不足,由于call/apply会对目标函数自动执行,从而导致它无法在事件绑定函数中使用,因为事件绑定函数不需要我们手动执行,它是在事件被触发时由JS内部自动执行的。而bind在实现改变函数this的同时又不会自动执行目标函数,因此可以完美的解决上述问题,看一个例子就能明白:

JavaScript

var obj = {name:’onepixel’}; /** *
给document添加click事件监听,并绑定onClick函数 *
通过bind方法设置onClick的this为obj,并传递参数p1,p2 */
document.addEventListener(‘click’,onClick.bind(obj,’p1′,’p2′),false);
//当点击网页时触发并执行 function onClick(a,b){ console.log( this.name,
//onepixel a, //p1 b //p2 ) }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var obj = {name:’onepixel’};
 
/**
* 给document添加click事件监听,并绑定onClick函数
* 通过bind方法设置onClick的this为obj,并传递参数p1,p2
*/
document.addEventListener(‘click’,onClick.bind(obj,’p1′,’p2′),false);
 
//当点击网页时触发并执行
function onClick(a,b){
    console.log(
            this.name, //onepixel
            a, //p1
            b  //p2
    )
}

当点击网页时,onClick被触发执行,输出onepixel p1 p2,
说明onClick中的this被bind改变成了obj对象,为了对bind进行深入的理解,我们来看一下bind的polyfill实现:

JavaScript

if (!Function.prototype.bind) { Function.prototype.bind = function
(oThis) { var aArgs = Array.prototype.slice.call(arguments, 1), fToBind
= this, //this在这里指向的是目标函数 fBound = function () { return
fToBind.apply( //如果外部执行var obj = new
fBound(),则将obj作为最终的this,放弃使用oThis this instanceof fToBind ?
this //此时的this就是new出的obj : oThis || this,
//如果传递的oThis无效,就将fBound的调用者作为this
//将通过bind传递的参数和调用时传递的参数进行合并,并作为最终的参数传递
aArgs.concat(Array.prototype.slice.call(arguments))); };
//将目标函数的原型对象拷贝到新函数中,因为目标函数有可能被当作构造函数使用
fBound.prototype = this.prototype; //返回fBond的引用,由外部按需调用
return fBound; }; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
if (!Function.prototype.bind) {
    Function.prototype.bind = function (oThis) {
        var aArgs = Array.prototype.slice.call(arguments, 1),
            fToBind = this, //this在这里指向的是目标函数
            fBound = function () {
                return fToBind.apply(
                    //如果外部执行var obj = new fBound(),则将obj作为最终的this,放弃使用oThis
                    this instanceof fToBind
                            ? this  //此时的this就是new出的obj
                            : oThis || this, //如果传递的oThis无效,就将fBound的调用者作为this
 
                    //将通过bind传递的参数和调用时传递的参数进行合并,并作为最终的参数传递
                    aArgs.concat(Array.prototype.slice.call(arguments)));
            };
 
        //将目标函数的原型对象拷贝到新函数中,因为目标函数有可能被当作构造函数使用
        fBound.prototype = this.prototype;
 
        //返回fBond的引用,由外部按需调用
        return fBound;
    };
}

应用场景一:继承


大家知道,JavaScript中没有诸如Java、C#等高级语言中的extend
关键字,因此JS中没有继承的概念,如果一定要继承的话,call和apply可以实现这个功能:

JavaScript

function Animal(name,weight){ this.name = name; this.weight = weight; }
function Cat(){ Animal.call(this,’cat’,’50’);
//Animal.apply(this,[‘cat’,’50’]); this.say = function(){
console.log(“I am ” + this.name+”,my weight is ” + this.weight); } } var
cat = new Cat(); cat.say();//I am cat,my weight is 50

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Animal(name,weight){
   this.name = name;
   this.weight = weight;
}
 
function Cat(){
    Animal.call(this,’cat’,’50’);
  //Animal.apply(this,[‘cat’,’50’]);
 
   this.say = function(){
      console.log("I am " + this.name+",my weight is " + this.weight);
   }
}
 
var cat = new Cat();
cat.say();//I am cat,my weight is 50

当通过new运算符产生了cat时,Cat中的this就指向了cat对象(关于new运算符的讲解,请参考:),而继承的关键是在于Cat中执行了Animal.call(this,’cat’,’50’)
这句话,在call中将this作为thisArgs参数传递,于是Animal方法中的this就指向了Cat中的this,而cat中的this指向的是cat对象,所以Animal中的this指向的就是cat对象,在Animal中定义了name和weight属性,就相当于在cat中定义了这些属性,因此cat对象便拥有了Animal中定义的属性,从而达到了继承的目的。

 

应用场景二:移花接木


在讲下面的内容之前,我们首先来认识一下JavaScript中的一个非标准专业术语:ArrayLike(类数组/伪数组)

ArrayLike
对象即拥有数组的一部分行为,在DOM中早已表现出来,而jQuery的崛起让ArrayLike在JavaScript中大放异彩。ArrayLike对象的精妙在于它和JS原生的Array类似,但是它是自由构建的,它来自开发者对JavaScript对象的扩展,也就是说:对于它的原型(prototype)我们可以自由定义,而不会污染到JS原生的Array。

ArrayLike对象在JS中被广泛使用,比如DOM中的NodeList,
函数中的arguments都是类数组对象,这些对象像数组一样存储着每一个元素,但它没有操作数组的方法,而我们可以通过call将数组的某些方法移接到ArrayLike对象,从而达到操作其元素的目的。比如我们可以这样遍历函数中的arguments:

JavaScript

function test(){ //检测arguments是否为Array的实例 console.log( arguments
instanceof Array, //false Array.isArray(arguments) //false );
//判断arguments是否有forEach方法 console.log(arguments.forEach);
//undefined // 将数组中的forEach应用到arguments上
Array.prototype.forEach.call(arguments,function(item){
console.log(item); // 1 2 3 4 }); } test(1,2,3,4);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function test(){
    //检测arguments是否为Array的实例
    console.log(
            arguments instanceof Array, //false
            Array.isArray(arguments)  //false
    );
    //判断arguments是否有forEach方法
    console.log(arguments.forEach); //undefined
 
    // 将数组中的forEach应用到arguments上
    Array.prototype.forEach.call(arguments,function(item){
        console.log(item); // 1 2 3 4
    });
 
}
test(1,2,3,4);

除此之外,对于apply而言,我们上面提到了它独有的一个特性,即apply接收的是数组,在传递给调用函数的时候是以参数列表传递的。
这个特性让apply看起来比call
略胜一筹,比如有这样一个场景:给定一个数组[1,3,4,7],然后求数组中的最大元素,而你知道,数组中并没有获取最大值的方法,一般情况下,你需要通过编写代码来实现。而我们知道,Math对象中有一个获取最大值的方法,即Math.max(),
max方法需要传递一个参数列表,然后返回这些参数中的最大值。而apply不仅可以将Math对象的max方法应用到其他对象上,还可以将一个数组转化为参数列表传递给max,看代码就能一目了然:

JavaScript

var arr = [2,3,1,5,4]; Math.max.apply(null,arr); // 5

1
2
3
var arr = [2,3,1,5,4];
 
Math.max.apply(null,arr); // 5

以上便是call和apply比较经典的几个应用场景,熟练掌握这些技巧,并把这些特性应用到你的实际项目中,会使你的代码看起来更加耐人寻味!

2 赞 12 收藏
评论

图片 1

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

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> 上看到摄像头捕获到的画面了:

图片 2

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秒后把视频帧内容渲染到画布上(下方右图)

图片 3

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
的帧内容(夭寿哇,做完这个动作不小心把饼干洒了一地。。。\(“▔□▔)/)

图片 4

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

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

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

图片 5

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

图片 6

“图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>

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

图片 7

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

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

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
来放大差异高亮像素的亮度值,不然得出的数值实在太小了。我们运行下页面(图片较大加载会有点慢)

图片 8

经过试(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 抓包可以看到其请求参数非常简单:

图片 9

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

JavaScript

//异常图片上传处理 function submit(){ //ajax 提交form $.ajax({ url :
”, type : “POST”, data : {
‘__VIEWSTATE’: ”, ‘__VIEWSTATEGENERATOR’: ‘4773056F’,
‘Editor$Edit$txbTitle’: ‘告警’ + Date.now(), ‘Editor$Edit$EditorBody’:
‘<img src=”‘%20+%20curFrame%20+%20′” />’, ‘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="’%20+%20curFrame%20+%20’" />’,
                ‘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=”‘%20+%20curFrame%20+%20′”
/>’, ‘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="’%20+%20curFrame%20+%20’" />’,
                ‘Editor$Edit$lkbPost’: ‘保存’
            },
            success: function(){
                console.log(‘submit done’)
            },
            error: function(err){
                cache.reqTime = 0;
                console.log(‘error: ‘ + err)
            }
        });
    }

执行效果:

图片 10

日记也是妥妥的出来了:

图片 11

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

图片 12

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

图片 13

不过这种形式仅能上报异常图片,暂时无法让我们及时收悉告警,有兴趣的童鞋可以试着再写个
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
评论

图片 1

整理总结的一些前端面试题

2016/09/22 · 基础技术 ·
4 评论 ·
CSS,
HTML,
Javascript,
面试

本文作者: 伯乐在线 –
Damonare
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

HTML面试题

1.XHTML和HTML有什么区别

  • HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
    最主要的不同:
  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • 标签名必须用小写字母。
  • XHTML 文档必须拥有根元素。

2.前端页面有哪三层构成,分别是什么?作用是什么?

  • 结构层 Html 表示层 CSS 行为层 js;
    3.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
  • Ie(Ie内核) 火狐(Gecko) 谷歌(webkit,Blink)
    opera(Presto),Safari(wbkit)

4.什么是语义化的HTML?

  • 直观的认识标签
    对于搜索引擎的抓取有好处,用正确的标签做正确的事情!
  • html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;
    在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于
    SEO。
  • 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

5.HTML5 为什么只需要写 !DOCTYPE HTML?

  • HTML5 不基于
    SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

6.Doctype作用?标准模式与兼容模式各有什么区别?

  • !DOCTYPE声明位于位于HTML文档中的第一行,处于html
    标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
  • 标准模式的排版
    和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

7.html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分
HTML 和
HTML5?

  • HTML5 现在已经不是 SGML
    的子集,主要是关于图像,位置,存储,多任务等功能的增加。
  • 绘画 canvas
  • 用于媒介回放的 video 和 audio 元素
  • 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
  • sessionStorage 的数据在浏览器关闭后自动删除
  • 语意化更好的内容元素,比如 article、footer、header、nav、section
  • 表单控件,calendar、date、time、email、url、search
  • 新的技术webworker, websockt, Geolocation
    移除的元素
  • 纯表现的元素:basefont,big,center,font, s,strike,tt,u;
  • 对可用性产生负面影响的元素:frame,frameset,noframes;
    支持HTML5新标签:
  • IE8/IE7/IE6支持通过document.createElement方法产生的标签,
  • 可以利用这一特性让这些浏览器支持HTML5新标签,
  • 浏览器支持新标签后,还需要添加标签默认的样式:

8.请描述一下 cookies,sessionStorage 和 localStorage 的区别?

  • cookie在浏览器和服务器间来回传递。
    sessionStorage和localStorage不会
  • sessionStorage和localStorage的存储空间更大;
  • sessionStorage和localStorage有更多丰富易用的接口;
  • sessionStorage和localStorage各自独立的存储空间;

9.如何实现浏览器内多个标签页之间的通信?

  • 调用localstorge、cookies等本地存储方式

CSS面试题

1.简要说一下CSS的元素分类

  • 块级元素:div,p,h1,form,ul,li;
  • 行内元素 : span>,a,label,input,img,strong,em;

2.CSS隐藏元素的几种方法(至少说出三种)

  • Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
  • Visibility:与 opacity
    唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏;
  • Display:display 设为 none
    任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
  • Position:不会影响布局,能让元素保持可以操作;
  • Clip-path:clip-path 属性还没有在 IE 或者 Edge
    下被完全支持。如果要在你的 clip-path 中使用外部的 SVG
    文件,浏览器支持度还要低;

3.CSS清除浮动的几种方法(至少两种)

  • 使用带clear属性的空元素
  • 使用CSS的overflow属性;
  • 使用CSS的:after伪元素;
  • 使用邻接元素处理;

4.CSS居中(包括水平居中和垂直居中)

内联元素居中方案

水平居中设置:
1.行内元素

  • 设置 text-align:center;

2.Flex布局

  • 设置display:flex;justify-content:center;(灵活运用,支持Chroime,Firefox,IE9+)

垂直居中设置:
1.父元素高度确定的单行文本(内联元素)

  • 设置 height = line-height;

2.父元素高度确定的多行文本(内联元素)

  • a:插入 table (插入方法和水平居中一样),然后设置
    vertical-align:middle;
  • b:先设置 display:table-cell 再设置 vertical-align:middle;

    ### 块级元素居中方案

    水平居中设置:
    1.定宽块状元素

  • 设置 左右 margin 值为 auto;

2.不定宽块状元素

  • a:在元素外加入 table 标签(完整的,包括
    table、tbody、tr、td),该元素写在 td 内,然后设置 margin 的值为
    auto;
  • b:给该元素设置 displa:inine 方法;
  • c:父元素设置 position:relative 和 left:50%,子元素设置
    position:relative 和 left:50%;

垂直居中设置:

  • 使用position:absolute(fixed),设置left、top、margin-left、margin-top的属性;
  • 利用position:fixed(absolute)属性,margin:auto这个必须不要忘记了;
  • 利用display:table-cell属性使内容垂直居中;
  • 使用css3的新属性transform:translate(x,y)属性;
  • 使用:before元素;

5.写出几种IE6 BUG的解决方法

  • 双边距BUG float引起的 使用display
  • 3像素问题 使用float引起的 使用dislpay:inline -3px
  • 超链接hover 点击后失效 使用正确的书写顺序 link visited hover
    active
  • Ie z-index问题 给父级添加position:relative
  • Png 透明 使用js代码 改
  • Min-height 最小高度 !Important 解决’
  • select 在ie6下遮盖 使用iframe嵌套
  • 为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08
    line-height:1px)

6.对于SASS或是Less的了解程度?喜欢那个?

  • 语法介绍

7.Bootstrap了解程度

  • 特点,排版,插件的使用;

8.页面导入样式时,使用link和@import有什么区别?

  • link属于XHTML标签,除了加载CSS外,还能用于定义RSS,
    定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;
  • 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
  • import是CSS2.1
    提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;

9.介绍一下CSS的盒子模型?

  • 有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了
    border 和 pading;
  • 盒模型: 内容(content)、填充(padding)、边界(margin)、
    边框(border).

10.CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?
CSS3新增伪类有那些?

  • id选择器( # myid)
  • 类选择器(.myclassname)
  • 标签选择器(div, h1, p)
  • 相邻选择器(h1 + p)
  • 子选择器(ul > li)
  • 后代选择器(li a)
  • 通配符选择器( * )
  • 属性选择器(a[rel = “external”])
  • 伪类选择器(a: hover, li: nth – child)
  • 可继承的样式: font-size font-family color, UL LI DL DD DT;
  • 不可继承的样式:border padding margin width height ;
  • 优先级就近原则,同权重情况下样式定义最近者为准;
  • 优先级为:

    JavaScript

    !important > id > class > tag important 比 内联优先级高

    1
    2
    !important >  id > class > tag
    important 比 内联优先级高

11.CSS3有哪些新特性?

  • CSS3实现圆角(border-radius:8px),阴影(box-shadow:10px),
    对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)
  • transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px)
    skew(-9deg,0deg);//旋转,缩放,定位,倾斜
    增加了更多的CSS选择器 多背景 rgba

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:, ,
网站地图xml地图