[译]原生全屏JavaScript API

10年前

HTML 5的<video>是一个相当不错的标签,但是它刚发布的时间,最大的问题是它不能像Flash那样实现真正的全屏。幸好,几个月后,大部分浏览器已经原生地支持全屏。

全屏API简史

  1. 第一个原生的全屏接口是在Safari 5.0(和iOS)中添加的 webkitEnterFullScreen() 函数。不过,它只能用于<video>标签。
  2. 在Safari 5.1中,苹果修改了这个API使它更接近于Mozilla的全屏API草案(比苹果的实现更早)。现在,所有DOM元素都可以调用 webkitRequestFullScreen() 方法。
  3. Firefox和Chome表示它们将会添加原生全屏API支持,而且这个特性已经在Chome 15+以及Firefox Nightly中实现。

在2011年10月15日,W3C发布了一份全屏API草案(由Opera团队的一名成员编写),它跟Mozilla的草案有两个主要的不同点:

  1. Mozilla/Webkit使用大写字母'S'(FullScreen),但W3C则不是(Fullscreen);
  2. Mozilla/Webkit使用cancelFullScreen,W3C使用exitFullscreen
9054次阅读,2条评论

使用canvas绘制时钟

10年前

准备工作

在HTML中指定一个区域放置时钟:

<div id="clock" style="position: relative;"></div>

时钟的一些外观设定:

var width = 260; // 桌布宽度
var height= 260; // 桌布高度
var dot = {
	x : width / 2,
	y : height / 2,
	radius : 6
}; // 圆点位置、半径
var radius = 120; // 圆半径
var borderWidth = 6; // 圆边框宽度
8643次阅读,4条评论

[译文]ECMAScript 5严格模式(Strict Mode)

10年前

严格模式(Strict Mode)是ECMAScript 5的新特性,它允许你把整个程序,或者某个函数,放置在“严格”的操作语境中。这种严格的语境会防止某些特定的操作并抛出更多的异常。

虽然ECMAScript 5对ECMAScript 3是向下兼容的,但是在严格模式下,所有在ECMAScript 3中不赞成使用的特性都被禁用(或抛出错误)而不是兼容。

启用严格模式有以下好处:

  • 捕获一些编程错误,并抛出异常。
  • 阻止进行一些相对“不安全”的操作(例如访问全局变量),抛出异常。
  • 禁用一些让人迷惑的特性。

关于严格模式的大多数信息都可以在《ES5规范》[PDF]的第223页找到。

(注意:ECMAScript 5的严格模式跟Firefox的严格模式是不同的)

如何启用严格模式

在程序的开头添加这条语句即可对整段脚本启用严格模式:

'use strict';
1900次阅读,2条评论

GO比分开发总结

10年前

最近一直在忙公司的第一款类客户端产品——GO比分

GO比分

网页具有强大的跨平台特性,HTML+CSS比任何其他界面制作方式都要强大和灵活。然而,网页无法实现Web范围外的一些功能(例如手机通知栏、铃声、震动等)。因此,还需要通过一个代理去调用,也就是客户端。所谓类客户端,就是穿了客户端这件“马甲”的网页

1589次阅读,12条评论

多余的逗号

11年前

JSON

在JSON格式中,逗号是多个属性键值对间的分隔符,例如:

var json = { id: 1, name: 'heero' };

但在编程的时候,很容易会画蛇添足,在最后一对键值对后也加上了逗号

var json = { id: 1, name: 'heero', };

在这种情况下,IE6、7会报错,但IE8以及其他浏览器则没有问题。

1452次阅读,2条评论

Array的push与unshift方法性能分析

11年前

Array的pushunshift方法都能给当前数组添加元素,不同的是,push是在末尾添加,而unshift则是在开头添加。从原理就可以知道,unshift的效率是较低的。原因是,它每添加一个元素,都要把现有元素往下移一个位置。但到底效率差异有多大呢?下面来测试一下。

