CrossYou'Blog » Web前端 http://www.crossyou.cn Since 1987 Mon, 14 May 2012 15:37:28 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Google的html/css规范指南 http://www.crossyou.cn/googles-html-css-specification-guide.htm http://www.crossyou.cn/googles-html-css-specification-guide.htm#comments Mon, 14 May 2012 15:37:28 +0000 CrossYou http://www.crossyou.cn/?p=412 常规样式规则

协议

引入的assets资源文件（js、css、图片文件）忽略协议（http:, https:），比如：

不推荐的写法：

<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

推荐的写法：

<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

不推荐的写法：

.example {
  background: url(http://www.google.com/images/example);
}

推荐的写法：

.example {
  background: url(//www.google.com/images/example);
}

关于google的这点建议，有兴趣的朋友看http://stackoverflow.com/questions/4831741/can-i-change-all-my-http-links-to-just，里面有详细的讨论，根据一位网友的测试，相对url在IE7、IE8下存在二次加载的问题。

常规格式规则

缩进

使用二个空格缩进

<ul>
  <li>Fantastic</li>
  <li>Great</li>
</ul>
.example {
  color: blue;
}

大写

只使用小写。

所有的代码只使用小写字母（PS:淘宝的做法是如果跟js的DOM操作相关，作为钩子使用J_Trigger类似的方式）：包括元素名称、样式名、属性名（除了text/CDATA）。

不推荐的写法：

<A HREF="/">Home</A>

推荐的写法：

<img src="google.png" alt="Google" />

尾部空白

删掉冗余的行尾空格。

不推荐的写法：

What?_

推荐的写法：

Yes please.

常规Meta规则

编码

使用utf-8编码。

指定页面的文档编码为utf-8

<meta charset="utf-8">

不需要特别指定样式引用的编码为utf-8。

（ps：关于html编码指定方面的内容，可以看《 Character Sets & Encodings in XHTML, HTML and CSS》）

注释

如果可能，注释还是必不可少的。

使用注释说明下代码：它包括了什么，它的目的是什么，为什么优先使用它。

行动项目

Google建议养成写TODO的习惯，特别是在项目中，记录下一些要改，但来不及修改的地方，或指派其他同事做修改。

高亮TODO，不同的编辑器有不一样的方式，比如idea是TODO:。

{# TODO(john.doe): revisit centering #}
<center>Test</center>
<!-- TODO: remove optional tags -->
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>

常规html设计规则

文档类型

使用html5文档声明：

<!DOCTYPE html>

不再使用XHTML（ application/xhtml+xml）。

HTML 的正确性

可以使用一些工具，检验你html的正确性，比如 W3C HTML validator。

不推荐的写法：

This is only a test.

推荐的写法：

<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

HTML 的语义性

使用富含语义性的标签（ps:建议掌握html5新增的部分语义标签）。

Google特别指出了要确保html的可用性，看下面的代码

不推荐的写法：

<div onclick="goToRecommendations();">All recommendations</div>

推荐的写法：

<a href="recommendations/">All recommendations</a>

多媒体元素降级处理

给多媒体元素，比如canvas、videos、 images增加alt属性，提高可用性（特别是常用的img标签，尽可量得加上alt属性，提供图片的描述信息）。

不推荐的写法：

<img src="spreadsheet.png">

推荐的写法：

<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

html、css、javascript三层分离

尽可能保持结构（html结构标签）、描述（css）、行为（javascript）的分离，并且让他们尽可能少的交互。确保html文档内容只有html的结构，将css和javascript以资源的方式引入。

不推荐的写法：

<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML sucks</h1>
<p>I’ve read about this on a few sites but now I’m sure:
<u>HTML is stupid!!1</u>
<center>I can’t believe there’s no way to control the styling of
my website without doing everything all over again!</center>

推荐的写法：

<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
<p>I’ve read about this on a few sites but today I’m actually
doing it: separating concerns and avoiding anything in the HTML of
my website that is presentational.
<p>It’s awesome!

实体引用

在html页面中避免使用实体引用。

如果你的文件是utf-8编码，就不需要使用像 —, ”, or ☺的实体引用。

不推荐的写法：

The currency symbol for the Euro is “&eur;”.

推荐的写法：

The currency symbol for the Euro is “€”.

可选的标签

忽略一些可选的标签，比如

不推荐的写法：

<!DOCTYPE html>
<html>
<head>
<title>Spending money, spending bytes</title>
</head>
<body>
<p>Sic.</p>
</body>
</html>

推荐的写法：

<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

html5的文档，可以忽略head、body标签。

所有可忽略的标签，可以看《 HTML5 specification 》，

type属性

样式和脚本引用可以忽略type属性。

不推荐的写法：

<link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css">

推荐的写法：

<link rel="stylesheet" href="//www.google.com/css/maia.css">

不推荐的写法：

<script src="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script>

推荐的写法：

<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

html格式规则

常规格式

每一块、每一列表、每一表格元素都需要另起一行，并缩进每个子元素。

<blockquote>
<p><em>Space</em>, the final frontier.</p>
</blockquote>
<ul>
<li>Moe
<li>Larry
<li>Curly
</ul>
<table>
<thead>
<tr>
<th scope="col">Income</th>
<th scope="col">Taxes</th>
<tbody>
<tr>
<td>$ 5.00</td>
<td>$ 4.50</td>
</table>

css样式规则

css验证

尽可能验证css的合法性，可以使用 W3C CSS validator。

id和class名

使用富有含义和通用的id和class名。 使用功能性和通用性的命名方式减少文档或模板的不必要的改动。 不推荐的写法：

/* Not recommended: meaningless */
#yee-1901 {}

/* Not recommended: presentational */
.button-green {}
.clear {}

推荐的写法：

/* Recommended: specific */
#gallery {}
#login {}
.video {}

/* Recommended: generic */
.aux {}
.alt {}

id和class的命名风格

id和class的命名在保持语义性的同时尽可能的短。

不推荐的写法：

#navigation {}
.atr {}

推荐的写法：

#nav {}
.author {}

可以缩写单词，但缩写后务必能让人明白其含义。比如author缩写成atr就非常费解。

选择器

避免出现多余的祖先选择器。（存在性能上的差异问题，可以看 performance reasons）

避免出现元素标签名作为选择器的一部分。

不推荐的写法：

ul#example {}
div.error {}

推荐的写法：

#example {}
.error {}

简化css属性写法

不推荐的写法：

border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

推荐的写法：

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

使用简洁的属性写法有利于提高可读性和解析效率。

0和单位

属性值为0时，忽略单位。

margin: 0;
padding: 0;

属性值出现小数点忽略0

font-size: .8em;

url的引用

使用url()时忽略刮号中的””。

@import url(//www.google.com/css/go.css);
16进制符号

不推荐的写法：

color: #eebbcc;

推荐的写法：

color: #ebc;

前缀

给选择器样式名增加前缀（可选）。

在大的项目（多人协作）中使用前缀可以减少样式冲突，同时可以明确选择器归属含义。

.adw-help {} /* AdWords */
#maia-note {} /* Maia */

id和class名的分隔符

单词使用“-”来连接。

不推荐的写法：

/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}

/* Not recommended: uses underscore instead of hyphen */
.error_status {}

推荐的写法：

#video-id {}
.ads-sample {}

Hacks

尽可能地避免使用hack的方式解决浏览器样式兼容性问题。

尽量避免使用CSS filters。

css格式规则

css属性按字母顺序书写

（PS：排序忽略浏览器前缀，比如-moz-，-webkit-）

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

块内容缩进

@media screen, projection {

  html {
    background: #fff;
    color: #444;
  }

}

缩进所有的块状内容。

不可缺少的;

不推荐的写法：

.test {
  display: block;
  height: 100px
}

推荐的写法：

.test {
  display: block;
  height: 100px;
}

属性值前增加个空格

不推荐的写法：

h3 {
  font-weight:bold;
}

推荐的写法：

h3 {
  font-weight: bold;
}

分隔选择器

不推荐的写法：

a:focus, a:active {
  position: relative; top: 1px;
}

推荐的写法：

h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

1行只有一个css属性，二个规则间有一个空行

html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

相关文章

]]> http://www.crossyou.cn/googles-html-css-specification-guide.htm/feed 0 关于javascript数组去重的性能测试 http://www.crossyou.cn/javascript-array-to-re-performance-testing.htm http://www.crossyou.cn/javascript-array-to-re-performance-testing.htm#comments Sat, 28 Apr 2012 07:43:41 +0000 CrossYou http://www.crossyou.cn/?p=406 本文继上一篇文章《Javascript数组去重 方法总结》所写，本文主要讲一下上篇文章所写的数组去重方法的性能问题，主要讨论一下那种方法性能最优。

关于javascript的数组去重方法，某人刚才也提供了一种方法，经测试性能上有不少优势，特贴代码如下：

// --- someone  renenglish---
function someone_uniq(a,strict){
	var o = {},
		arr = [],
		key;
	for(var i = 0; i < a.length; ++i){
		key = a[i];
		if(strict){
			if(typeof(a[i]) == 'number'){
				key = a[i]+'.number';
			}
			if(typeof(a[i]) == 'string'){
				key = a[i]+'.string';
			}
		}
		if(!o[key]){
			o[key] = true;
			arr.push(a[i]);
		}
	}
	return arr;
};

该方法，与怪飞的方法，性能上几乎不相上下，但经多次测试发现，及大数组的测试下也能看出该方法比之怪飞的方法还是稍微差了那么一点点，不过比我第一次写的要快30倍左右。

下面s是jQuery中的数组去重方法:jQuery.unique(),我做了一下简单的改写，以方便在此处直接使用，代码如下所示：

//jQuery中的数组去重方法，不太适于测试，性能啊性能，难道真的这么差吗?
function jquery_unique(arg){
	var arg = arg.sort();
	for ( var i = 1, j = arg.length; i < j; i++ ) {
		if ( arg[i] === arg[ i - 1 ] ) {
			arg.splice( i--, 1 );
		}
	}
	return arg;
}

该方法的思路：
对数组排序，判断相邻的值是否相等
如果相等，则用splice()删除相等的元素
恩，不过该方法的性能实在不敢恭维，我在FF下处理一个长度1000的数组，浏览器就直接死掉，而之前写的方法，均可以处理长度100000的数组，这…

最后是QWrap框架中的快速去重法，因代码有点长，不在此处贴代码了，可直接到测试页面中测试其性能。

最后，附上一个比较直观的性能测试页面：
http://static.crossyou.cn/study/js-array-no-repeart-tester.html

相关文章

]]> http://www.crossyou.cn/javascript-array-to-re-performance-testing.htm/feed 2 Javascript数组去重 方法总结 http://www.crossyou.cn/javascript-no-repeat-method.htm http://www.crossyou.cn/javascript-no-repeat-method.htm#comments Fri, 27 Apr 2012 16:15:34 +0000 CrossYou http://www.crossyou.cn/?p=405 如果什么都不去参考，只给我一个编辑器的话，让我实现去除javascript数组中重复元素的方法的话，我会这么写：

