• 点此查看demo

特征：

• 导航控制
• 支持键盘导航
• 带进度条
• 内置代码语法高亮（highlight.js）
• 支持幻灯片预览
• 多层次、嵌套式幻灯片
• 独特的网址书签和内部链接
• 各种主题和各种变形效果（立方体、翻页、陷下……）
• 支持触屏设备

截图：

文章翻译自Use Reveal.js to Create CSS 3D Slideshow

什么是JsTestDriver

JsTestDriver官网：http://code.google.com/p/js-test-driver/，经常被墙上不了-_-!
首先，JsTestDriver是一个TDD式js单元测试框架，作用类似明河和苏河之前介绍过的jasmine；
其次，JsTestDriver是一个单元测试自动化工具，它并不是非得使用自家的测试框架，使用第三方的测试框架也是可以的，比如jasmine、qunit、junit的等。本文主要使用jasmine（淘宝前端基本上都是使用这个单元测试框架，很易用，也有JsTestDriver的适配器）。
阅读推荐：

• 高效JavaScript单元测试
• Test-Driven JavaScript Development in Practice
• Automated Javascript unit testing with JsTestDriver
• Unit Testing 101: Are You Testing Your JavaScript?

安装JsTestDriver插件

进入idea的“setter”界面，找到“plugins”：

这是常规手段，插件服务器不给力，经常连不上，这时候请到idea的插件页下载，传送门在此。
下载下来后，解压到你的idea配置目录下的plugins目录下，明河机子上是“c:\Users\Administrator\.IntelliJIdea11\config\plugins”。重启下idea，不出意外的话将会多出
jsTestDriver的界面，比如下图：

运行个jsTestDriver的示例工程

下载greeter-sample.zip。解压出来后，使用idea打开这个工程。
如果第一次打开GreeterTest.js，TestCase方法的错误提示，移动焦点到代码上，使用Alt+Enter/Option+Enter，选择“Add JsTestDriver assertion framework support”。在js类库中会增加JsTestDriver语法提示等。

运行JsTestDriver服务器

复制url到你想要运行单元测试的浏览器上。

开始run测试集

选择“greeter.jstd”，会有个run选项。

更详细的教程可以看：http://blog.jetbrains.com/webide/2011/10/javascript-unit-testing-support/。
接下来明河关键要讲下如何适配jasmine。

使用JsTestDriver运行jasmine的测试代码

通过jasmine-jstd-adapter来适配JsTestDriver

请先到jasmine-jstd-adapter首页下载个JasmineAdapter.js。

在工程根目录创建jstestdriver.conf文件

文件的内容类似如下：

jstestdriver的配置文件，采用YAML的格式，

• server：服务器路径
• load：依赖脚本
• test：测试脚本

load依赖脚本，假设你的工程目录结构跟明河类似：

导入JsTestDriver配置

右击工程顶点目录，可以找到“creat XX”的选项（选项图标是JsTestDriver的logo），弹出一个配置确认页，直接确定就好，然后在idea的上方会出现如下图界面：

点击绿色图标就开始跑jasmine测试！！！

解决JsTestDriver测试ajax异步过程问题

假设你的ajax请求的路径指向fixtures下的文件：

直接运行测试代码会报文件找不到的错误。
这并不是JsTestDriver的bug，而是你需要在jstestdriver.conf中配置加载静态文件。
比如增加下面的配置：

留意这个参数是serve不是配置服务器的server。
上面的配置，会加载spec/fixtures/下的所有html文件，留意是对应的路劲是在test目录下，也就是说路径应该是“http://localhost:9876/test/spec/fixtures/upload-success.html”。

解决缺少运行页面不方便插入html片段问题

如果你是kissy的使用者，那么可以使用明河写的jasmine-kissy，首页有详细的使用说明，下一篇教程也会说明。
如果你是jquery的使用者，请使用jasmine-jquery。

1.准备

假设你已经下载了jsdoc-toolkit-ant-task，且保证你的js代码风格符合jsdoc要求，比如下面的代码：

详尽的jsdoc语法说明，请看jsdoc的wiki。

2.定义property

请根据你本机的情况自行修改目录。

3.调用jsdoc

target目标下有二个任务：taskdef定义jsdockit的程序路径，jsdoctoolkit执行真正的构建任务。
接下来明河简单说明下其关键属性。

完成的构建代码如下：

下面是明河构建成功后目录情况：

有机会再给大家讲解常用的jsdoc语法。

1.在github上创建一个新的版本库

github首页，找到下图界面，点击“new repository”按钮：

填下项目名称、描述、url等信息，然后提交。

图中标红的一项的意思是只有付费用户才有私有库托管服务，在github上开源（public）项目托管是免费的。
这样一个新的版本库就创建完毕了。
接下来我们需要本地版本库和远程版本库（github上的）进行通信，还需要一些配置。

2.ssh配置

想要让本地版本库与远程版本库通信，需要配置下SSH key。

2.1检查计算机上是否已经有SSH key

