<link rel="apple-touch-icon" href="/custom_icon.png"/>
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

<link rel="apple-touch-startup-image" href="/startup.png">
<!-- for iPhone Retina Display high 适配高分辨率iPhone -->
<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
<!-- for iPad Landscape 适配iPad横屏 -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
<!-- for iPad Portrait 适配iPad竖屏 -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />

-webkit-box-shadow
-webkit-border-radius
-webkit-gradient

position:absolute;
position:relative;

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

-webkit-tap-highlight:rgba(0,0,0,0);

position:fixed;
overflow:scroll;
-webkit-overflow-scrolling: touch;

zepto：https://github.com/madrobby/zepto sxuijs：http://xuijs.com/ jqmobi: http://www.jqmobi.com/

var type = "update";
var task;
if (type === 'update') {
task = new taskManager.update();
}

if (type === 'read') {
task = new taskManager.read();
}

taskManager.factory = function (typeType) {
return new taskManager[typeType];
}

task = new taskManager[type];

var jQuery = function( selector, context ) {
// jQuery对象实际上就是一个“增强版的”init构造函数
return new jQuery.fn.init( selector, context, rootjQuery );
}

系列其他文章

• 解码jQuery系列4 – 函数作用域、jQuery连缀模式和jQuery.fn
• 解码jQuery系列3 – 原型
• 解码jQuery系列2 – 对象
• 解码jQuery系列1 - 变量和函数

需求：通过脚本动态修改script标签的src来载入一段外部脚本并执行
实现方式(#1)：

<script type="text/javascript" id="external-script">
</script>
<script type="text/javascript">
    document.getElementById('external-script').src='url2';
</script>

url2的内容如下：

alert('I am dynamic');

结果：

• Chrome: 什么事都没发生（没有请求url2）
• Firefox: 什么事都没发生（没有请求url2）
• IE9：什么事都没发生（请求url2但不执行url2的脚本）
• IE(6,7,8): I am dynamic(请求并执行了url2的脚本)

注意实现方式中，第一段的script标签中间是有内容的（空格、换行符以及回车符）。

如何来解释这个问题呢？要解释这个问题，我们来看两个变种的例子，第一个例子（明确内联内容)，如下所示（#2）：

<script type="text/javascript" id="external-script">
alert('I am inline');
</script>
<script type="text/javascript">
    document.getElementById('external-script').src='url2';
</script>

结果如下：

• Chrome: I am inline（没有请求url2）
• Firefox: I am inline（没有请求url2）
• IE9：I am inline（请求url2但不执行url2的脚本）
• IE(6,7,8): I am inline I am dynamic(请求并执行了url2的脚本)