var test_array = [1, 1, 2, 2, 3, 'a', 'a', '2', '3'];

/**
 * javascript数组去重方法
 * @param  {Array} arg [所要去重的数组]
 * @return {Array}     [去重后新的数组]
 */
function no_repeat_1(arg){
	var _arg = [];
	var _len = arg.length;
	for(var i = 0; i < _len; i++){
		if(in_array(arg[i], _arg, true)){
			continue;
		}
		_arg.push(arg[i]);
	}
	return _arg;
}

/**
 * 检查数组中是否存在某个值
 *
 * @param  {Mixed} needle [给定的某个元素]
 * @param  {Array} haystack [所要查找的数组]
 * @param  {Boolean} strict [如果为true 则会检查 needle 的类型是否和 haystack 中的相同]
 * @return {Boolean} [在 haystack 中搜索 needle ，如果找到则返回 TRUE，否则返回 FALSE]
 */
function in_array(needle, haystack, strict){
	if(typeof needle == undefined || typeof haystack == undefined){
		return false;
	}
	var len = haystack.length;
	for(var i = 0; i < len; i++){
		if(strict){
			if(needle === haystack[i]){
				return true;
			}
		} else {
			if(needle == haystack[i]){
				return true;
			}
		}
	}
	return false;
}

console.log(no_repeat_1(test_array));