如果出现““No such file or directory”或类似的语句，说明缺少ssh的key。

2.2创建个新的SSH key

比如明河机子上的

会出现类似下图的提示：

直接按下“enter”键即可，然后输入密码。

一切顺利的话，你可以查看下c:\Users\Administrator\.ssh\id_rsa.pub文件，复制里面的key码。

2.3增加ssh key到github上

留意并不需要填写title，github会自动生成，直接把复制的key黏贴到key输入框确定即可。

2.4配置下git的用户名和email

配置结束。

3.本地版本库和远程版本库的通信

3.1克隆个远程版本库

“cd d:\git-test”切换到该目录。

3.2推送更新到远程版本库

先随意提交个文件到版本库

由于是克隆远程版本库，已经存在远程分支origin，无需再创建。
（PS：创建远程分支：git remote add origin git@github.com:minghe/git-test.git）
查看远程分支情况，可以使用git branch -r命令。
推送修改到远程版本库：

git push命名将推送内容到远程服务器。
与之相反的命令就是git pull。

有机会给大家深入讲解下远程分支。这是一个非常巧妙的设计，git会将远程分支都复制到目录.git/refs/remotes/origin下，类似于远程分支会有个独立的origin命名空间，降低了多用户操作时候合并分支的分险。

话题PK是一个单页应用。用户可以在上面完成投票、发布/查看评论的功能。不过，有些操作是需要验证的，比如投票、评论，都需要首先验证是否登陆，然后再验证用户是否已经有阵营信息了（不能反水）。假设投票的方法叫 postTicket，发表观点的方法叫 postMsg， 我们可以直接对名称为 postXXX 的方法进行过滤，来验证用户是否登陆及阵营信息。使用方式如下：

其中route是要匹配的方法名称，fns是用来过滤的方法，这些函数如果返回true，就说明验证通过，会继续执行下一个过滤函数。如果返回false，就说明验证没有通过，后面的方法也就不用执行了。只有fns里的方法全部返回true时，route匹配到的方法才会执行。

这样，投票的业务逻辑就可以跟权限验证的业务逻辑分离，最大限度地对模块进行解耦，提高模块开发速度及复用率了。

Filter的实现，这个实现目前并不复杂，但性能可能不是最优的。我这里也说明下，抛砖引玉，如果你有更好的方式，欢迎告诉我

前面说过了，这里的应用场景是单页的，也没有改变页面hash等操作，所以route就直接对函授名进行匹配了。其实现思路就是备份原来的函授，然后替换掉原有的方法，改成一个代理方法。这样，再用户调用这些方法的时候，实际上是在调用我们的代理方法。proxy方法如下：

1、IE7自动换行bug

代码如下：

需求上希望li路径的外边框宽度自适应，正常的显示如图：

但在ie7下会出现这样的换行现象，如下图：

在测试中还发现该换行现象跟屏幕显示器分辨率相关，上面ie7的效果是在分辨率1280*800下看到的，如果分辨率更低换行的现象就更易发现。

解决的方法是在li里再套一层div，给div设置宽度自适应

• 点此查看demo

2、IE8 overflow和max-height引起的bug

现象：在IE8下，a容器设置max-height, overflow: auto或overflow: srcoll。会使得a容器把max-height当做height来渲染。

解决办法是去掉a容器的overflow设置，再给a容器套一个容器b，给b设置overflow。代码如下：

关于IE8 overflow的相关问题可以看看这篇《IE8 overflow and expanding box bugs》

• 点此查看demo

3、IE9 overflow和:hover引起的bug

这是一个神奇的现象，IE9下，容器a设置overflow：auto，a容器中的内容导致a容器的滚动条出现，这种情况下若给a容器设置伪类：hover。那么在鼠标移动到hover元素上，a容器高度会变高。代码如下：

解决办法是给a容器设置伪类:hover{height: 100%}或者给a容器设置overflow-y/x:scroll.代码如下：

• 点此查看demo

1.人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、FormData)

• 推荐指数：
• 作者：彬Go

2.另类MVC模式 – 思考和雏形

• 推荐指数：
• 作者：张立理

3.javascript单元测试框架jasmine入门

• 推荐指数：
• 作者：Z.J.T

4.如何在jquery的基础上构建一个中间层

• 推荐指数：
• 作者：小爝

5.Node.js学习系列笔记：Events 事件模块

• 推荐指数：
• 作者：何畏

6.Simple JavaScript Template : substitute

• 推荐指数：
• 作者：圆心

jquery的一个用的人比较多的动画插件，非常的易用，效果也非常全面。

2.Transform.js

应该是目前针对transform最为全面的动画库，特点支持3D动画特性：

3.Paper.js

非常牛逼的动画效果，文档和demo都很详细，虽然用于实战的场景不多（基于canvas的动画），不过依旧推荐认真看下。

4.Move.js

相当不错的小动画库，能够产生大部分css3动画效果，关键是API非常易于理解，比如下面的代码：