再来看看第二个变种的例子(#3)：

<script type="text/javascript" id="external-script" src="url1">
    alert('I am inline script');
</script>
<script type="text/javascript">
    document.getElementById('external-script').src='url2';
</script>

其中url1的内容如下：

alert('I am url1');

结果如下：

• Chrome: I am url1（没有请求url2）
• Firefox: I am url1（没有请求url2）
• IE9：I am url1（请求url2但不执行url2的脚本）
• IE(6,7,8): I am url1 I am dynamic(请求并执行了url2的脚本)

首先这里肯定的是src属性是修改成功的，可以通过看dom的变化看到src已经设置进去了。这个时候我们比对这三个例子，思考几十秒。分析下这三个例子，其实#2和#1是一样的，这里用#2是为了说明#1中的空格、换行符以及回车符会被浏览器认为是内联的脚本。通过比对#2和#3，是不是会让你想到什么？没错，我们第一个会想到的就是：当script标签既有src属性又有内联脚本的时候浏览器该如何处理？ ， 先来解释这个问题。

一谈到浏览器应该怎样处理，就不得不翻出各种宝典，这次不再是葵花宝典了，而是九阴真经(W3C的HTML4标准)，标准中关于script标签的src部分有如下一段话：

If the src attribute is not set, user agents must interpret the contents of the element as the script. If the src has a URI value, user agents must ignore the element’s contents and retrieve the script via the URI

上面这段话的意思就是说：如果src没有设置，那么就执行内联脚本，如果src设置了浏览器就必须忽略内敛脚本而要去请求src指定的url的内容

这解释了为什么#3中标准浏览器（甚至IE6，7，8）都没有执行内联脚本（因为src设置了url1）。

搞清楚了这个基础问题之后，接下来问题就定位到了动态修改script的src属性的时候浏览器如何处理？ ，从结果来看，标准的浏览器都没有去请求url2（更改src无效），这回IE6，7，8终于犯傻了。当然了，咱们也不能随随便便说人家犯傻，要拿出证据，这个时候继续拿出九阴真经W3C的HTML5标准，其中有这样一句话：

Changing the src, type, charset, async, and defer attributes dynamically has no direct effect; these attribute are only used at specific times described below.

意思就是说：修改src是没用的，对src的处理只会在特定的时候进行（个人猜测就是第一次看到这个属性的时候浏览器会去做相应处理，之后就无视它了）。

好了，这下真相大白了：这解释了为啥#3和#1中除了IE6，7，8之外其他浏览器都没有去请求url2（IE9请求了，但没执行），而且实验发现IE6，7，8对动态修改src都会做请求执行处理。

最后，这个故事至少告诉我们：写script标签的时候千万别手贱打回车。

参考文档：

• HTML5标准文档
• HTML4标准文档

• block，对应块级元素
• inline，对应行内元素
• inline-block
• none

共同点

1.不和浮动元素重叠

<div style="float:left; border: 2px solid red"> 123</div>
<span style="border: 2px solid blue">
     The quick brown fox jumped over the lazy dog's back.
     The quick brown fox jumped over the lazy dog's back. 
     The quick brown fox jumped over the lazy dog's back.
     The quick brown fox jumped over the lazy dog's back. 
     The quick brown fox jumped over the lazy dog's back.
</span>​

<div style="float:left; border: 2px solid red"> 123</div>
<span style="border: 2px solid blue;display:block;overflow:hidden;*zoom:1">
     The quick brown fox jumped over the lazy dog's back.
     The quick brown fox jumped over the lazy dog's back. 
     The quick brown fox jumped over the lazy dog's back.
     The quick brown fox jumped over the lazy dog's back. 
     The quick brown fox jumped over the lazy dog's back.
</span>​

<img/>
<div>
 <h4>天涯魔鬼训练营</h4>
 <p>大将军 十八级</p>
</div>

2.清除元素内部浮动

.k2-fix-float:after{
 content:"\0020";
 display:block;
 height:0;
 clear:both;
}
.k2-fix-float{
 *zoom:1;
}

3.嵌套元素边距折叠问题的解决

不同点

1.hasLayout的元素被限制为一个矩形

2.hasLayout的元素设置display:inline后与inline-block行为类似

.k2-inline-block{
 display:-moz-inline-stack;
 display:inline-block;
 *display:inline;
 *zoom:1;
 vertical-align:middle;
 position:relative;/* 解决因为父容器{display:inline;}问题导致Firefox中li里面的链接不可点的bug */
 _position:static;/* 解决因为IE6中因为上一行代码带来在{position:relative}容器中移位在bug */
}

更多补充

3.绝对定位元素如果没有触发hasLayout带来的问题

4.滤镜是只适用于hasLayout的元素的

参考资料

• on having layout
• The IE6 Three Pixel Text-Jog
• CSS 101: Block Formatting Contexts
• Everything you Know about Clearfix is Wrong
• Block formating contexts, ‘hasLayout’ – IE Window vs CSS2.1 browsers: simulations
• "HasLayout" Overview
• Visual formatting model

存在的问题

<div class="outer">
 <section>
 <h1>title</h1>
 <p>text</p>
 </section>
</div>

<div class="outer">
 <h1>title</h1>
 <p>text</p>
</div>

解决方案

JavaScript解决方案

Namespace hack

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/">
<body>
 <html5:section>
 <!-- content -->
 </html5:section>
</body>
</html>

html5\:section {
 display: block;
}

Bulletproof技术（防弹衣技术）

<section>
<div class="section">
 <!-- content -->
</div></section>

.section {
 color: blue;
}

section {
 color: blue;
}

<div class="outer">
 <section>
<div class="section main">
 <!-- content -->
 </div></section>
</div>

反向的bulletproof技术

<div class="section">
<section>
 <!-- content -->
</section>
<div>

我的方案

<div class="content">
 <!-- content -->
</div>

<section>
<div class="section content">
 <!-- content -->
</div>
</section>

论证

• 标签名和ID不会用于应用样式（只是用class）
• 尽量选择常用的CSS选择器并且尽量减少选择器的使用
• JavaScript代码不依赖于特定的DOM结构
• 标签名不用于操作DOM

总结

“读了你的几篇关于JS（变量对象、作用域、上下文、执行代码）的文章，我个人觉得有点抽象，难以深刻理解。我想请教下通过什么途径能够深入点的了解javascript解析引擎在执行代码前后是怎么工作的，ecma英文版实在看不下去呵呵。”

其实这个问题个人觉得太笼统了，直接回答很难回答，所以，我打算先把他的问题拆解成如下几个子问题，并对其表达个人的观点，希望对有同样困惑的童鞋能够有所帮助。

1. 什么是JavaScript解析引擎？

简单地说，JavaScript解析引擎就是能够“读懂”JavaScript代码，并准确地给出代码运行结果的一段程序。比方说，当你写了 var a = 1 + 1; 这样一段代码，JavaScript引擎做的事情就是看懂（解析）你这段代码，并且将a的值变为2。

学过编译原理的人都知道，对于静态语言来说（如Java、C++、C），处理上述这些事情的叫编译器（Compiler），相应地对于JavaScript这样的动态语言则叫解释器（Interpreter）。这两者的区别用一句话来概括就是：编译器是将源代码编译为另外一种代码（比如机器码，或者字节码），而解释器是直接解析并将代码运行结果输出。 比方说，firebug的console就是一个JavaScript的解释器。

但是，现在很难去界定说，JavaScript引擎它到底算是个解释器还是个编译器，因为，比如像V8（Chrome的JS引擎），它其实为了提高JS的运行性能，在运行之前会先将JS编译为本地的机器码（native machine code），然后再去执行机器码（这样速度就快很多），相信大家对JIT（Just In Time Compilation）一定不陌生吧。

我个人认为，不需要过分去强调JavaScript解析引擎到底是什么，了解它究竟做了什么事情我个人认为就可以了。对于编译器或者解释器究竟是如何看懂代码的，翻出大学编译课的教材就可以了。

这里还要强调的就是，JavaScript引擎本身也是程序，代码编写而成。比如V8就是用C/C++写的。

2. JavaScript解析引擎与ECMAScript是什么关系？

JavaScript引擎是一段程序，我们写的JavaScript代码也是程序，如何让程序去读懂程序呢？这就需要定义规则。比如，之前提到的var a = 1 + 1;，它表示：

• 左边var代表了这是申明（declaration）,它申明了a这个变量
• 右边的+表示要将1和1做加法
• 中间的等号表示了这是个赋值语句
• 最后的分号表示这句语句结束了

上述这些就是规则，有了它就等于有了衡量的标准，JavaScript引擎就可以根据这个标准去解析JavaScript代码了。那么这里的ECMAScript就是定义了这些规则。其中ECMAScript 262这份文档，就是对JavaScript这门语言定义了一整套完整的标准。其中包括：

• var，if，else，break，continue等是JavaScript的关键词
• abstract，int，long等是JavaScript保留词
• 怎么样算是数字、怎么样算是字符串等等
• 定义了操作符（+，-，>，<等）
• 定义了JavaScript的语法
• 定义了对表达式，语句等标准的处理算法，比如遇到==该如何处理
• ⋯⋯

标准的JavaScript引擎就会根据这套文档去实现，注意这里强调了标准，因为也有不按照标准来实现的，比如IE的JS引擎。这也是为什么JavaScript会有兼容性的问题。至于为什么IE的JS引擎不按照标准来实现，就要说到浏览器大战了，这里就不赘述了，自行Google之。

所以，简单的说，ECMAScript定义了语言的标准，JavaScript引擎根据它来实现，这就是两者的关系。

3. JavaScript解析引擎与浏览器又是什么关系？

简单地说，JavaScript引擎是浏览器的组成部分之一。因为浏览器还要做很多别的事情，比如解析页面、渲染页面、Cookie管理、历史记录等等。那么，既然是组成部分，因此一般情况下JavaScript引擎都是浏览器开发商自行开发的。比如：IE9的Chakra、Firefox的TraceMonkey、Chrome的V8等等。

从而也看出，不同浏览器都采用了不同的JavaScript引擎。因此，我们只能说要深入了解哪个JavaScript引擎。

4. 深入了解其内部原理的途径有哪些？

搞清楚了前面三个问题，那这个问题就好回答了。个人认为，主要途径有如下几种（依次由浅入深）：

• 看讲JavaScript引擎工作原理的书
  这种方式最方便，不过我个人了解到的这样的书几乎没有，但是Dmitry A.Soshnikov博客上的文章真的是非常的赞，建议直接看英文，实在英文看起来吃力的，可以看我翻译的译本
• 看ECMAScript的标准文档
  这种方式相对直接，原汁原味，因为引擎就是根据标准来实现的。目前来说，可以看第五版和第三版，不过要看懂也是不容易的。
• 看JS引擎源代码
  这种方式最直接，当然也最难了。因为还牵涉到了如何实现词法分析器，语法分析器等等更加底层的东西了，而且并非所有的引擎代码都是开源的。

5. 以上几种方式中第一种都很难看明白怎么办？

其实第一种方式中的文章，作者已经将文档中内容提炼出来，用通俗易懂的方式阐述出来了。如果，看起来还觉得吃力，那说明还缺少两块的东西：

• 对JavaScript本身还理解的不够深入
  如果你刚刚接触JavaScript，或者说以前甚至都没有接触过。那一下子就想要去理解内部工作原理，的确是很吃力的。首先应该多看看书，多实践实践，从知识和实践的方式来了解JavaScript预言特性。这种情况下，你只需要了解现象。比方说，(function(){})() 这样可以直接调用该匿名函数、用闭包可以解决循环中的延迟操作的变量值获取问题等等。要了解这些，都是需要多汲取和实践的。实践这里就不多说了，而知识汲取方面可以多看看书和博客。这个层面的书就相对比较多了，《Professional JavaScript for Web Developers》就是本很好的书（中文版请自行寻找）。
• 缺乏相应的领域知识
  当JavaScript也达到一定深度了，但是，还是看不大明白，或者没法很深入到内部去一探究竟。那就意味着缺少对应的领域知识。这里明显的就是编译原理相关的知识。不过，其实对这块了解个大概基本看起来就没问题了。要再继续深入，那需要对编译原理了解的很深入，比如说词法分析采用什么算法，一般怎么处理。会有什么问题，如何解决，AST生成算法一般有哪几种等等。那要看编译原理方面的书，也有基本经典的书，比如《Compilers: Principles, Techniques, and Tools》这本也是传说中的龙书，还有非常著名的《SICP》和《PLAI》。不过其实根据个人经验，对于Dmitry的文章，要看懂它，只要你对JavaScript有一定深度的了解，同时你大学计算机的课程都能大致掌握了（尤其是操作系统），也就是说基础不错，理解起来应该没问题。因为这些文章基本没有涉及底层编译相关的，只是在解释文档的内容，并且其中很多东西都是相通的，比如：context的切换与CPU的进程切换、函数相关的的局部变量的栈存储、函数退出的操作等等都是一致的。

以上就是个人对这个问题的看法，除此之外，我觉得，学习任何技术都不能操之过急，要把基础打扎实了，这样学什么都会很快。

嗨，大家好。

在这一期的节目中，我们将介绍下CoffeeScript, 那么什么是CoffeeScript呢？CoffeeScript是一门小语言，也是一个编译器。用CoffeeScript编写的代码，可以编译成JavaScript代码。

CoffeeScript简化了JavaScript的编写，同时运用了JavaScript最佳实践模式。

本期节目将分为3个部分

1. 1. 第一部分中我们讲述安装的过程
2. 2. 第二部分我们将看如何使用它
3. 3. 第三部分中我们将看它如何简化了JavaScript的编写，同时怎么保证了最佳实践模式。

一、安装的过程

要安装CoffeeScript，需要先安装node.js和npm。在mac 和 linux 的环境下，CoffeeScript的安装是相当容易的。比较复杂的呢是在Windows的环境下安装。所以我们着重讲一下在Windows环境下的安装方式。

首先我们先到node.js的网站下载在Windows版本的node.js。下载地址：http://nodejs.org/#download

下载后只要双击msi文件便可安装，整个过程是自动的。最近，npm也被加入到Node的Windows版本中，所以就不用额外再安装了。

安装完Node（包括npm）后，我们到Programm Files下，可以看到nodejs文件夹，在文件夹里，有node.exe, 为了方便，我在桌面上放了个快捷方式。

之后，我们到CoffeeScript的github页面下载CoffeeScript：https://github.com/jashkenas/coffee-script/downloads

下载并解压，我下载的到版本解压缩后的目录是jashkenas-coffee-script-127653b。我们可以把它放到另一个目录中，在这里我们把它放在C盘的dev目录中。

此时，Node和CoffeeScript在硬盘中的目录分别是：

 Node：C:\Program Files\nodejs\

 CoffeeScript：C:\dev\jashkenas-coffee-script-127653b

接下来，在桌面上建一个文件，命名为coffee.cmd。在任何一种编辑器下打开它。在里面打入下面的一段命令：

@echo off
node.exe C:\dev\jashkenas-coffee-script-127653b\bin\coffee %*

保存文件。之后把这个coffee.cmd 放到nodejs目录内。

二、.使用

在dev或任何其他目录中，建立一个目录，比如js。

在这个文档下，我们创建一个文件，命名为test.coffee。

这时打开cmd，打入下面的命令:

> cd C:\dev\js
> coffee -w -c test.coffee

//-w 的全名是 --watch, 是实时编辑的命令
//-c 的全名是 --compile, 是编译的命令

这时，会看到js目录中生成了test.js。在编辑器中打开test.js，可以看到一个匿名函数。这时当我们在test.coffee中打入任何代码，保存后，可以看到test.js被同步更新。

除此之外，我们还可以看到很多其它的命令：

把src目录中的CoffeeScript文件目录树的js在lib目录中编译成平行树

coffee --compile --output lib/ src/

把多个文件串连成一个文件

coffee --join project.js --compile src/*.coffee

三、使用实例

(一) 函数

如果我们输入下面的代码：

square = (x) -> x * x

在保存后，看生成的文件，我们可以看到文件的最上方有 square 变量的声明，下面我们把一个匿名函数分配给了这个变量：

var square;
square = function(x) {
    return x * x;
};

当我们再输入下面的代码时:

cube = (x) -> square(x) * x

会显示为：

var cube, square;
square = function(x) {
    return x * x;
};

cube = function(x) {
    return square(x) * x;
};

函数也可能有参数的默认值。用一个非空的参数覆盖默认值。

fill = (container, liquid = "coffee") ->
"Filling the #{container} with #{liquid}..."

会变为：

var fill;
fill = function(container, liquid) {
if (liquid == null) liquid = "coffee";
return "Filling the " + container + " with " + liquid + "...";
};

(二) 对象

下面的CoffeeScript:

kids =
brother:
name: "Max"
age: 11
sister:
name: "Ida"
age: 9

会显示为：

kids = {
    brother: {
        name: "Max",
        age: 11
    },
    sister: {
        name: "Ida",
        age: 9
    }
};

在JavaScript中，你不能使用保留字(???reserved words)。比如在没有用字符串引用它们的情况下，把class作为对象的属性。

CoffeeScript注意到用作键的对象和他们的报价为您的保留字，所以你不必担心它（例如，当使用jQuery）。下面这段：

$('.account').attr class: 'active'
log object.class

会显示为：

$('.account').attr({
"class": 'active'
});
log(object["class"]);

（三） 词法作用域和变量安全

这种行为实际上是相同于Ruby的局部变量作用域。

outer是不能重新声明在内部函数，因为它是已经在作用域内;

另一方面，inner在函数内部，不应该能够改变同名的外部变量的值，因此有自身的声明。

所以下面一段：

outer = 1
changeNumbers = ->
inner = -1
outer = 10
inner = changeNumbers()

会变成：

var changeNumbers, inner, outer;
outer = 1;
changeNumbers = function() {
    var inner;
    inner = -1;
    return outer = 10;
};
inner = changeNumbers();

使用JSON实现强大的本地存储控制

localStorage.setItem("name", "Robert");

localStorage.getItem("name");

图片的存储

//当图片加载完成的时候触发回调函数
elephant.addEventListener("load", function () {
 var imgCanvas = document.createElement("canvas"),
 imgContext = imgCanvas.getContext("2d");
 
 // 确保canvas元素的大小和图片尺寸一致
 imgCanvas.width = elephant.width;
 imgCanvas.height = elephant.height;
 
 // 渲染图片到canvas中
 imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height);
 
 // 用data url的形式取出
 var imgAsDataURL = imgCanvas.toDataURL("image/png");
 
 // 保存到本地存储中
 try {
 localStorage.setItem("elephant", imgAsDataURL);
 }
 catch (e) {
 console.log("Storage failed: " + e);
 }
}, false);

HTML部分

<figure>
 <img id="elephant" src="about:blank" alt="A close up of an elephant">
 <noscript>
 <img src="elephant.png" alt="A close up of an elephant">
 </noscript> 
 <figcaption>A mighty big elephant, and mighty close too!</figcaption>
</figure>

JavaScript部分

//在本地存储中保存图片
var storageFiles = JSON.parse(localStorage.getItem("storageFiles")) || {},
 elephant = document.getElementById("elephant"),
 storageFilesDate = storageFiles.date,
 date = new Date(),
 todaysDate = (date.getMonth() + 1).toString() + date.getDate().toString();
// 检查数据，如果不存在或者数据过期，则创建一个本地存储
if (typeof storageFilesDate === "undefined" || storageFilesDate < todaysDate) {
 // 图片加载完成后执行
 elephant.addEventListener("load", function () {
 var imgCanvas = document.createElement("canvas"),
 imgContext = imgCanvas.getContext("2d");
// 确保canvas尺寸和图片一致
 imgCanvas.width = elephant.width;
 imgCanvas.height = elephant.height;
// 在canvas中绘制图片
 imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height);
// 将图片保存为Data URI
 storageFiles.elephant = imgCanvas.toDataURL("image/png");

 storageFiles.date = todaysDate;
// 将JSON保存到本地存储中
 try {
 localStorage.setItem("storageFiles", JSON.stringify(storageFiles));
 }
 catch (e) {
 console.log("Storage failed: " + e);
 }
 }, false);
// 设置图片
 elephant.setAttribute("src", "elephant.png");
}
else {
 // Use image from localStorage
 elephant.setAttribute("src", storageFiles.elephant);
}

保存任意格式的文件

• XMLHttpRequest Level 2
• BlobBuilder（提供接口来构建Blob对象，Blob对象是BLOB (binary large object)，二进制大对象，是一个可以存储二进制文件的容器。在计算机中，BLOB常常是数据库中用来存储二进制文件的字段类型。BLOB是一个大文件，典型的BLOB是一张图片或一个声音文件，由于它们的尺寸，必须使用特殊的方式来处理（例如：上传、下载或者存放到一个数据库）。）
• FileReader

1. 用XMLHttpRequest请求文件，然后将响应头设置为"arraybuffer"。
2. 将返回数据存放到BlobBuilder中
3. 获取blob，也就是文件内容
4. 使用FileReader对象读取文件并加载到文件中，最后保存到本地存储。

// 获取文件
var rhinoStorage = localStorage.getItem("rhino"),
 rhino = document.getElementById("rhino");
if (rhinoStorage) {
 //如果已经存在则直接重用已保存的数据
 rhino.setAttribute("src", rhinoStorage);
}
else {
 // 创建XHR, BlobBuilder 和FileReader 对象
 var xhr = new XMLHttpRequest(),
 blobBuilder = new (window.BlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder || window.OBlobBuilder || window.msBlobBuilder),
 blob,
 fileReader = new FileReader();
 xhr.open("GET", "rhino.png", true);
 //将响应头类型设置为“arraybuffer”，也可以使用"blob"，这样就不需要使用BlobBuilder来构建数据，但是"blob"的支持程度有限。
 xhr.responseType = "arraybuffer";
 xhr.addEventListener("load", function () {
 if (xhr.status === 200) {
 // 将响应数据放入blobBuilder中
 blobBuilder.append(xhr.response);
 // 用文件类型创建blob对象
 blob = blobBuilder.getBlob("image/png");
 // 由于Chrome不支持用addEventListener监听FileReader对象的事件，所以需要用onload
 fileReader.onload = function (evt) {
 // 用Data URI的格式读取文件内容
 var result = evt.target.result;
 // 将图片的src指向Data URI
 rhino.setAttribute("src", result);
 //保存到本地存储中
 try {
 localStorage.setItem("rhino", result);
 }
 catch (e) {
 console.log("Storage failed: " + e);
 }
 };
 // 以Data URI的形式加载blob
 fileReader.readAsDataURL(blob);
 }
 }, false);
 // 发送异步请求
 xhr.send();
}

使用“blob”作为响应头类型

// Getting a file through XMLHttpRequest as an arraybuffer and creating a Blob
var rhinoStorage = localStorage.getItem("rhino"),
 rhino = document.getElementById("rhino");
if (rhinoStorage) {
 // Reuse existing Data URL from localStorage
 rhino.setAttribute("src", rhinoStorage);
}
else {
 // Create XHR, BlobBuilder and FileReader objects
 var xhr = new XMLHttpRequest(),
 fileReader = new FileReader();
 xhr.open("GET", "rhino.png", true);
 // Set the responseType to arraybuffer. "blob" is an option too, rendering BlobBuilder unnecessary, but the support for "blob" is not widespread enough yet
 xhr.responseType = "blob";
 xhr.addEventListener("load", function () {
 if (xhr.status === 200) {
 // onload needed since Google Chrome doesn't support addEventListener for FileReader
 fileReader.onload = function (evt) {
 // Read out file contents as a Data URL
 var result = evt.target.result;
 // Set image src to Data URL
 rhino.setAttribute("src", result);
 // Store Data URL in localStorage
 try {
 localStorage.setItem("rhino", result);
 }
 catch (e) {
 console.log("Storage failed: " + e);
 }
 };
 // Load blob as Data URL
 fileReader.readAsDataURL(xhr.response);
 }
 }, false);
 // Send XHR
 xhr.send();
}

浏览器支持情况

• 本地存储——大部分主流浏览器都支持（在国外=。=）, including IE8.
• 原生的JSON支持——支持情况和本地存储类似
• canvas元素——大部分主流浏览器都支持，从IE9开始
• XMLHttpRequest Level 2—— Firefox，Google Chrome， Safari 5+ 并计划在IE10和Opera 12中实现
• BlobBuilder——Firefox ，Google Chrome，并计划在IE10中实现. Safari和Opera情况不明.
• FileReader——Firefox ，Google Chrome，Opera 11.1之后的版本， 计划在IE10中实现. Safari情况不明.
• responseType “blob”——只在Firefox中支持. Google Chrome即将支持，IE10计划支持.  Safari和Opera情况不明。

matchMedia()和它的有趣特性

var mql = window.matchMedia("screen and (max-width:600px)");
console.log(mql.matches);
//resize the browser
console.log(mql.matches); //requeries

@media screen and (max-width:600px) {
 .foo { }
}

var style = document.createElement("style");
style.appendChild(document.createTextNode("@media screen and (max-width:600px) { .foo {} }"));
document.head.appendChild(style); //WebKit支持document.head

//在Firefox中无效
window.matchMedia("screen and (max-width:600px)").addListener(function(mql) {
 console.log("Changed!");
});

//fix for Firefox
var mql = window.matchMedia("screen and (max-width:600px)");
mql.addListener(function(mql) {
 console.log("Changed!");
});

监听器相关的更多内

1. media query一开始是有效的。就像前一个例子中，屏幕宽度变成600px或者更低。
2. media query一开始是无效的。例如屏幕宽度大于600px。

mql.addListener(function(mql) {
 if (mql.matches) {
 console.log("Matches now!");
 } else {
 console.log("Doesn't match now!");
 }
});

是否需要对matchMedia()进行模拟（不支持的浏览器中）

var matches = Y.Media.matches("screen and (max-width:600px)");

var handle = Y.Media.on("screen and (max-width:600px)", function(mq) {
 console.log(mq.media + ":" + mq.matches);
});
//detach later
handle.detach();

总结

参考

1. CSS media queries in JavaScript, Part 1
2. Rob Flaherty’s tweet
3. matchMedia() MediaQueryList not updating
4. matchMedia() listeners lost
5. matchMedia polyfill
6. matchMedia polyfill
7. YUI 3 Gallery Media module

var isMedia = (function(){
 var div;
 return function(query){
 //如果<div>不存在, 则创建一个并让其隐藏
 if (!div){
 div = document.createElement("div");
 div.id = "ncz1";
 div.style.cssText = "position:absolute;top:-1000px";
 document.body.insertBefore(div, document.body.firstChild);
 }
 div.innerHTML = "_<style media=\"" + query + "\"> #ncz1 { width: 1px; }</style>";
 div.removeChild(div.firstChild);
 return div.offsetWidth == 1;
 };
})();

if (isMedia("screen and (max-width:800px)"){
 //在screen模式下这样使用
}
if (isMedia("all and (orientation:portrait)")){
 //portrait模式下
}

CSSOM View

var match = window.matchMedia("screen and (max-width:800px)");
console.log(match.media); //"screen and (max-width:800px)"
console.log(match.matches); //true or false

var match = window.matchMedia("(orientation:portrait)");
match.addListener(function(match){
 if (match.media == "(orientation:portrait)") {
 //do something
 }
});

总结

参考

function a() {
  var jQuery = "hellow world";
}
console.log(jQuery); // undefined

var jQuery = 'hi there';
var f = function() {
  console.log(jQuery); // "undefined"
  var jQuery = "hello world";
};
f();
// undefined

var jQuery = 'hi there';
var f = function() {
  var jQuery; // same as -> var jQuery = undefined;
  console.log(jQuery); // "undefined"
  jQuery = "hello world";
};
f();
// undefined

var jQuery = function( selector, context ) {
  // jQuery对象实际上就是一个“增强版的”init构造函数
  return new jQuery.fn.init( selector, context, rootjQuery );
}
jQuery.fn = jQuery.prototype = {
  init: function( selector, context, rootjQuery ) {
    //...
    return this;
    //...
  }
}

var city = {
  name: 'beijing',
  getName: function() {
    return this.name;
  }
}
console.log(city.getName());

var num = {
  value: 1,
  minus: function (n) {
   this.value -= n;
   return this;
  },
  plus: function (n) {
    this.value += n;
    return this;
  },
  getVal: function () {
    console.log(this.value);
  }
};

num.minus(2).plus(5).getVal();

jQuery.fn = jQuery.prototype = {
  //...
}

(function( $ ){
  $.fn.fontcolor = function() {
    return this.each(function() {
      $(this).css("color", "orange");
    });
  };
})( jQuery );

系列其他文章

• 解码jQuery系列5 – OOP与jQuery
• 解码jQuery系列3 – 原型
• 解码jQuery系列2 – 对象
• 解码jQuery系列1 - 变量和函数

var jQuery = function( selector, context ) {
    //...
}
console.log(typeof jQuery.prototype);

// 返回对象

jQuery.prototype.constructor = jQuery;
jQuery.prototype.init = function( selector, context, rootjQuery ) {
    //...
}

jQuery.prototype = {
    constructor: jQuery,
    init: function( selector, context, rootjQuery ) {
      //...
    }
}

function jQuery() {
    this.constructor= jQuery;
    this.init= function( selector, context, rootjQuery ) {
      //...
    }
}

new jQuery.fn.init( selector, context, rootjQuery );

jQuery.fn.init.prototype = jQuery.fn;

var jQuery = function( selector, context ) {
    // jQuery对象实际上就是一个“增强版的”init构造函数
    return new jQuery.fn.init( selector, context, rootjQuery );
}
jQuery.fn = jQuery.prototype = {
    init: function( selector, context, rootjQuery ) {
      //...
    }
}
// 为 init 函数赋予 jQuery 原型，以方便后面实例化
jQuery.fn.init.prototype = jQuery.fn;

系列其他文章

• 解码jQuery系列5 – OOP与jQuery
• 解码jQuery系列4 – 函数作用域、jQuery连缀模式和jQuery.fn
• 解码jQuery系列2 – 对象
• 解码jQuery系列1 - 变量和函数

函数参数的嵌入

String.prototype.csv = String.prototype.split.partial(/,\s*/);
var results = ("John, Resig, Boston").csv();
assert( results[1] == "Resig", "字母切分成功" );