我思路主要是这样的：

首先遍历这个要去重的数组，然后用in_array()方法判断，当前元素是否已经存在于当前的临时数组_arg中，如果存在，则continue跳过，否则，push当前的这个元素到_arg这个数组中，遍历完成之后，返回这个临时数组_arg，即为去重后的数组。

注：我写的这个in_array() 方法第三个参数如果为true ，则会检查元素的类型是否相同。

恩，就是这样的，这是我首先想到的一个方法。

不过，我想应该还要更好的方法，好吧，接下来，我就分析一下从网络中找的一些数组去重的方法。

下面是YUI中的源码：

var test_array = [1, 1, 2, 2, 3, 'a', 'a', '2', '3'];

var toObject = function(a) {
	var o = {};
	for (var i = 0, j=a.length; i < j; i = i+1) {// 这里我调整了下, YUI源码中是i<a.length
		o[a[i]] = true;
	}
	return o;
};
var keys = function(o) {
	var a=[], i;
	for (i in o) {
		if (o.hasOwnProperty(i)) {// 这里, YUI源码中是lang.hasOwnProperty(o, i)
			a.push(i);
		}
	}
	return a;
};
var yui_uniq= function(a) {
	return keys(toObject(a));
};

console.log(yui_uniq(test_array));

该方法的思路：见《巧妙去除数组中的重复项》

1. 先以目标数组的值为key生成一个对象. 这一步是最核心的: 因为在一个对象中, key是无法重复的, 这样就很巧妙的排除了重复值;

2. 遍历生成的对象, 将这些key取出来放到一个数组中, OK, 到此就大功告成了!(简单吧, 只需两步就行)

该方法的特点：

1. 对于该方法, 不论数组有多少项, 都只会遍历两次, 在性能上的优势较明显(想想自己以前的做法: 对数组项进行逐个对比, 其性能之差, 可想而知).