是不是有点jquery的影子？

5.JSAnim

6.GX

GX非常小，只有10K左右，难得可贵的是gx可以兼容所有浏览器，利用gx可以轻松的利用所有的css属性实现动画。
gx是jquery的插件哦。

7.Animatable

纯粹的css3动画解决方案，Animatable更像css3动画的demo集合，如果你正在学习css3动画，那么推荐认真看下。

8.Animate.css

9.$fx

$fx是非常轻量的js动画库，只有3.7k。$fx可以实现一些很有意思的叠加动画（结合背景动画），有兴趣的朋友可以看demo。

10.Scripty2

原文：http://www.queness.com/post/9999/10-css-and-javascript-animation-plugins-frameworks-and-libraries

模块的引入是通过模块中的require函数完成的，参数是要引入的模块标示符，返回值是被引入模块暴露的API。require可以有一个main属性，这个属性是只读的，一般指向主模块的”module”对象（没有主模块时为undefined）。比如，在nodejs环境中，你可以使用require.main === module来判断当前模块是否为主模块。如果不是沙箱环境，require还可以有一个paths属性，这个属性是一个字符串数组，内容是顶级标示符对应的模块查找目录。paths属性是全局唯一的，对它的修改会影响模块的搜索行为。需要注意的是，paths内容的格式是由模块的loader程序决定的，规范没有统一规定。

模块引入部分最让我费解的是模块出现循环依赖时的处理方式。不过，在承玉同学的帮助下，终于搞明白了。比如下面的例子：

a.js

b.js

如果直接运行a.js，在b.js中引入模块a时，a实际上并没有完全执行。这个时候，按规范的要求，require至少会返回被require时已经执行的部分，这里是exports.done = false。因此，这段代码会输出“in b, a.done = false”。（如果你有兴趣，可以用nodejs测试一下循环依赖的问题。不过需要注意，在nodejs中，模块在第一次执行后，会被缓存下来）

与引入相反，模块向外界暴露API是通过exports对象实现的。

模块最后一个属性：”module”有一个必选属性”id”和一个可选属性”uri”。模块的id的值是改模块的顶级标示符，这个值是只读的。而”uri”属性指向该模块所在的资源文件的URI。在沙箱环境里是没有”uri”属性的。

模块的标示符是一个字符串，内容是由’/'分割的”terms”，每个”term”都是驼峰式的标示符、”.”或”..”。如果标示符以”.”或”..”开始，该标示符就是相对标示符。相对标示符是相对调用”require”的模块，顶级标示符是相对于模块的根命名空间。最后一点，标示符可以没有”.js”这样的文件后缀。

个人感觉顶级标示符这里，规范的解释并不是很清晰，使用时还是应该以模块的loader为准。

整体看下来，Modules/1.1.1规范还有不少不清楚或有争议的地方，这个在CommonJS的wiki里也承认。不过模块的组织思想应该不会变了。人们的实践也走在了规范的前面，比如seajs

ant与yui-compressor

关于yui-compressor，明河以前有发个详细的教程，如果有不明白其使用的朋友，请点击《YUI Compressor快速使用指南—web前端开发七武器》。

为什么yui-compressor需要和ant结合使用？

yui-compressor已经批处理工具，右键可以压缩文件，已经颇为方便了，为什么还需要ant去调用yui-compressor呢？
思考以下场景：

1. 你需要批量压缩10个或更多的js或css文件（一个一个人肉点右键？）
2. 你需要经常维护一批js或css文件，每次发布都人肉右键？

作为典型的懒人，明河渴望有一种工具，运行一次帮我批量压缩文件，然后使用FTP发布到服务器上。ant就是这样的工具。

接下来看下如何使用ant调用yui-compressor

明河已经准备好demo文件（是明河正在写的异步文件上传组件），但是务必修改下build.xml文件中的yui-compressor和closure-compiler的路径。

• 点此下载

定义属性：源码文件路径，css路径，yuicompressor.jar的路径

任务1：压缩uploader/uploader.css到uploader-min.css

minify-css任务执行yuicompressor.jar，apply标签（dataType），明河在上一篇教程中并没有讲到。apply用于执行java程序。留意dest属性，用于指定输出目录，是必须的。
子元素fileset用于提取源文件，这里只需要uploader/uploader.css这个文件。
arg标签上一篇教程明河已经讲过了，最后会合并成1行命名。

• -jar：yuicompressor.jar路径
• –charset：输出文件编码
• –type：文件压缩类型，css或js
• -o：输出路径

代码中的mapper标签(dataType)的用途是什么？
mapper定义了一组源文件和一组目标文件的关联方式。共有三个关键属性：

• type：关联方式，值有glob、identity、flattern、merge、regexp
• from：源文件
• to：目标文件

关键看下type属性，当值为glob时，表示基于简单的通配模式（比如*、**）确定文件名。大多数情况glob属性已经够用了。
yuicompressor需要使用mapper来确定批量输出文件规则，明河的demo代码很简单，将*.css输出成*-min.css即可。
尝试执行ant minify-css，如果构建顺利的话如下图：