Function.prototype.curry = function() {
  var fn = this, args = Array.prototype.slice.call(arguments);
  return function() {
    return fn.apply(this, args.concat(
      Array.prototype.slice.call(arguments)));
 };
};

Function.prototype.partial = function(){
 var fn = this, args = Array.prototype.slice.call(arguments);
 return function(){
  var arg = 0;
  for ( var i = 0; i < args.length && arg < arguments.length; i++ )
   if ( args[i] === undefined )
    args[i] = arguments[arg++];
  return fn.apply(this, args);
 };
};

//delay函数的实现
var delay = setTimeout.partial(undefined, 10);
delay(function(){
 assert( true, "函数延迟调用成功" );
});

//事件绑定的实现
var bindClick = document.body.addEventListener
 .partial("click", undefined, false);
bindClick(function(){
 assert( true, "当前函数绑定了click事件" );
});

var shichuan = {};

var shichuan = {
    hair: "black"
};

var shichuan = {
    hair: "black",
    ridingUnicorn: function() {
        // 我怎么骑独角兽
    }
};

var jQuery = function( selector, context ) {
    // jQuery对象实际上就是一个“增强版的”init构造函数
    return new jQuery.fn.init( selector, context, rootjQuery );
}

jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    init: function( selector, context, rootjQuery ) {
    ...
    },
    ...
}