2. 经我的测试, 该方法只适用于数组项为字符串, 数字的一维数组(我觉得, 对多维数组进行排除重复项的操作, 实在是太杯具了!).

来看看 怪飞的写法：

var test_array = [1, 1, 2, 2, 3, 'a', 'a', '2', '3'];

var planabc_uniq = function (arr) {
	var a = [],
		o = {},
		i,
		v,
		cv, // corrected value
		len = arr.length;

	if (len < 2) {
		return arr;
	}

	for (i = 0; i < len; i++) {
		v = arr[i];

		/* closurecache 提供的函数中使用的是  cv = v + 0;，
		 * 这样就无法辨别类似[1, 10, "1", "10"]的数组，
		 * 因为运算后 => 1, 10, 10, 100，很明显，出现了重复的标示符。
		 * 加前面就难道没问题吗？
		 * 有的：数组中不能出现类似01 、001，以 0 开头的数字，
		 * 但适用性比原先更广。
		 */
		cv = 0 + v;

		if (!o[cv]) {
			a.push(v);
			o[cv] = true;
		}
	}
	return a;
}

console.log(planabc_uniq(test_array));

该方法的特点是：只用一次循环便完成了删除数组中重复项，性能远高于YUI的写法。

恩，下面稍微的改进了一下第一种方法：

var test_array = [1, 1, 2, 2, 3, 'a', 'a', '2', '3'];

if(!Array.prototype.indexOf) {
	Array.prototype.indexOf = function (obj, fromIndex) {
		if (fromIndex == null) {
			fromIndex = 0;
		} else if (fromIndex < 0) {
			fromIndex = Math.max(0, this.length + fromIndex);
		}

		for (var i = fromIndex; i < this.length; i++) {
			if (this[i] === obj)
				return i;
		}
		return -1;
	};
}

function no_repeat_2(arg){
	var _arg = [];
	for(var i = 0; i < arg.length; i++){
		if(_arg.indexOf(arg[i]) != -1){
			continue;
		}
		_arg.push(arg[i]);
	}
	return _arg;
}

console.log(no_repeat_2(test_array));

简单分析上面的几种方法，我觉得我写的第一种方法，性能上没啥优势，只能说思路清晰，很易懂，具体性能那个好，明天我会写个测试页面专门测试一下他们的执行效率。

相关文章

]]> http://www.crossyou.cn/javascript-no-repeat-method.htm/feed 1 CSS Hack 整理总结 http://www.crossyou.cn/css-hack-finishing-summary.htm http://www.crossyou.cn/css-hack-finishing-summary.htm#comments Thu, 26 Apr 2012 02:58:11 +0000 CrossYou http://www.crossyou.cn/?p=399 有关CSS的Hack，网络中不胜枚举，写此文也算是一个学习笔记，虽平时用的不多，但真用的时候却还要去网络中搜寻，倒不如整理到自己的博客里来，方便自己查阅学习。

各种浏览器不断更新升级换代，即使是同一浏览器，在不同版本下的CSS表现也不尽相同，我也将会在工作以及业余页面制作中遇到的此类hack问题持续更新到本文，分享给读者，同时也是自己一个不断学习的过程。

读者可以到我整理的《主流浏览器CSS Hack大全》详情介绍页中测试查看学习。

如需了解更多可以去阅读下面来自 幸福收藏夹 的一些文章：

《打败 IE 的葵花宝典：CSS Bug Table》
《说说CSS Hack 和向后兼容》
《CSS Hack For All A-grade Browsers》
《CSS Hack: 区分 IE6 / IE7 /IE8 /Firefox》

相关文章

]]> http://www.crossyou.cn/css-hack-finishing-summary.htm/feed 1 jquery-tinyLightbox-plugin简单讲解 http://www.crossyou.cn/jquery-tinylightbox-plugin.htm http://www.crossyou.cn/jquery-tinylightbox-plugin.htm#comments Tue, 24 Apr 2012 16:10:47 +0000 CrossYou http://www.crossyou.cn/?p=395 话说这是我目前博客中所使用的一个图片高亮弹出插件，只因功能单纯，代码短小，用着不错，写篇博文，简单总结一下。

效果如下图：

tinyLightbox中文使用讲解演示

tinyLightbox中文使用讲解演示

该插件的作用具体作用就是：当鼠标单击上图的第一张图片时，页面将会变成如下效果：高亮显示你所单击的图片。

这是插件效果图

这是插件效果图

有关该插件的使用详情，可到《tinyLightbox中文使用讲解》页面中查看。

