面试中常见算法问题详解,HTML5中与页面显示相关的API

Twitter的”fave”动画

2015/05/12 · HTML5 ·
Twitter,
动画

本文由 伯乐在线 –
刘健超-J.c
翻译,胡屹
校稿。未经许可,禁止转载!
英文出处:cssanimation.rocks。欢迎加入翻译组。

JavaScript 面试中常见算法问题详解

2017/02/20 · JavaScript
· 1 评论 ·
算法

原文出处:
王下邀月熊_Chevalier   

JavaScript
面试中常见算法问题详解 翻译自
Interview Algorithm Questions in Javascript()
{…}
从属于笔者的 Web
前端入门与工程实践。下文提到的很多问题从算法角度并不一定要么困难,不过用
JavaScript 内置的 API 来完成还是需要一番考量的。

HTML5中与页面显示相关的API

2015/05/15 · HTML5 ·
HTML5

原文出处:
涂根华的博客   

在HTML5中,增加了2个与页面显示相关的API,分别是Page Visibility
API与Fullscreen API; 作用分别如下:

Page Visibility API 
是指当页面变为最小化状态或者用户将浏览器标签切换到其他标签时会触发。

Fullscreen API 是将页面整体或页面中某个局部区域设为全屏。

Page Visibility API的使用场合如下:

  1. 一个应用程序中具有多幅图片的幻灯片式的连续播放功能,当页面变为不可见状态(最小化状态或者将用户浏览器标签切换到其他标签时),图片停止播放,当页面变为可见状态时,图片继续播放。
  2. 在一个实时显示服务器端信息的应用程序中,当页面处于不可见状态(最小化状态或者将用户浏览器标签切换到其他标签时),停止定期向服务器端请求数据的处理,当页面变为可见状态,继续执行定期向服务器端请求数据的处理。
  3. 在一个具有播放视频功能的应用程序中,当页面处于不可见状态(最小化状态或者将用户浏览器标签切换到其他标签时),暂停播放视频,当页面变为可见状态时,继续播放视频。

浏览器支持程度:Firefox10+,chrome14+,IE10+;

实现Page Visibility API

在使用Page Visibility
API时,我们首先需要判断当前用户所使用的浏览器以及该浏览器是否支持。代码如下判断:

JavaScript

if(typeof document.hidden !== ‘undefined’) { hidden = ‘hidden’;
visibilityChange = ‘visibilitychange’; }else if(typeof
document.mozHidden !== ‘undefined’) { hidden = ‘mozHidden’;
visibilityChange = ‘mozvisibilitychange’; }else if(typeof
document.msHidden !== ‘undefined’) { hidden = ‘msHidden’;
visibilityChange = ‘msvisibilitychange’; }else if(typeof
document.webkitHidden !== ‘undefined’) { hidden = ‘webkitHidden’;
visibilityChange = ‘webkitvisibilitychange’; }

1
2
3
4
5
6
7
8
9
10
11
12
13
if(typeof document.hidden !== ‘undefined’) {
    hidden = ‘hidden’;
    visibilityChange = ‘visibilitychange’;
}else if(typeof document.mozHidden !== ‘undefined’) {
    hidden = ‘mozHidden’;
    visibilityChange = ‘mozvisibilitychange’;
}else if(typeof document.msHidden !== ‘undefined’) {
    hidden = ‘msHidden’;
    visibilityChange = ‘msvisibilitychange’;
}else if(typeof document.webkitHidden !== ‘undefined’) {        
    hidden = ‘webkitHidden’;
    visibilityChange = ‘webkitvisibilitychange’;
}

如上,在Page Visibility
 API中,可以通过document对象的hidden属性值来判断页面是否处于可见状态,当页面处于可见状态时属性值为false,当页面处于不可见状态时属性值为true。

在Page
Visibility中,可以通过document对象的visibilityState属性值来判断页面的可见状态。该属性值为一个字符串,其含义如下所示:

   
visible:
 页面内容部分可见,当前页面位于用户正在查看的浏览器标签窗口中,且浏览器窗口未被最小化。

   
hidden:
 页面内容对用户不可见。当前页面不在用户正在查看的浏览器标签窗口中,或浏览器窗口已被最小化。

    prerender: 页面内容已被预渲染,但是对用户不可见。