// 局部 jQuery
function jQuery( selector, context ){
    //...
}
// 局部 jQuery
var jQuery = function( selector, context ){
    //...
}

var jQuery = new Function('selector', 'context', '//...');

系列其他文章

• 解码jQuery系列5 – OOP与jQuery
• 解码jQuery系列4 – 函数作用域、jQuery连缀模式和jQuery.fn
• 解码jQuery系列3 – 原型
• 解码jQuery系列1 - 变量和函数

// 全局 global jQuery 
var jQuery = (function() {
  // 局部 local jQuery
  var jQuery = function( selector, context ) {
    // ...
  }
})();

// 局部 local jQuery
var jQuery = function( selector, context ) {
  //...
}

// 局部 local jQuery
function jQuery( selector, context ){
  //...
}
// 局部 local jQuery
var jQuery = function( selector, context ){
  //...
}

// 全局 global jQuery
var jQuery = (function() {
  //...
})();

function() {
  //...
}

"我是数据，我不会导致错误。"

var jQuery = (function() {
  console.log("我是自调用。");
})();

系列其他文章

• 解码jQuery系列5 – OOP与jQuery
• 解码jQuery系列4 – 函数作用域、jQuery连缀模式和jQuery.fn
• 解码jQuery系列3 – 原型
• 解码jQuery系列2 – 对象