任务2：压缩uploader目录下的js文件为*-min.js

如果执行顺利的话将输出以下文件：

ant与closure-compiler

ant执行closure-compiler与yui-compressor基本上一样。closure-compiler的js压缩比yui-compressor强悍，明河一般使用closure-compiler压缩js文件，使用yui-compressor压缩css文件。接下来来看下closure-compiler的调用语法。
任务：合并几个js文件，并压缩合并后的文件
合并uploader/base.js、uploader/render.sj、uploader/renderUploader.js为uploader.source.js，并压缩成uploader-min.js。

关于concat任务标签，之前的教程已经讲过乐，明河不再累述。重点看下minify-js-closure这个任务。
closure-compiler的调用参数与yui-compressor有一些不同，输出不是使用-o参数，而是使用–js_output_file。
明河这里也演示了mapper标签中type=”regexp”的情况，使用正则规则来匹配源文件和目标问题。
（PS:补充个正则知识，(.*)为建立分组捕获，to=”\1-min.js”中的\1，使用该分组。）

变量

我们可以通过@的方式申明变量，我们甚至可以通过算法操作对变量进行运算，这样有利用我们对全局变量的重复运用

函数值传递

我们可以通过定义参数来达到值传递的目的，类似函数，我们可以将一些hack整理成统一的函数来达到牵一发而动全身的目的

嵌套

我们可以在lesscss使用嵌套的处理方式，这样可以给我们精简很多的代码，让css的层级更加具有归属感，我们甚至可以用&符号来申明伪类属性

变量的操作

我们可以通过变量的+-*/操作来达到一些运算的目的，想象一下运用场景，一个容器，我们会有三个等量大小的子容器用来填充，那么我们只需要做简单的除法运算即可，或许更复杂级别更深的会比较适合体现lesscss的优势

颜色函数

lesscss提供了丰富的颜色函数，没有你想不到的。。

今天关于less的介绍就到这里把，这里都是less的简单用法，怎么样，接下来的日子苏河会给大家介绍less的其他用法。

但是，lesscss有一个致命的缺点，就是依赖服务器语言进行编译，虽然说现在对于less的服务器语言支持是越来越多了，比如基于ruby的，nodejs，.NET,php的，但是仅仅这点会让很多的项目组成员变的敬而远之，增加学习成本。

这里大部分的内容源自lesscss的官方网站，也感谢法海提供的PPT，http://www.pushiming.com/blog/tag/lesscss/

ant的所有dataType标签

• fileset：定义一个文件集合列表，这些文件必须确实存在
• filelist：定义一个文件集合列表，这些文件无需确实存在
• path：以某种在不同操作系统间可移植的方式指定路径
• patternset：将一组模式分组在一起
• argument：对于由一个ant构建文件调用的程序，向其传递命令行参数（标签名是arg）
• filterlist：将一组过滤器分组在一起
• mapper：定义一组输入文件和一组输出文件间的复杂关系
• environment：于由一个ant构建文件调用的程序，向其传递环境变量

必须掌握的是：fileset、filelist、path、argument、patternset。

• 点此下载

fileset

fileset和filelist（下面会讲到），功能上非常相近，都是用于获取一组文件列表，二者的不同之处在于fileset内的文件必须存在，filelist则没这要求；fileset的属性也比filelist更为的丰富，所以功能上更为的强大，一般使用fileset来获取文件。

接下来来看几个demo，假设demo目录如图所示：

任务1：合并uploader目录下的所有文件

concat（合并）这个任务标签，明河之前有讲过了，与之前写的demo不同的是，concat内增加了fileset。由于我们的需求是合并uploader目录下的所有js，所以uploader下文件不少，明显不可能单独一个个写path，这时候就需要用到fileset，获取文件列表集合。

fileset会获取${uploader.dir}（该属性引用指向uploader目录）下所有的js，通过includes=”**/*.js”包含所有js。
也许你会对**/*感到疑惑，明河下面做个说明。

包含和排除模式语法：

• *：匹配0或多个字符，比如*.js匹配minghe.js、taobao.js但不匹配minghe.css
• ?：匹配1个字符，比如mingh?.js，匹配minghe.js、minghg.js，但不匹配minghe36.js
• **：匹配0或多个目录，比如/minghe/**，匹配/minghe/下的任意目录，**/*.js匹配任意目录下的所有js文件

使用patternset标签

除了使用属性外，fileset还支持0到n个嵌套patternset元素，比如、等，关于patternset会在下面讲解到，这里先贴出修改后的demo。

这里的demo代码，与上一个demo相比，增加了一个排除文件模式，demo目录下的js文件，显然我们不需要，可以通过标签予以排除

filelist

filelist通常与dependset任务一同使用，dependset任务用于将一个或多个源文件和1个或多个目标文件相比较，如果源文件存在更新或者删除，那么所有目标文件将将被删除。dependset用于确保文件的依赖性。