相关文章

]]> http://www.crossyou.cn/jquery-tinylightbox-plugin.htm/feed 1 Javascript原生全屏API http://www.crossyou.cn/native-fullscreen-javascript-api.htm http://www.crossyou.cn/native-fullscreen-javascript-api.htm#comments Mon, 23 Apr 2012 06:10:10 +0000 CrossYou http://www.crossyou.cn/?p=393 HTML5中的<video>是一个相当不错的标签，然而在它刚发布的时候一个最大的问题就是它不能像Flash那样实现真正意义上的全屏，幸好接下来的几个月各大浏览器开始原生支持全屏。

我花了一些时间在 MediaElement.js HTML5 video player 中通过不同的方式来实现浏览器全屏，它在 Safari 5.1+, Chrome Canary Chrome 15+, Firefox Nightly(到about:config中设置full-screen-api.enabled= true)，并且计划在Firefox10中原生实现这个接口。下面，我将试着解释一下这个API的支持情况，你也可以自己试着修改下面的代码进行测试。

Simple Demo

Video Demo

浏览器全屏API简史

1、第一个实现浏览器原生全屏API的是在Safari 5.0（和iOS）中添加的webkitEnterFullScreen()函数，不过它只能在Safar的<video>标签的controls中(参见： Apple’s HTML5VideoElement)。

2、在Safari 5.1中，苹果更新了这个API使它更接近于Mozilla的全屏API草案(实际上这要比苹果实现的更早)，现在，所有的DOM元素都可以调用webkitRequestFullScreen()函数使HTML页面进入到全屏模式。

3、Firefox和Chome宣布它们将会添加原生的全屏API支持，而且这个特性已经在Chome 15+以及Firefox Nightly(Firefox10+)中实现,Mozilla团队已经发布了一些演示。

4、在2011年10月15日，W3C发布了一份全屏API草案（由Opera团队的一名成员编写），它跟Mozilla的草案有两个主要的不同点：

  1. Mozilla/Webkit使用大写字母’S'（FullScreen），但W3C则不是（Fullscreen）
  2. Mozilla/Webkit使用cancelFullScreen，W3C使用exitFullscreen

5、更新 (11/15/2011)：来自 IEBlog的Ted Johnson说IE10将不会支持全屏API (12/05/2011: 我对Ted的第一封email理解错了)IE10的开发团队还没有决定是否要实现全屏API。不过，他指出：Win8的 Metro风格的Internet Explorer始终是全屏状态，正如以前那样，按F11键即可进入全屏模式。

理解浏览器全屏API

这里是全屏API在不同浏览器中所记录的最重要的部分，一般情况下，下面的例子我都是使用Mozilla/Webkit进行代码的编写，但在必要的地方我也注意到了w3c的差异。

1、检测全屏支持

为了检测浏览全屏支持，你你需要使用typeof检测浏览器是否支持全屏API的方法，同时这也有一个fullScreenEnabled的属性，它将会告诉你是否禁用了该功能(奇怪的是如果禁用的该功能WebKit 就没有fullScreenEnabled这个属性，这将使检测变的困难)

// Mozilla's proposed API: in practice, you'll need vendor prefixes (see examples below)
if (typeof document.cancelFullScreen != 'undefined' && document.fullScreenEnabled === true) {
    /* do fullscreen stuff */
}

2、进入和退出全屏

要进入全屏模式，可以调用需要进入全屏元素的requestFullScreen（或者W3C的 requestFullscreen）方法。。要退出全屏，则调用document对象的cancelFullScreen（或者W3C的exitFullscreen）方法。

// mozilla proposal
element.requestFullScreen();
document.cancelFullScreen(); 

// Webkit (works in Safari and Chrome Canary)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen(); 

// Firefox (works in nightly)
element.mozRequestFullScreen();
document.mozCancelFullScreen(); 

// W3C Proposal
element.requestFullscreen();
document.exitFullscreen();

Mozilla还提供了一个备用的requestFullScreenWithKeys()方法让用户可以通过键盘进入全屏模式。在Flash中，Adobe一直在全屏状态时禁止键盘支持，以防止恶意网站试图窃取密码，但浏览器制造商似乎正考虑使之成为一个可选设置。

3、浏览器全屏事件和当前状态

要检测全屏事件的发生，可以监听元素的fullscreeneventchange事件，而document的布尔属性fullScreen会指明当前是否全屏状态。

element.addEventListener('fullscreeneventchange', function(e) {
    if (document.fullScreen) {
       /* make it look good for fullscreen */
    } else {
       /* return to the normal state in page */
    }
}, true);

Mozilla也提到在将来增加一个fullscreendenied事件。另外，Webkit在全屏布尔属性的名字上加了’Is’,但是w3c草案没有包括这个属性。

4、浏览器全屏样式

Mozilla和W3C都提供了新的伪CSS类来装饰元素的全屏模式。

/* normal state */
.my-container {
    width: 640px;
    height: 360px;
}