测试环境的主要硬件:CPU T7100(1.8G);内存4G DDR2 667;硬盘5400转。主要软件:操作系统为Windows 7;浏览器为Firefox 3.6.9。测试代码:

var arr = [ ], s = +new Date;

// push性能测试
for (var i = 0; i < 50000; i++) {
  arr.push(i);
}

console.log(+new Date - s);

s = +new Date;
arr = [ ];

// unshift性能测试
for (var i = 0; i < 50000; i++) {
  arr.unshift(i);
}

console.log(+new Date - s);
1475次阅读,2条评论

前端JavaScript模板引擎

11年前

说起模板,很多人会认为这是后台的东西(如PHP的Smarty、Java的Velocity),跟前端没有关系。然而,随着前端的逻辑变得越来越复杂,引入模板引擎已经是非常必要了。

模板引擎的主要功能就是把变化的数据融入到不变的模板中,并生成最终结果。目前,前端的主要数据格式无非是XMLJSON

如果选择XML作为数据格式,XSLT就是最佳的模板语言,但XML+XSLT的缺点非常明显:

  • 兼容性问题。XML+XSLT在不同浏览器下的转换方式有所不同。
  • XML、XSLT的语法都是极其冗余的,数据量相对较大。

如果选择JSON作为数据格式,就没有原生的模板语言可用了,只能生拼字符串。例如,把下面代码中的data转换成一个表格:

var data = [
	{ id : 1, name : 'Google', url : "google.com" },
	{ id : 2, name : '百度', url : "baidu.com" },
	{ id : 3, name : '有道', url : "youdao.com" }
], html = [ ];

html.push('<table>');
for (var i = 0; i < data.length; i++) {
	html.push('<tr>');
	html.push('<td>', data[i].id, '</td>');
	html.push('<td><a href="http://', data[i].url, '" target="_blank">', data[i].name, '</a></td>');
	html.push('</tr>');
}
html.push('</table>');

document.write(html.join('\r\n'));
4733次阅读,7条评论

再论JavaScript的类继承

11年前

说到JavaScript的类继承,就必然离不开原型链,但只通过原型链实现的继承有着不少缺陷。

无参数类继承的问题

先看一段示例代码,实现B继承于A:

function A() {
}
A.prototype.a1 = function() { };

function B() {
}
B.prototype = new A();
B.prototype.b1 = function() { };

var b = new B();
alert(b.constructor == A); // true
alert(b.constructor == B); // false

这段代码的主要问题是:

  • 需要实例化A作为B的原型,此时就执行了A的构造函数。但按照面向对象的规则,实例化B之前,B及其父类A的构造函数都不应该执行
  • 更改了B的prototype,导致b.constructor不是B而是A
706次阅读,2条评论

Opera下的max-width BUG

11年前

昨晚着手给个人博客增加网易微博的调用,在Opera下却出现了一个意想不到的问题。内容的展示,一开始是做成横向不间断滚动(现在已经改成纵向定时滚动了)。

不间断滚动的原理这里不详细说了,其中一个必要的条件是,进行滚动的内容容器要设置得很宽,这样才能使内容排在一行。一般情况下,几千像素也够了,但是微博的信息可能很长,况且一读就有好几十条,这宽度非得设成几万像素不可。

虽然数字比较大,但是在Firefox、IE中测试过后也是没问题的,唯独是Opera下出现了悲剧:

Dragonfly

665次阅读,2条评论

HTML在线编辑器的实现难点

11年前

HTML在线编辑器实际上是什么

其实有好几种实现方式,目前用得最多、兼容性最好的还是iframe方式。

<iframe src="" frameborder="0"></iframe>

只有这个空iframe是不行的,还要用Javascript把它设成可编辑:

iframe.contentWindow.document.designMode = "on";
iframe.contentWindow.document.contentEditable = true;

换而言之,HTML在线编辑器就是一个可编辑的iframe

2712次阅读,6条评论