filelist的属性

filelist的使用率不高，明河这里偷个懒，不再制作个独立的demo。

path

path在java打包编译中常用到，可以以属性（多个路径用冒号或分号隔开）或嵌套元素的方式。
path用于转换路径为当前用户操作系统可兼容的路径。（path dataType并不只有 元素，还有等形式标签）。

当path以标签的形式出现时，拥有以下属性：

patternset

patternset与fileset是紧密结合的，常作为fileset的嵌套元素出现，比如和exclude标签。

留意代码中的if和unless属性，if=”test”可以理解为如果存在test属性，就读取文件，unless=”demo”可以理解为只有未设置demo属性时才读取文件。

argument

arg标签在apply、exec、java标签内嵌套，用于传递命名行参数。
先贴出日后会说明的demo代码：

上述代码是调用google压缩器压缩js源文件，apply嵌套多个arg标签，比如下面的代码：

执行时会合并成一个命名行，类似–charset gbk –warning_level QUIET –js。

明河结语

理论部分讲解结束，接下来的教程将是ant的实战部分，比如ant结合yahoo和google的压缩器。

当你要引入property，只要使用${property}语法即可。

properties文件的使用

考虑以下需求：build.xml需要提供给第三方使用，第三方本机的代码路径一般都不一样，如果让第三方自己去修改build.xml的路径配置（假如在你的build.xml中有类似 的定义），正好该用户不懂得ant，那么面对build.xml，他将无所适从。能不能将配置独立成一个文件，用户只要改那个配置文件即可呢？

ant的.properties文件恰恰解决这个需求。

在build.xml同级目录下建立个build.properties（文件名任意）；

键入如下示例代码：

打开你的build.xml，插入如下代码：

property的file属性指向build.properties文件，那么ant在执行build.xml前会去找这个文件，build.properties内的属性会覆盖build.xml内的同名属性。

假设你的build.xml有如下property：

你可以试下${assets.dir}，输出的将是build.properties文件内property值。

value属性和location属性的区别

这二个属性很容易混淆，不少朋友向明河询问，有了value，为什么还需要location呢？二者的作用不是一样的吗？

是的，value和location的功能是接近的，都是property的值，但有些小的区别，如果你的property存储的是路径，那么明河推荐使用location属性，location属性会对路径进行转换，永远返回绝对路径形式。来看实际代码：

输出的结果如下：

留意标黄部分的差异，当你使用location属性时，值内所有的“/”都会更换为“\”（即绝对路径的形式），而且还会去掉路径中多余的“/”。所以当你使用location属性存储路径信息时更为安全。

下一篇教程将向各位介绍dataType，之后就是ant的实战部分内容。

• 点此查看demo
• 点此下载

什么是HTML5 文件上传
上传文件运用了HTML5的三个新特性：1、新的文件读取api(File Reader API) 2、新的拖拽api(Drag & Drop API) 3、新的IO-ajax（增加了二进制数据传输）。下面是HTML5文件上传的步骤：

1. 1、用户从本地计选择一个或多个文件拖拽到浏览器窗口。支持拖拽的的浏览器会触发一个事件，事件包括一些有用的信息，其中包涵被选中的文件信息。
2. 2、用HTML5的文件读取api，以二进制数据读取被选文件，并存储到内存中。
3. 3、用XMLHttpRequest对象的新方法-sendAsBinary，将数据传到服务器。

jQuery插件— Filedrop已经封装好这些功能，并且提供配置接口来限制上传文件的大小和指定回调函数。非常方便运用到自己的应用中。
目前来看，文件上传只能在firefox和chrome浏览器中使用，但其他主流浏览器的下个版本已经计划支持该功能了。当然对于不支持的浏览器可以简单的放置input file控件来代替。但本文重点是应用HTML5上，这里就不做处理了。

现在开始，首先是HTML结构

上传中心的Html结构比较简单。先声明HTML5的doctype，然后引入样式文件和脚本文件-script.js、filedrop插件脚本和jquery库。
html结构如下：
index.html

这里div#dropbox会传递给filedrop插件，插件会监听是否有文件被拖拽到div#dropbox上。当上传出错时，展现信息的span会提示错误信息。（如，浏览器不支持HTML5的api时就会显示相应的提示信息）

然后，文件选择后，通过基于jquery的js编码实现图片预览效果。预览html结构如下：

本段包括图片预览（img 的src属性会用图片的DataURL填充）和上传进度条的html结构。预览容器的一个class值done，可以使span.uploaded显示（默认情况下该span是隐藏的）。该span用绿色背景标记，表示上传已完成。

html结构完成了，接下来开始脚本编码。
事实上文件上传相关的功能Filedrop插件都封装好了，这里的上传中心只需要运用它，并且将回调的方法传递给它。需要在服务器端写一段php脚本来处理上传的文件，下面一节会讲到。
第一步，写一个辅助的方法来读取文件对象（该对象是文件被选择后由浏览器端创建的，包括如文件名称、文件路劲和文件大小等的属性），然后生成预览的html结构。
assets/js/script.js