现在我们来看一个demo,页面中有一个video元素与一个”播放”按钮,用户单击”播放”按钮时
按钮文字变为
’暂停”,同时开始播放video元素的视频,当页面变为最小化状态或用户浏览器标签切换到其他标签时候,视频被暂停播放,当页面恢复正常状态或用户将浏览器标签切回页面所在标签时,视频继续播放。

HTML代码如下:

JavaScript

<video id=”videoElement” controls width=640 height=360 autoplay>
<source src=”Wildlife/Wildlife.ogv” type=’video/ogg; codecs=”theora,
vorbis”‘/> <source src=”Wildlife/Wildlife.webm” type=’video/webm’
> <source src=”Wildlife/Wildlife.mp4″ type=’video/mp4′>
</video> <button id=”btnPlay”
onclick=”PlayOrPause()”>播放</button> <div
style=”height:1500px;”></div>

1
2
3
4
5
6
7
<video id="videoElement" controls width=640 height=360 autoplay>
    <source src="Wildlife/Wildlife.ogv" type=’video/ogg; codecs="theora, vorbis"’/>
    <source src="Wildlife/Wildlife.webm" type=’video/webm’ >
    <source src="Wildlife/Wildlife.mp4" type=’video/mp4′>
</video>
<button id="btnPlay" onclick="PlayOrPause()">播放</button>
<div style="height:1500px;"></div>

JS代码如下:

JavaScript

var hidden, visibilityChange, videoElement; if(typeof document.hidden
!== ‘undefined’) { hidden = ‘hidden’; visibilityChange =
‘visibilitychange’; }else if(typeof document.mozHidden !== ‘undefined’)
{ hidden = ‘mozHidden’; visibilityChange = ‘mozvisibilitychange’; }else
if(typeof document.msHidden !== ‘undefined’) { hidden = ‘msHidden’;
visibilityChange = ‘msvisibilitychange’; }else if(typeof
document.webkitHidden !== ‘undefined’) { hidden = ‘webkitHidden’;
visibilityChange = ‘webkitvisibilitychange’; }
document.addEventListener(visibilityChange,handle,false); videoElement =
document.getElementById(“videoElement”);
videoElement.addEventListener(‘ended’,videoEnded,false);
videoElement.addEventListener(‘play’,videoPlay,false);
videoElement.addEventListener(‘pause’,videoPause,false); //
如果页面变为不可见状态 则暂停视频播放 //
如果页面变为可见状态,则继续视频播放 function handle() { //
通过visibilityState属性值判断页面的可见状态
console.log(document.visibilityState); if(document[hidden]) {
videoElement.pause(); }else { videoElement.play(); } } // 播放视频
function play() { videoElement.play(); } // 暂停播放 function pause() {
videoElement.pause(); } function PlayOrPause() { if(videoElement.paused)
{ videoElement.play(); }else { videoElement.pause(); } } function
videoEnded(e) { videoElement.currentTime = 0; this.pause(); } function
videoPlay(e) { var btnPlay = document.getElementById(“btnPlay”);
btnPlay.innerHTML = “暂停”; } function videoPause(e) { var btnPlay =
document.getElementById(“btnPlay”); btnPlay.innerHTML = “播放”; }

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
var hidden,
visibilityChange,
videoElement;
if(typeof document.hidden !== ‘undefined’) {
    hidden = ‘hidden’;
    visibilityChange = ‘visibilitychange’;
}else if(typeof document.mozHidden !== ‘undefined’) {
    hidden = ‘mozHidden’;
    visibilityChange = ‘mozvisibilitychange’;
}else if(typeof document.msHidden !== ‘undefined’) {
    hidden = ‘msHidden’;
    visibilityChange = ‘msvisibilitychange’;
}else if(typeof document.webkitHidden !== ‘undefined’) {
    hidden = ‘webkitHidden’;
    visibilityChange = ‘webkitvisibilitychange’;
}
document.addEventListener(visibilityChange,handle,false);
videoElement = document.getElementById("videoElement");
videoElement.addEventListener(‘ended’,videoEnded,false);
videoElement.addEventListener(‘play’,videoPlay,false);
videoElement.addEventListener(‘pause’,videoPause,false);
// 如果页面变为不可见状态 则暂停视频播放
// 如果页面变为可见状态,则继续视频播放
function handle() {
    // 通过visibilityState属性值判断页面的可见状态
    console.log(document.visibilityState);
    if(document[hidden]) {
        videoElement.pause();    
    }else {
        videoElement.play();
    }
}
// 播放视频
function play() {
    videoElement.play();
}
// 暂停播放
function pause() {
    videoElement.pause();
}
function PlayOrPause() {
    if(videoElement.paused) {
        videoElement.play();
    }else {
        videoElement.pause();
    }
}
function videoEnded(e) {
    videoElement.currentTime = 0;
    this.pause();
}
function videoPlay(e) {
    var btnPlay = document.getElementById("btnPlay");
    btnPlay.innerHTML = "暂停";
}
function videoPause(e) {
    var btnPlay = document.getElementById("btnPlay");
    btnPlay.innerHTML = "播放";
}