/* Mozilla proposal (dash) */
.my-container:full-screen {
    width:100%;
    height:100%;
}

/* W3C proposal (no dash) */
.my-container:fullscreen {
    width:100%;
    height:100%;
}

/* currently working vendor prefixes */
.my-container:-webkit-full-screen, .my-container:-moz-full-screen {
    width:100%;
    height:100%;
}

5、嵌套的浏览器全屏
当你使用Flash的<object>、<embed>从其他站点嵌入内容（比如一个YouTuBe视频）是，你可以指定是否允许它们全屏。这个特性也通过allowFullScreen属性添加到<iframe>标签。

<!-- content from another site that is allowed to use the fullscreen command -->
<iframe src="http://anothersite.com/video/123" width="640" height="360" allowFullScreen></iframe>

最终代码如下:

为了使其在当前状态下工作，你需要封装代码以检测浏览器对全屏API的支持情况，下面我将可以在Safari 5.1, Chrome Canary Chrome 15+, and Firefox Nightly运行的代码合并在了一起，我将会不断更新。

(function() {
    var fullScreenApi = {
            supportsFullScreen: false,
            isFullScreen: function() { return false; },
            requestFullScreen: function() {},
            cancelFullScreen: function() {},
            fullScreenEventName: '',
            prefix: ''
        },
        browserPrefixes = 'webkit moz o ms khtml'.split(' ');

    // check for native support
    if (typeof document.cancelFullScreen != 'undefined') {
        fullScreenApi.supportsFullScreen = true;
    } else {
        // check for fullscreen support by vendor prefix
        for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
            fullScreenApi.prefix = browserPrefixes[i];

            if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
                fullScreenApi.supportsFullScreen = true;

                break;
            }
        }
    }

    // update methods to do something useful
    if (fullScreenApi.supportsFullScreen) {
        fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';

        fullScreenApi.isFullScreen = function() {
            switch (this.prefix) {
                case '':
                    return document.fullScreen;
                case 'webkit':
                    return document.webkitIsFullScreen;
                default:
                    return document[this.prefix + 'FullScreen'];
            }
        }
        fullScreenApi.requestFullScreen = function(el) {
            return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
        }
        fullScreenApi.cancelFullScreen = function(el) {
            return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
        }
    }

    // jQuery plugin
    if (typeof jQuery != 'undefined') {
        jQuery.fn.requestFullScreen = function() {

            return this.each(function() {
                if (fullScreenApi.supportsFullScreen) {
                    fullScreenApi.requestFullScreen(this);
                }
            });
        };
    }

    // export api
    window.fullScreenApi = fullScreenApi;
})();

上面的代码创建了一个名叫fullScreenApi的对象，拥有一个supportsFullScreen属性和其他一些通用的方法，下面是一段示例代码：

if (fullScreenApi.supportsFullScreen) {
    myButton.addEventListener('click', function() {
        fullScreenApi.requestFullScreen(someElement);
    }, true);
}

翻译自：http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

相关文章

]]> http://www.crossyou.cn/native-fullscreen-javascript-api.htm/feed 0 Javascript:使用Web代理实现XMLHttpRequest跨域访问 http://www.crossyou.cn/howto-proxy.htm http://www.crossyou.cn/howto-proxy.htm#comments Sun, 22 Apr 2012 15:00:48 +0000 CrossYou http://www.crossyou.cn/?p=387 XMLHttpRequest对象(在IE中也称作XMLHTTP对象)是当今最令人兴奋的AJAX Web应用程序的核心。但实际上使用这个对象书写的客户端web应用程序在通过web浏览器进行跨域访问时面临的安全限制性因素而变的非常棘手。这篇文章以简单易于理解的语言描述了这个问题，并提供了一个可行的解决方案：来自你的web服务器请求像雅虎的web服务API网络请求的web代理。

为什么需要代理

用PHP代理访问雅虎的Web服务

其他解决方案

了解更多信息

为什么需要代理

所有现代的Web浏览器在网络连接上增加了安全性的限制，其中包括XMLHttpRequest调用。可中安全性限制可以防止脚本或应用程序访问和操作另外一个域的属性和方法(在IE浏览器中的首选参数中如果该选项被设置为可用，则允许跨域请求)。如果你的Web应用程序和应用程序所需的XML数据都是来自同一个服务器，则不会有这种限制。

然而，如果你要为你的web应用程序提供其他服务器上的服务，例如，雅虎的Web服务，那么浏览器将会阻止这种访问
。

这里有不少解决这个问题的方案，但最常用的是在你的Web服务器上使用代理，这样你就不需要使用XMLHttpRequest对象直接访问雅虎的Web服务，而是去访问你的web服务器上的代理服务，这个代理可以根据你的请求去调用雅虎的Web服务，并将请求返回的数据返回到客户端，因为XMLHttpRequest请求的是你自己的服务器，因此就不会存在浏览器的安全性限制问题。