Template用于创建图片预览的HTML结构。获取图片的DataURL（64位编码的图片数据），然后赋值给图片的src。然后创建好的预览会被添加到div#dropbox中。现在还剩下filedrop的回调处理了。
assets/js/script.js

然后，被拖拽到div#dropbox的有效的图片文件通过post_file.php上传到服务器上。

PHP 处理：

在php服务器端，正常上传的图片和被拖拽上传的图片不会有区别。这意味着在服务器端只需要提供一个回调来处理上传的文件。
post_file.php

该段脚本执行监听http请求和验证上传的文件。（如果php脚本中不使用move_upload_file()方法上传文件，那么文件将自动在请求结束后予以删除。）

最后，给上传中心添加样式。

下面列出部分样式，一些与上传不相关的没有这里没有列出来。如果想看完整的样式，可以查看style.css
assets/css/styles.css

Div.progress绝对定位。改变它的width（百分数值）来做进度条的显示。这里可以应用jquery实现动画效果。
到这里，HTML5的上传中心完成了。可以将它运用到文件上传服务、html5画廊、文件管理或别的新应用中。记得留下你的建议和意见！

本文翻译自《HTML5 File Uploads with jQuery》– Demo演示

通过在项目目录下增加.gitignore文件理文件忽略

比如明河在项目根目录内加个.gitignore文件内容如下：
*.iml
.idea/
再使用git status查看，.idea目录和form.iml文件已经被git忽略掉了。

（PS：.gitignore文件对所处的目录及其子目录生效。）

如果想要连.gitignore文件自己也忽略呢？

一样的道理，只要在文件内加上.gitignore即可。

如何将忽略的文件添加到暂存区呢？

我只能说这个需求有点蛋疼…git实在太强大了，实现这种蛋疼的需求也不在话下。
使用命令git add -f 文件路径即可。

git忽略语法说明：

• 空行或者#号开始的行会被忽略；
• 可以使用通配符，比如*，？（一个字符），[]（可选范围）；
• 路径分隔符（/）在最前面，表示要忽略此目录下的文件；
• ！号表示不忽略。

解决msysGit的中文录入问题

msysGit的shell环境中无法输入中文的，想要输入中文，我们需要修改下配置文件/etc/inputrc。
步骤1：进入git安装目录，找到/etc/inputrc；
步骤2：修改配置项
找到如下配置代码
set output-meta off
set convert-meta on
修改成
set output-meta on
set convert-meta off
步骤3：关闭git bash然后再重启
就可以在shell环境中输入中文了，如下图：

虽然可以输入中文，但msysGit在中文的显示上依旧有问题，接下来我们来看下如果解决中文显示问题。

解决msysGit的提交说明乱码问题

我们先来看个提交中文说明的情况：

git log显示日志时，出现的是看不懂的乱码，而且git commit -m提交时会出现一堆的警告。接下来我们设置几项配置

git config –system i18n.logOutputEncoding gbk 用于将提交说明的输出编码设置为gbk
git config –system i18n.commitEncoding gbk 标注提交说明所使用的字符集。
export LESSCHARSET=utf-8 设置分页器的编码，这与git log 能否正常打印中文日志息息相关，因为git log的显示采用的就是less分页器，LESSCHARSET是分页器的环境变量，只要设置为utf-8，即可正常显示中文

（ps：请避免使用中文名称的文件，虽然通过msysGit的设置可以正常显示中文名文件。）

echo在调试ant任务时非常有用，也可以在任务执行后打印一些任务完成提示消息等。
实际上echo也可以把消息打印到指定文件，形成build日志，只需要指定file参数即可。

来看典型的echo任务代码:

echo打印property属性值，是个非常常用的调试技巧。
上述代码中有个dirname，这个任务是用来做啥的呢？接下去看。

6.dirname：获取文件的目录路径

dirname只有二个参数：

来看下使用代码：

ant.file这个属性是系统自带的，为当前运行的构建文件路径。
明河这里将dirname和property进行比较，二者的输出有明显的区别，dirname只输出目录，property输出完成文件路径，如下图

7.available：验证文件、目录、类的存在性

available任务在防止ant构建时因为文件或目录不存在导致的错误时非常有用。

示例代码

available的value值永远为一个布尔值。

8.get：从url中获取文件

get用于快速将远程文件保存到指定位置，不止支持http:协议，ftp:，jar:也都是可以的。

来看个demo代码：

运行后，如下图：

如果要把一批url保存下来该如何处理呢？

9.local：增加个局部属性

为了更好说明local用法，明河先贴出demo代码：

上述代码会输出如下内容：