实现Fullscreen API

在HTML5中,新增了一个Fullscreen
API,其作用是将页面整体或页面中某个局部区域设为全屏显示状态。

浏览器支持程度:Firefox10+,chrome16+,Safari5.1+

在Fullscreen
API中,可以通过DOM对象的根节点对象或某个元素的requestFullscreen属性值和执行相对应的方法来判断浏览器是否支持Fullscreen
API。代码如下:

JavaScript

var docElm = document.documentElement; if(docElm.requestFullscreen) {
docElm.requestFullscreen(); }else if(docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen(); }else if(docElm.webkitRequestFullScreen)
{ docElm.webkitRequestFullScreen(); }

1
2
3
4
5
6
7
8
var docElm = document.documentElement;
if(docElm.requestFullscreen) {
        docElm.requestFullscreen();
}else if(docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
}else if(docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
}

在Fullscreen
API中,也可以通过DOM对象或某个元素的exitFullscreen与CanvelFullScreen属性和方法将当前页面或某个元素设定为非全屏显示状态。

如下代码:

JavaScript

if(document.exitFullscreen) { document.exitFullscreen(); }else
if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); }else
if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen();
}

1
2
3
4
5
6
7
if(document.exitFullscreen) {
    document.exitFullscreen();
}else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
}else if(document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
}

在Fullscreen
API中,可以通过监听DOM对象或某个元素的fullscreenchange事件(当页面或元素从非全屏显示状态变为全屏显示状态,或从全屏显示状态变为非全屏显示状态时触发)。代码如下:

JavaScript

document.addEventListener(‘fullscreenchange’,function(){},false);
document.addEventListener(‘mozfullscreenchange’,function(){},false);
document.addEventListener(‘webkitfullscreenchange’,function(){},false);

1
2
3
document.addEventListener(‘fullscreenchange’,function(){},false);
document.addEventListener(‘mozfullscreenchange’,function(){},false);
document.addEventListener(‘webkitfullscreenchange’,function(){},false);

在css样式代码中,我们可以使用伪类选择器来单独指定处于全屏显示状态的页面或元素样式:

JavaScript

html:-moz-full-screen { background:red; } html:-webkit-full-screen {
background:red; } html:fullscreen { background:red; }

1
2
3
4
5
6
7
8
9
html:-moz-full-screen {
    background:red;
}
html:-webkit-full-screen {
    background:red;
}
html:fullscreen {
    background:red;
}

最后我们来看一个demo,在页面中有一个按钮,点击后,页面会变成全屏状态,再点击后,页面会退出全屏;

HTML代码如下:

JavaScript

<input type=”button” id=”btnFullScreen” value=”页面全屏显示”
onclick=”toggleFullScreen();”/> <div style=”width:100%;”
id=”fullscreentState”>非全屏显示</div>

1
2
<input type="button" id="btnFullScreen" value="页面全屏显示" onclick="toggleFullScreen();"/>
<div style="width:100%;" id="fullscreentState">非全屏显示</div>

Javascript如下:

JavaScript