1. 我们把为$绑为jQuery对象。
2. 我们创建了一个匿名函数并添加到jQuery$，分配给fn.zebraTable。
3. 在此之后，我们将能够做$（“选择”）。zebraTable（）或`$（选择）。zerbraTable（optionsDict）
4. 此功能将设置交替行的背景颜色。

(function() {
  var $;

  $ = jQuery;

  $.fn.zebraTable = function(options) {
    var defaults;
    defaults = {
      evenColor: '#ccc',
      oddColor: '#eee'
    };
    options = $.extend(defaults, options);
    return this.each(function() {
      $("tr:even", this).css('background-color', options.evenColor);
      return $("tr:odd", this).css('background-color', options.oddColor);
    });
  };

}).call(this);

$(function() {
  $("table").zebraTable(  {
      evenColor: 'red',
      oddColor: 'yellow'
    });
});

1. 由于Coffeescript将代码括在函数里, $= jQuery不覆盖一切，没有必要附上自己的封闭的插件。
2. 插件里面的this是指选定的jQuery对象，所以也没有必要用$(this)。

OYE概述

• ✔ 目标单纯，只做模块化，超轻量
• ✔ 不依赖Script onload事件，更稳定可靠
• ✔ 完美支持具名、匿名模块
• ✔ 支持模块提取完整依赖列表
• ✔ 支持模块循环依赖检测
• ✔ 支持require与define在同一个文档

OYE实现原理

辅助项

define

require

依赖关系

应用指引

开发阶段

<你的站点路径或CDN路径>resource/js/app/home.js
define(['common/head','common/foot','app/home/content'], 
function(head,foot,content){
    return {
        init:function(){
        head.init();
        foot.init();
        content.init();
    }
};
});

<script src="<你的站点路径或CDN路径>resource/js/oye/oye.min.js"></script>
<script>
require('app/home', function(home){
    home.init();
});
</script>

私有变量

function(){
 this.public = 1; //public在函数外面可以访问
 var private = 1;//private变量在函数外部无法访问
}

回调函数和定时器

var a = 1;
jQuery.ajax({
 url : "test.html",
 success : function(html){
 console.log(a);
 }
})

var a = 1;
setTimeout(function(){
 console.log(a);
},1000);
a = a + 1;

改变闭包的context

var Button = {
  click: function(){
    console.log(this);
    this.clicked = true;
  }
};
var elem = document.querySelector("body");
elem.addEventListener("click", Button.click, false);

var Button = {
  click: function(){
    console.log(this);
    this.clicked = true;
  }
};
var elem = document.querySelector("body");
elem.addEventListener("click", Button.click.bind(Button), false);

function bind(context, name){
  return function(){
    return context[name].apply(context, arguments);
  };
}
var Button = {
  click: function(){
    console.log(this);
    this.clicked = true;
  }
};
var elem = document.querySelector("body");
elem.addEventListener("click", bind(Button, "click"), false);

exports.run = function(){
var host = config.list.host,
port = config.list.port,
server = http.createServer(handle.run);
server.listen(port);
console.log('server on ' + port);
}

var fs=require("fs"),
    path=require('path'),
    readline=require('readline')....

• 首先看看==这个操作内部是如何工作的

The production EqualityExpression: EqualityExpression == RelationalExpression is evaluated as follows: 1. Let lref be the result of evaluating EqualityExpression 2. Let lval be GetValue(lref) 3. Let rref be the result of evaluating RelationalExpression 4. Let rval be GetValue(rref) 5. Return the result of performing abstract equality comparison rval==lval

• 根据上面的步骤，我们来对问题作如下解析：

1. 先求GetValue([])
2. 再求GetValue(![])
3. 最后求 GetValue([]) == GetValue(![])

1. If Type(V) is not Reference, return V
2. ….

1. GetValue([])为 []
2. GetValue(![])为 false， （这里！会使得[]强制转化为Boolean类型）
3. 这里就成了求 [] == false的问题

• 根据”abstract equality comparison”算法来求结果：

The comparison x == y, where x and y are values, produces true or false. Such a comparison is performed as follows: 7. If Type(y) is Boolean, return the result of the comparison x == ToNumber(y)

The comparison x == y, where x and y are values, produces true or false. Such a comparison is performed as follows: 9. If Type(x) is Object and Type(y) is either String or Number, return the result of the comparison ToPrimitive(x) == y.

• 查看ToPrimitive的工作机制（9.1）

Return a default value for the Object. The default value of an object is retrieved by calling the [[DefaultValue]] internal method of the object, passing the optional hint PreferredType. The behaviour of the [[DefaultValue]] internal method is defined by this specification for all native ECMAScript objects in 8.12.8.

When the [[DefaultValue]] internal method of O is called with hint Number, the following steps are taken: 1. Let valueOf be the result of calling the [[Get]] internal method of object O with argument “valueOf”. 2. If IsCallable(valueOf) is true then a. Let val be the result of calling the [[Call]] internal method of valueOf, with O as the this value and an empty argument list. b. If val is a primitive value, return val. 3. Let toString be the result of calling the [[Get]] internal method of object O with argument “toString”. a. Let str be the result of calling the [[Call]] internal method of toString, with O as the this value and an empty argument list. b. If str is a primitive value, return str. …

默认，每个对象都有从Object继承下来的valueOf方法。其中每个内置的核心对象都会重载该方法来返回正确的值，对于没有基础类型值的对象，则返回对象自身。

The comparison x == y, where x and y are values, produces true or false. Such a comparison is performed as follows: 5. If Type(x) is String and Type(y) is Number, return the result of the comparison ToNumber(x) == y.

参考资料

• 葵花宝典（ECMA-262-5th）
• MDN

如何安装

wget http://nodejs.org/dist/node-v0.4.8.tar.gz
cd node-v0.4.8
tar -xf node-v0.4.8
./configure
make && make install

curl http://npmjs.org/install.sh|sh

git clone https://github.com/Floby/TermKit.git --recursive
cd TermKit/
npm install

node Node/nodekit.js

支持 text-overflow: ellipsis

<html>
<body>
      <div>I am some very long text!</div>
</body>
</html>

div.inner {
    width: 120px;
    text-overflow: ellipsis;
    white-space:nowrap;
    overflow:hidden;
    color: red;
    border: 1px dashed #333;
    margin: 20px;
    padding: 10px;
}

WebSockets：协议更新并支持手机

更快的canvas

站点无法修改浏览器窗口

支持新的Navigation Timing spec

<style>
li:not(.a, .b) {color:green;}
li:matches(.a, .b) {color:red;}
</style>

<ul>
<li class="a">hullo</li>
<li class="b">hullo</li>
<li>hullo</li>
<li>hullo</li>
<li>hullo</li>
</ul>

<style>
a:local-link {color:red;}
a:local-link(0) {font-family:Arial;}
a:local-link(1) {font-size:12px;}
</style>

<a href="http://www.example.com">Home</a>
<a href="http://www.example.com/2011">2011</a>

<style>
div:nth-match(2n+1) {background-color:#ccc;} /* represents every odd row of div */
div:nth-match(odd)  {background-color:#ccc;} /* same */
</style>

<style>
:column(col.selected) { background: yellow; }
</style>

<table>
  <col span="2"></col>
  <col class="selected">
      <tr>
          <td>A </td>
          <td>B </td>
          <td>C
              <tr>
                  <td span="2">D </td>
                  <td>E
                      <tr>
                          <td>F </td>
                          <td span="2">G</td>
                      </tr>
                  </td>
              </tr>
          </td>
      </tr>
  </col>
</table>

<style>
label:matches(:hover, :focus) /for/ input, /* association by "for" attribute */
label:matches(:hover, :focus):not([for]) input { /* association by containment */
box-shadow: yellow 0 0 10px; }
</style>

<label for="phone">Phone Number</label>
<input type="input" name="phone_number" id="phone" />

<style>
$section #menu {border:1px solid red;}
</style>

<section>
<div id="menu"></div>
</section>

<style>
:current(p, li, dt, dd) {
background: yellow;
}
</style>

<style>
[frame=hsides i] { border-style: solid none; }
</style>

使用JavaScript读写cookie

JavaScript中的字符串格式化

int sprintf( char *buffer, const char *format [, argument] ... );

sprintf(format,arg1,arg2,arg++)

<?php
$number = 123;
$txt = <code>sprintf("With 2 decimals: %1\$.2f<br />With no decimals: %1\$u",$number)</code>;
echo $txt;
?>

JavaScript中日期对象的格式化

增加一些常用的UI标签

JavaScript触摸事件

参考来源

• sprintf，你知道多少？
• http://cn2.php.net/sprintf/

setTimeout(function(){
   //do  something
}, 50)

var id = setImmediate(function(){
    //do something
});

setImmediate(function(doc, win){
    //do something
}, document, window);

除了阅读这个指南之外，你一定也要去看下发布说明，去了解一些安装信息和问题，还有去IE Test Drive网站查看新的demo和实例。你可以访问Internet Explorer Developer Cente 和 MSDN 来了解更多详细的针对开发者的技术信息。

• Cascading Style Sheets (CSS)
  • Advanced Layout（更高级的布局）
    • CSS Regions（基于区域的布局，可以看http://www.qianduan.net/css-regions.html）
    • CSS3 Multi-column Layout（多列布局）
    • Flexible Box (“Flexbox”) Layout （在 CSS2 的基础上，我们将能更灵活地调整页面上各个容器的大小和位置 http://blog.imbolo.com/the-css3-flexible-box-model/）
    • Grid Alignment（基于网格的对齐）
    • Positioned floats（定位浮动）
  • CSS3 3-D Transforms （3D的css3 transforms支持）
  • CSS3 Animations
  • CSS3 Gradients （渐变）
  • CSS3 Transitions
  • CSS3 Text
    • The text-shadow property
    • Hyphenation （截断文字）
  • Panning and Zooming （针对触摸和手势的处理）
  • Removal of style sheet limits （之前版本的IE最多只能引入31个样式表，现在不做限制了）
• Document Object Model (DOM) support
  • Advanced Hit Testing APIs （判断元素重合）
  • CSSOM Floating Point Value support
  • Media Query Listeners
  • Pointer and Gesture DOM events
• ECMAScript 5 (ES5) support
  • The strict variant of ECMAScript (“ES5 strict mode”) （依照ECMAScript增加严格模式）
• F12 Developer Tools (Not available in Metro style apps.)
  • Improved support for workers
• HTML5 support
  • Asynchronous Script Execution （脚本的异步执行）
  • Application Cache ("AppCache")
  • Drag and Drop
  • File API
  • Forms Validation
  • Progress and Range Control
  • History
  • Parsing
  • Sandbox
  • Web Workers
  • Channel Messaging
  • Web Sockets （我喜欢这个）
  • Spellcheck （拼写检查）
• Indexed Database API ("IndexedDB")
• SVG
  • SVG Filter Effects
• Web performance APIs（参考http://www.w3.org/2010/webperf/ 设计的性能监控API）

@import url("/css/layout.css");

result = variable instanceof constructor

alert(person instanceof Object); //变量person 是 Object吗？
alert(colors instanceof Array); //变量colors 是 Array吗？
alert(pattern instanceof RegExp); //变量pattern 是 RegExp吗？

var arr = [];
arr.__proto__ = {};
arr instanceof Array;//false

var arr =[];
arr.constructor && arr.constructor == Array.toString();// true. 

马路需要交警，网路也一样。Tim Bernes Lee在网络上有两贡献，一是发明互联网，二是成立W3C。W3C就是互联网的交警。今天HTML在不同浏览器上通用，其他前端网络技术可以跨浏览器使用，都是W3C在推动及促使这些技术的形成。当然W3C本身不去实践那些技术，这个责任由浏览器承担，W3C只是负责写规范，浏览器商，运营商，手机制造商把规范变成可以使用的东西。今天W3C负责的规范很多，包括了HTML5。

W3C有谁？

交警之所以可以指挥交通，因为政府人民付诸它这个权利。那又是谁付诸W3C这个权利？其实我也不知道，可能也就是历史因素。网络是由美国国防发明，互联网则是Tim Bernes Lee在欧洲发明。当时欧洲和美国都支持W3C，就这样慢慢演变成为一个代表性团体（想到联合国，联合国也是二战战胜国成立然后慢慢的就演变成为一个世界组织）

W3C要吃饭。W3C有300余成员，每一个成员公司按照不同的国家，利润和性质交不同的成员费。按照2007年的会费，一家印度盈利小公司可能付953美金，一家美国非盈利公司缴付6350美金而一家大型法国盈利公司或许就需要缴付65,000欧元。详情看W3C收費。

W3C成员其中包括了各浏览器商Microsoft，Google，Firefox，Opera，Apple。

小组由来

W3C有70多个小组，HTML5工作小组或许是大家最熟悉的。这个小组制定你和我将来会如何写html代码。html5中文小组让html5有我们的声音。

html5中文兴趣小组的想法要谈到今年在台北举办的COSCUP／FOSS.ASIA。在八月的聚会，我有幸认识到来自Google的Pingooo老师，W3C的Kenny lu兄，活跃在火狐台湾社区的柏強兄。我们大家都觉得html5小组应该有一个中文通道。择日不如撞日，当时我们就拉来了W3C的联络人Mike Smith，和Opera的标准官Chaals。当场游说他们。Mike非常赞成，提出了按照程序只要两个(三个？)W3C成员公司支持小组成立就可以了。Chaals本来就是在W3C的Opera代表，立马就说Opera支持。

那时是八月，九月我应Google中国的邀请，出席了北京的Google DevFest。当时我和大陆的朋友分享了这个idea。W3C中国的安琪，纹身佬彪叔，W3Ctech的裕波兄都说一定要有HTML5中文小组。就这样 我们大家就开了邮件小组，Kenny正式向W3C申请创办小组。就这样我们就开始了成立W3C HTML5 中文兴趣小组的路程。

这小组到底做什么？

W3C的70多个小组可以归类为工作小组working group，兴趣小组interest group，孵化小组incubator group，协调小组coordination group。中文小组归类为兴趣小组主要让对课题有兴趣的人交流，

Interest Groups

The primary goal of an Interest Group is to bring together people who wish to evaluate potential Web technologies and policies. An Interest Group is a forum for the exchange of ideas.

Pingooo在他的博客提到一些我们可以关注的课题，比如：

• 直排文書的 CSS3 規格和實作
• Ruby 的 HTML(5) 規格和實作，Ruby 就是像國小課本文字旁的注音符號那樣縮小排到本文旁邊的字。
• Web font 的中文支援

除此之外，其他非HTML5小组也需要和我们互动，像我们也需要和他们互动。比方十月奥斯陆的小聚会我和编写W3C DAP calendar contacts API的Richard Tibbett 聊到，他也说希望可以找我们讨论在calendar API的农历做支持。同时大家觉得W3C无论哪个小组文档或规范需要听见我们的看法，不要迟疑。

还有顺便提到，帮忙申请此Kenny lu兄也将担任Ruby的编辑。

谁可以参与？

这个小组是开放制度，无论你的公司是W3C成员否，你都可以参与。看如何参与。这个小组不属于任何“专家”，大家都都是专家，大家都是学生。

如何参与？

我们非常欢迎大家参与。你可以

1. 讨论HTML，甚至是其他技术的问题。包括CSS，SVG等。
2. 订阅HTML5中文邮件群组。
3. 修改HTML5中文维基 （暂时性，我们迟些应该决定是否要搬到W3C那）
4. HTML5中文小组宪章： 英文，简中，繁中版。
5. 也是最关键的。就是我们需要人手整理我们所讨论的成果。比方早前讨论的直排非常有用，需要有人整理出来。（有兴趣帮忙者可联络我）。

如何订阅？

柏强在维基有解释到

1. 寄封信到 public-html-ig-zh-requestATw3.org
2. 內文可留白
3. Subject / 信件標題打上「subscribe」
4. 接著會收到確認信，回個信什麼都不必打就可以了
5. 在你發第一封信到 public-html-ig-zh 時，你需要另外到 W3C 網站上選擇是否願意讓自己的信件保留一份在主機上。
6. 如果一直遲遲等不到自己的信件出現，別擔心，柏強也等了五六個小時 orz。

总结

邮件群组见！