在step1目标中我们定义了，类似编程语言中的局部变量，改变后foo的输出值为bar，不再是原来定义的foo，有意思的是原来的 值不会发生改变，step2目标验证了这一点。也就是说在step1内部定义了local 后，foo这个property的修改不会影响外部property的值。
local这个任务在sequential（循环）中非常常用，讲到sequential时再演示其用法。

10.touch：创建文件，并可以修改文件修改时间

创建一个myfile文件，最后修改时间为当前时间。

创建一个myfile文件，最后修改时间为18/10/2010 2:02 pm。

最近看了些关于SPDY的文章，忽然觉得，如果类似SPDY这样的中间协议（TCP之上，HTTP的补充）被大量应用了，其实我们就不需要太刻意关注最小化HTTP请求数了（YY中…）。支持一个TCP连接中无限的并发HTTP请求，是最吸引我的一个SPDY特性了。

如今，大家写的web应用都是通过HTTP与TCP协议传输的。TCP协议工作在传输层，HTTP协议则工作在应用层。不幸的是，今天在web上传播的内容与10年前有着显著的区别，HTTP传输已经渐渐无法满足人们的需要了。

•  每个HTTP连接只请求一个资源（HTTP pipelining做了改善，不过大大增加了复杂度，并不流行）。浏览器只好通过建立多个连接来解决此问题（你应该刻意了解过各主流浏览器支持的并发连接数吧）。
• HTTP只允许由客户端发起请求。纵使服务端知道客户端需要一个资源，它也没有相关机制来通知客户端。服务端只能等待客户端发送一个请求。
• 未压缩的请求及响应头。现在的应用普遍使用更多的cookie、客户端自定义扩展等，一个典型的请求头还是不小的。对于猫或者ADSL这种上行带宽非常低的连接来说，还是很有影响的。
• 冗余的头。HTTP头在同一个会话里是反复发送的。但是，头信息中的User-Agent，Host以及Accept*等固定信息是不需要重复发送的。
• 非强制的数据压缩。

这么多的HTTP缺点都是Google罗列的，是SPDY协议努力的方向。SPDY希望实现降低一半的页面加载时间（据实验结果看，已经接近这个目标了），同时避免增加部署的复杂度。SPDY的具体目标有：

• 允许多个并发HTTP请求共用一个TCP会话。
• 压缩HTTP头，舍弃不必要的头信息。
• 协议要易于实现并且高效。
• 强制使用SSL传输协议，以换取更好的安全性和对现有网络系统的兼容。虽然SSL也会带来一些延迟，但Google相信长远地看，未来的web离不开安全的网络连接。
• 允许服务端向客户端发起一个会话，以及向客户端推送数据。

简单说下SPDY的设计及特性。

如上图，SPDY在SSL之上增加了一个session层，用来支持在一个TCP连接里实现多路复用的交叉流。原有的HTTP GET及POST消息格式保持不变；不过，SPDY制定了一个新的用于编码及传输的帧格式。流是双向的，可以由客户端或服务端发起。

SPDY特性分为基本特性（默认开启）与高级特性（可选启用）两部分。都为降低网络延迟努力。
基本特性有：

• 多路复用流。SPDY实现了单TCP连接中无限制的并发流。由于请求在单个信道内是交叉的，TCP的效率会更高。
• 请求优先级。虽然可以并发请求，但网络总有可能堵塞，所以还是要给请求分下优先级。
• 压缩HTTP头，舍弃不必要的头信息。

高级特性有：

• Server push。就是允许服务端发起通信。
• Server hint。服务端可以提示客户端可以获取某某资源了。

好了，先介绍这么多。如果你和我一样，好奇SPDY怎么应用，可以在Chrome里打开个gmail啥的，然后打开这个链接满足下好奇心。
chrome://net-internals/#events&q=type:SPDY_SESSION%20is:active

其实发现想细致了解里面各种名词，真不是一篇文章能介绍清楚的。天河也查了好久，稍详细的介绍跟实践待续哈。

说说该模板的特点：

• 中文原创模板，由明河设计，苏河、天河、飞绿制作；
• 中国为数不多的采用html5的wordpress模板；
• 适合团队博客；
• 整体设计还行（明河自吹自擂下…）

(PS:目前没做IE兼容性处理哦)

错误1-使用全局变量

如果你刚开始javascript编程，可能会觉得全局变量很好用。事实上，刚开始javascript编程，你可能不知道使用全局变量会带来什么麻烦。在同一个页面中，全局变量可以在任何内嵌的javascript代码段中或是该页面加载的不同的js文件中，都能访问到。这听起来很强大，是吗？这就使得全局变量可以随时随地的被修改赋值。
事实上这样很糟！
这样做会导致变量在意料之外被修改重写。假设有一个网店，需要用javascript计算并显示购物车所有商品的价格总和（当然，服务器端还会进行重新计算，这里只是为了增强用户的体验）。可能会编写代码如下：

现在，还需要用javascript代码在网站上展示一些信息，或则是做一个商品仓库。代码如下：

或则是如下代码：