var docElm = document.documentElement; var fullscreentState =
document.getElementById(“fullscreentState”); var btnFullScreen =
document.getElementById(“btnFullScreen”); fullscreentState.style.height
= docElm.clientHeight + ‘px’;
document.addEventListener(‘fullscreenchange’,function(){
fullscreentState.innerHTML = (document.fullscreen) ? “全屏显示” :
“非全屏显示”; },false);
document.addEventListener(‘mozfullscreenchange’,function(){
fullscreentState.innerHTML = (document.mozFullscreen) ? “全屏显示” :
“非全屏显示”; },false);
document.addEventListener(‘webkitfullscreenchange’,function(){
fullscreentState.innerHTML = (document.webkitFullscreen) ? “全屏显示” :
“非全屏显示”; },false); function toggleFullScreen() {
if(btnFullScreen.value == ‘页面全屏显示’) { btnFullScreen.value =
‘页面非全屏显示’; if(docElm.requestFullscreen) {
docElm.requestFullscreen(); }else if(docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen(); }else if(docElm.webkitRequestFullScreen)
{ docElm.webkitRequestFullScreen(); } }else {
if(document.exitFullscreen) { document.exitFullscreen(); }else
if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); }else
if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen();
} btnFullScreen.value = “页面全屏显示”; } }

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
var docElm = document.documentElement;
var fullscreentState = document.getElementById("fullscreentState");
var btnFullScreen = document.getElementById("btnFullScreen");
fullscreentState.style.height = docElm.clientHeight + ‘px’;
document.addEventListener(‘fullscreenchange’,function(){
    fullscreentState.innerHTML = (document.fullscreen) ? "全屏显示" : "非全屏显示";
},false);
document.addEventListener(‘mozfullscreenchange’,function(){
    fullscreentState.innerHTML = (document.mozFullscreen) ? "全屏显示" : "非全屏显示";
},false);
document.addEventListener(‘webkitfullscreenchange’,function(){
    fullscreentState.innerHTML = (document.webkitFullscreen) ? "全屏显示" : "非全屏显示";
},false);
function toggleFullScreen() {
    if(btnFullScreen.value == ‘页面全屏显示’) {
        btnFullScreen.value = ‘页面非全屏显示’;
        if(docElm.requestFullscreen) {
            docElm.requestFullscreen();
        }else if(docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        }else if(docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        }
    }else {
        if(document.exitFullscreen) {
            document.exitFullscreen();
        }else if(document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }else if(document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
        btnFullScreen.value = "页面全屏显示";
    }
}

赞 收藏
评论

图片 1

Twitter的“fave” 动画

最近 Twitter
通过引入一段新的动画重新设计了“fave”按钮(也叫“fav”)。这段动画并不依赖
CSS transition,而是由一系列图片组成的。下面展示如何用 CSS 的
animation-timing-function 属性中的 steps 时序函数(timing
function)重新制作这段动画。

JavaScript Specification

运动产生的错觉

这段动画的效果类似于观看古老的西洋镜,该装置呈现的是一系列连续的围绕着圆筒的插画。在下面的示例中,我们不使用圆筒,而是在某个元素内部呈现一系列图片。

阐述下 JavaScript 中的变量提升

所谓提升,顾名思义即是 JavaScript
会将所有的声明提升到当前作用域的顶部。这也就意味着我们可以在某个变量声明前就使用该变量,不过虽然
JavaScript 会将声明提升到顶部,但是并不会执行真的初始化过程。

示例

把鼠标悬停在星星上就可以看到动画效果(请到原文查看动画效果——译者注)。

在本示例中,我们将从制作一系列能组成动画的图片开始。在这里,我们使用来自
Twitter 的“fave”图标动画的部分图片集:

图片 2

为了能让这些帧动起来,我们需要把它们放置在一排上。在这个文件中,这些帧已经排列在一排上了,这意味着我们可以通过设置背景位置(background-position)属性使背景从第一帧过渡到最后一帧。

图片 3

阐述下 use strict; 的作用

use strict; 顾名思义也就是 JavaScript
会在所谓严格模式下执行,其一个主要的优势在于能够强制开发者避免使用未声明的变量。对于老版本的浏览器或者执行引擎则会自动忽略该指令。

JavaScript

// Example of strict mode “use strict”; catchThemAll(); function
catchThemAll() { x = 3.14; // Error will be thrown return x * x; }

1
2
3
4
5
6
7
8
// Example of strict mode
"use strict";
 
catchThemAll();
function catchThemAll() {
  x = 3.14; // Error will be thrown
  return x * x;
}

Steps() 时序函数

大多数的时序函数,例如 ease(缓冲)和
cubic-bezier(三次贝塞尔),都能让元素从初始状态平滑地过渡到最终状态。steps
时序函数与此不同,它并不是平滑地过渡,而是将过渡过程分割为一定数量的步骤,并且在这些步骤之间快速地移动。

图片 4

我们先建立如下的 HTML 代码:

XHTML

<section class=”fave”></section>

1
<section class="fave"></section>

解释下什么是 Event Bubbling 以及如何避免

Event Bubbling
即指某个事件不仅会触发当前元素,还会以嵌套顺序传递到父元素中。直观而言就是对于某个子元素的点击事件同样会被父元素的点击事件处理器捕获。避免
Event Bubbling 的方式可以使用event.stopPropagation() 或者 IE 9
以下使用event.cancelBubble

背景图片

接下来, 我们可以添加一些样式并设置背景图片位置:

图片 5

CSS

.fave { width: 70px; height: 50px; background:
url(images/twitter_fave.png) no-repeat; background-position: 0 0; }

1
2
3
4
5
6
.fave {
  width: 70px;
  height: 50px;
  background: url(images/twitter_fave.png) no-repeat;
  background-position: 0 0;
}

加了悬停状态后,一旦鼠标悬停在该元素上,背景就会从我们指定的位置移动到这一系列图片中最后一张的位置上(为了兼容浏览器,注意要添加相应的浏览器内核前缀——译者注)。

CSS

.fave:hover{ animation: fave 1s steps(55); } @keyframes fave{ 0%{
background-position:0 0; } 100%{ background-position:-3519px 0; } }

1
2
3
4
5
6
7
8
9
10
11
.fave:hover{
  animation: fave 1s steps(55);
}
@keyframes fave{
  0%{
    background-position:0 0;
  }
  100%{
    background-position:-3519px 0;
  }
}

请注意第1个规则 animation。在本例中,我们利用 steps
时序函数,让background-position 属性经历了一个持续时间为1秒的过渡。在
steps 部分的“55”这个值,代表了这段动画是由55帧组成的。

当我们将鼠标悬停在这个元素上时,所看到的效果是其背景图片通过55个相同的步骤经历了一次过渡。

另外这个案例,也可以用 transition 实现:

CSS

.fave:hover { background-position: -3519px 0; transition: background 1s
steps(55); }

1
2
3
4
.fave:hover {
  background-position: -3519px 0;
  transition: background 1s steps(55);
}

== 与 === 的区别是什么

=== 也就是所谓的严格比较,关键的区别在于===
会同时比较类型与值,而不是仅比较值。

JavaScript

// Example of comparators 0 == false; // true 0 === false; // false 2 ==
‘2’; // true 2 === ‘2’; // false

1
2
3
4
5
6
// Example of comparators
0 == false; // true
0 === false; // false
 
2 == ‘2’; // true
2 === ‘2’; // false

为什么不使用gif?

虽然也可以使用 gif 动画,但在这个案例中并不是很合适。gif
文件的大小通常较大并且帧速率也难以控制。而使用这个方式,我们就可以用 CSS
对这个动画进行停止、倒回以及各种各样的调整。

解释下 null 与 undefined 的区别

JavaScript 中,null 是一个可以被分配的值,设置为 null
的变量意味着其无值。而 undefined
则代表着某个变量虽然声明了但是尚未进行过任何赋值。

“steps()”的其它用法

背景动画精灵(background sprites)仅仅只是 steps
时序函数的用法之一。除此之外该函数还适用于制作任何需要一系列离散步骤的动画。例如,你可以用该函数制作一个摆钟。

解释下 Prototypal Inheritance 与 Classical Inheritance 的区别

在类继承中,类是不可变的,不同的语言中对于多继承的支持也不一样,有些语言中还支持接口、final、abstract
的概念。而原型继承则更为灵活,原型本身是可以可变的,并且对象可能继承自多个原型。

备忘小条

如果你喜欢这篇文章,你可以将它分享在Twitter,或者保存下面的备忘小条,以便参考。

图片 6

打赏支持我翻译更多好文章,谢谢!

打赏译者

数组

发表评论

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