出于安全因素，在你web服务器上使用代理访问服务应该使用有所限制的，一个连接到任何网站的URL的开发代理是很容易被滥用的。虽然很难限制只用你的应用程序连接到代理，但是你可以在代理服务器上指定代理所能访问的服务.

用PHP代理访问雅虎的Web服务

在JavaScript Developer Center提供了一段用PHP写的简单web代理，它是用来代理访问雅虎的搜索服务API的,你可以将这段简单的Web代理代码拷贝到你Web服务的的任意方便的位置，前提是你的Web服务可以运行PHP程序。

define ('HOSTNAME', 'http://search.yahooapis.com/');

more complete XMLHttpRequest code sample

然后你的客户端就可以像下面这样使用XMLHttpRequest进行访问了

// The web services request minus the domain name
var path = 'VideoSearchService/V1/videoSearch?appid=YahooDemo&query=madonna&results=2';

// The full path to the PHP proxy
var url = 'http://localhost/php_proxy_simple.php?yws_path=' + encodeURIComponent(path);
... // core xmlhttp code
xmlhttp.open('GET', url, true);

其他解决方案

除了使用Web代理可以传输web服务数据到你的web应用程序，这里还用几种绕过浏览跨域访问限制的方法：

1，使用apache的 mod_rewrite or mod_proxy模块转发对你服务器的请求到其他服务器。

2，使用JSON和动态的<script>标签来代替XMLHttpRequest，也就是所谓的JSONP。

3，Digitally sign your scripts，这种方式只在Firefox浏览器中可以使用，其他浏览器不可用。

了解更多信息

想对JavaScript, XMLHttpRequest, Yahoo! Web Services APIs以及其他javascript开发的话题，访问The Yahoo! Developer Network JavaScript Developer Center.

英文地址：http://developer.yahoo.com/javascript/howto-proxy.html

翻译的不好，莫喷，实际上本文介绍的方法，也是笔者经常使用的一种方法，其实就是使用PHP中的CURL模块，在服务端模拟浏览器的请求动作实现服务的代理。

相关文章

]]> http://www.crossyou.cn/howto-proxy.htm/feed 0 mouseenter 和 mouseleave事件总结学习 http://www.crossyou.cn/mouseenter-and-mouseleave-event-summary-of-learning.htm http://www.crossyou.cn/mouseenter-and-mouseleave-event-summary-of-learning.htm#comments Sat, 21 Apr 2012 11:32:03 +0000 CrossYou http://www.crossyou.cn/?p=382 现在除IE系列支持mouseenter 和 mouseleave事件外，opera11+ 、firefox10+也支持mouseenter 和 mouseleave事件，同时它们也成为w3c DOM3 Event的规范，司徒正美的框架中有比较详细的说明哈。

话说这两个事件之前也遇到过，只是没太在意，至今别人提起的时候，才觉得这两个事件的重要性，身为Web前端开发人员，表示惭愧。

一般都是拿这两个事件和 mouseover、mouseout事件进行比较，两者最大的区别就是 mouseenter/mouseleave 不冒泡的事件，那么两者的这种不同之处的具体表现是什么？ 请观看下方Demo：

http://static.crossyou.cn/study/mouseenter-mouseleave-event.html

截图说明：

上图所示：为红A所处的div添加mouseenter 和 mouseleave事件，那么当鼠标从A的外面移入到B内部的过程中将会依次触发：

1、mouseenter事件

当鼠标从B内部移动到A外部区域的过程中将会依次触发：

1、mouseleave事件

上图所示：为红C所处的div添加mouseover和 mouseout事件，那么当鼠标从C的外部移入到D内部的过程中将会依次触发：

1、mouseover事件

2、mouseout事件

3、mouseover事件

而当鼠标从D内部移动到C外部区域的过程中则将会依次触发：

1、mouseout事件

2、mouseover事件

3、mouseout事件

可以看到mouseover和mouseout事件冒泡了，而mouseenter和mouseleave事件则没有冒泡。

相关文章

]]> http://www.crossyou.cn/mouseenter-and-mouseleave-event-summary-of-learning.htm/feed 0 Javascript 先进先出队列类 http://www.crossyou.cn/javascript-fifo-class.htm http://www.crossyou.cn/javascript-fifo-class.htm#comments Tue, 17 Apr 2012 05:56:25 +0000 CrossYou http://www.crossyou.cn/?p=379

队列，FIFO(First Input First Output) 一种先进先出的数据缓存器。