现在，出现问题了：两个重要的变量被重写，但可能还没被意识到。这样代码运行会出错，会花费很多时间来跟踪和修复该错误。
那该如何解决呢？简言之—“封装”：当然封装有很多方法可以实现。第一种做法是将代码放入一个匿名的自调函数中。代码如下：

这样做，在函数外部是绝对不能访问到函数内部定义的变量。这就形成了个人的代码空间，但是这样就不能公开部分方法或属性。例如，想要创建一个购物车，定义一个总价的变量，作为公共属性，这种情形下可以采用模块式编程。

关于全局变量有一点值得注意，如果不用关键词var来声明创建变量，那么javascript引擎会默认将该变量定义为全局变量。

这里的变量tax在函数外部也是可以被访问的，因为在定义tax的时候没有使用var关键词。

错误2-不加分号

每句javascript语句必须以分号结尾。在编程时如果忘了加分号，这时javascript编解析器会自动加上。那我们在编程的时候是不是就可以完全不用浪费时间去加分号呢？
但是在一些语句中，分号是必不可少的。如for循环语句中的分号是必不可少的，否则会报语法错误。那么语句末尾的分号呢？
Javascript社区已经讨论过该问题。下面是本文的看法：你的代码，只要是被javascript解析器修改过（即便是很小的修改，如添加分号），就可能会出现一些你意料之外的结果。看看下面这段javascript代码：

该方法看起来会返回一个对象，但事实上，javascript解析器会在return后面紧接着添加一个分号，这就导致该函数返回undefined。Return后的对象会被忽略。解决方法很简单，代码如下：

在javascript编程中应严格要求自己添加分号，这个习惯并不难。当然，作为一名web开发人员，你可能也会用到其他的语言（如php），这些语言都是严格要求以分号结尾的。你可以把这些编程语言的习惯带到javascript编程中来。
作者注解：除了你完全肯定可以被忽略的地方，你都不可以忽略添加分号。

错误3-使用==

如果你问一个javascript编程者，在javascript编程中通常会犯什么错误。他/她很可能会说，使用= = =来代替= =。这是什么意思呢？
试试下面的代码：

代码如你所愿的输出了“it’s true！”那再试试下面的代码：

这段代码在控制台中尽然也输出了“it’s true!”，但其实这并不是你所期望的输出。这里的==运算符转换了运算数的类型，从而使得两个运算数相等了。这里if语句中的==运算符使得右边string类型的“1”变成了number型的1。
想要得到你想要的输出，这里应该用= = =运算符来代替= =。===不会强制转换运算数的类型，这样才能如你所期望的。同样地，用!= =运算符来替换!=。下面是用==来做比较，得出的结果令人意外。

错误4-使用数据类型的包装对象

Javascript提供了各个数据类型的包装对象。

首先，它们并不好用。上面的代码可以用更少的代码来实现，如下：

但是这两种方式还是有所不同的。下面是douglas crockford的观点：
例如用new Boolean(false)创建一个对象，该对象有一个方法valueOf，调用该方法会返回构造器的值。
这意味着，如果运行typeof new Number(10)或者是typeof new String(‘hello’),将返回‘object’，而不是’number’或’string’.另外，用数据类型的包装还会引发一些意料之外的结果。
那么为什么javascript要提供数据类型的包装对象呢？这是因为javascript解析器内部会调用。简单的数据类型是没有方法的（因为它们不是对象），所以当调用简单类型的数据的方法时（如’hello’.replace(‘ello’, ‘i’)）,javascript会调用String包装对象来创建一个临时的string对象，然后调用该对象的方法，完成调用后会删除这个临时对象。
所以不要用数据类型的包装对象来创建简单类型的数据。
注意：本来不用这么说明的，但本文还是想明确的告诉初学者：不是说不使用它们和new（尽管有些是推荐使用的），这里需要特别指出的是，这个建议特别针对这些数据类型，如：number、string、Boolean、array和空对象。

错误5-在使用for-in时不对属性检查

我们都很熟悉遍历数组，但是你可能还希望能遍历对象的属性。（题外话：array事实上是属性名为数字的对象）。这是可以用for-in循环语句，代码如下：

运行上面的代码，输出如下：

但是，浏览器中for-in遍历对象属性和方法时会包括对象原型链上的所有属性和方法。但绝大多数属性是不希望被枚举出来的。可以用hasOwnProperties方法来检测属性是否属于对象。代码如下：

有时，只希望枚举列出对象的的属性，不包括方法。可以用typeof方法，代码如下：

不管怎么样，在用for-in循环时要确保对属性进行检测，以避免得到你意料之外的结果。

错误6-使用with或eval

幸运的是，现在大部分javascript教程都不会教你使用with或eval。但是一些老教程或名气不大的资料时（因为有时候好的资料在网上很难找到），可能会发现有使用with或eval。
下面是两个不用with的主要原因：
1、 它会降低代码性能
2、 不易于代码阅读

第一点是它与生俱来的。第二点，看看下面的代码，这里用with访问person对象的name、age属性。