(function(){
	function Array_h(length){
		this.array = length === undefined ? [] : new Array(length);
	}
	Array_h.prototype = {
		/**
		 * 返回数组长度
		 *
		 * @return {Number} length [数组长度]
		 */
		length: function() {
			return this.array.length;
		},

		at: function(index) {
			return this.array[index];
		},

		set: function(index, obj) {
			this.array[index] = obj;
		},

		/**
		 * 向数组的末尾添加一个或多个元素，并返回新的长度。
		 *
		 * @param  {*} obj [description]
		 * @return {Number} length [新数组的长度]
		 */
		push: function(obj) {
			return this.array.push(obj);
		},

		/**
		 * 返回数组中选定的元素
		 *
		 * @param  {Number} start [开始索引值]
		 * @param  {Number} end [结束索引值]
		 * @return {Array} newArray  [新的数组]
		 */
		slice: function(start, end) {
			return this.array = this.array.slice(start, end);
		},

		concat: function(array) {
			this.array = this.array.concat(array);
		},

		remove: function(index, count) {
			count = count === undefined ? 1 : count;
			this.array.splice(index, count);
	    },

		join: function(separator) {
			return this.array.join(separator);
		},

		clear: function() {
			this.array.length = 0;
		}
	}

	/**
	 * 先进先出队列 (First Input First Output)
	 *
	 * 一种先进先出的数据缓存器
	 */
	function Queue(){
		this._array_h = new Array_h();
	};

	Queue.prototype = {
		_index: 0,

		/**
		 * 排队
		 *
		 * @param  {Object} obj [description]
		 * @return {[type]}     [description]
		 */
		push: function(obj) {
			this._array_h.push(obj);
		},

		/**
		 * 出队
		 *
		 * @return {Object} [description]
		 */
		pop: function() {
			var ret = null;
			if (this._array_h.length()) {
				ret = this._array_h.at(this._index);
				if (++this._index * 2 >= this._array_h.length()) {
					this._array_h.slice(this._index);
					this._index = 0;
				}
			}
			return ret;
		},

		/**
		 * 返回队列中头部(即最新添加的)的动态对象
		 *
		 * @return {Object} [description]
		 */
		head: function() {
			var ret = null, len = this._array_h.length();
			if (len) {
				ret = this._array_h.at(len - 1);
			}
			return ret;
		},

		/**
		 * 返回队列中尾部(即最早添加的)的动态对象
		 *
		 * @return {Object} [description]
		 */
		tail: function(){
			var ret = null, len = this._array_h.length();
			if (len) {
				ret = this._array_h.at(this._index);
			}
			return ret;
		},

		/**
		 * 返回数据队列长度
		 *
		 * @return {Number} [description]
		 */
		length: function() {
			return this._array_h.length() - this._index;
		},

		/**
		 * 队列是否为空
		 *
		 * @return {Boolean} [description]
		 */
		empty: function() {
			return (this._array_h.length() === 0);
		},

		clear: function(){
			this._array_h.clear();
		}
	};

	var queue = new Queue();

	queue.push('one');
	queue.push('two');
	queue.push('three');

	console.log(queue.head());// three
	console.log(queue.tail());// one
	console.log(queue.length());// 3

	queue.pop();

	console.log(queue.head());// three
	console.log(queue.tail());// two
	console.log(queue.length());// 2

	queue.clear()//清空队列数据

	console.log(queue.head());// null
	console.log(queue.tail());// null
	console.log(queue.length());// -1
})();

相关文章

]]> http://www.crossyou.cn/javascript-fifo-class.htm/feed 0 Sublime Text2 安装 Sublime Package Control http://www.crossyou.cn/sublime-text2-installation-sublime-package-control.htm http://www.crossyou.cn/sublime-text2-installation-sublime-package-control.htm#comments Sun, 15 Apr 2012 07:46:03 +0000 CrossYou http://www.crossyou.cn/?p=378 最近开始使用Sublime Text2 这款代码编辑软件，个人感觉就是软件小巧方便，漂亮代码高亮，众多的插件，并且跨平台，所以非常喜欢。

关于Sublime Package Control这款管理Sublime Text2插件的插件，安装非常的简单，只需要在Sublime Text2中执行它给出的那行安装命令即可完成安装，通过Sublime Package Control，可以安装、升级和卸载 Package。

安装 Package Control 的方法：

1、打开 Sublime Text 2，按下 Control + ` 调出 Console。

2、将以下代码粘贴进命令行中并回车。

import urllib2,os; pf=’Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20′)).read()); print ‘Please restart Sublime Text to finish installation’

3、重启 Sublime Text 2，在 Preferences -> Package Settings中见到Package Control这一项，就说明安装成功了。

4、用Package Control安装插件的方法：

按下Ctrl+Shift+P调出命令面板
输入install 调出 Install Package 选项并回车，然后在列表中选中要安装的插件。

官方地址：http://wbond.net/sublime_packages/package_control/installation

随机日志

]]> http://www.crossyou.cn/sublime-text2-installation-sublime-package-control.htm/feed 1