• .快速加载html片段。jsTestDriver使用jasmine-jstd-adapter(jasmine对jsTestDriver的适配器)，由于有自己的测试运行页面，无法向运行页面插入测试用html片段，所以在你的spec脚本中需要插入html片段。
• 增加用于KISSY的machers，目前只作用于KISSY的Node模块。

代码下载和说明文档：https://github.com/minghe/jasmine-kissy

明河为什么写jasmine-kissy？

明河是使用jsTestDriver测试工具来运行jasmine的单元测试代码，遇到一个问题：
jsTestDriver没有使用jasmine的跑单元测试的html页面，它只有本地的服务器路径，比如：http://localhost:9876/capture。很多情况我们需要在页面中插入测试用的html片段，比如明河想要测试分享组件，我需要向页面插入个容器

，在jsTestDriver中只能使用js向body插入dom结构。如果你的dom结构很简单，那没什么问题，但是如果你的html片段非常长，在测试js中用脚本插入html片段就非常蛋疼，极度不利于维护。
如何解决这个问题呢？

使用ajax加载html片段

利用ajax的确可以解决问题，但又引入了一个新的问题：如何处理异步的测试呢？难道每次都加waits()和run()，那更蛋疼…
大多人觉得ajax=异步，其实这是不对的，ajax也可以是阻塞式加载。在kissy的ajax方法加个参数async:false，关闭异步加载方式。正是使用阻塞式加载，可以避免使用waits()+run()的异步繁琐方式。

jasmine-kissy的用法

1.全局变量

为了方便测试用例页面直接使用，定义了几个全局变量:

• JF：JamineFixture的实例，使用JF的load()读取html片段
• S：KISSY的缩写变量
• $：KISSY.Node.all的缩写变量

2.加载html片段

在jsTestDriver.conf中需要加载静态html片段文件，比如：

必须先配置html片段所放的目录路径，JF.path = ‘spec/fixtures’。
特别留意在jsTestDriver中起始路径应该是http://localhost:9876/test/
假设在你的spec/fixtures目录有个html片段文件jasmine-kissy_fixture.html。

加载spec/fixtures/目录下的所有html文件。
这是必须配置的！不然使用ajax加载时会报找不到文件的错误！
文件的内容如下：
my name is minghe.
使用如下语法加载这个文件：

你可以测试下#test这个div是否存在：

(ps:toExist()是jasmine-kissy新增的macher，用于测试节点是否存在)

加载的片段会放入缓存，避免重复加载。

需要加载多个文件，语法如下：

加载的html片段会放在页面的测试容器内，容器id为#J_JF。

清理html片段，（jasmine-kissy会自动清理），使用JF.clean()。

清理缓存，使用JF.cleanCache()。

3.KISSY matchers

留意这些matcher目前只适用于KISSY的Node方式。

• toExist() 测试节点的存在性
• toHasClass() 测试节点是否拥有指定的class名
• toHasAttr() 测试节点是否拥有指定的属性值
• toHasProp() 测试节点是否拥有指定的property值
• toHasData() 测试节点是否拥有指定扩展属性值
• toContain() 测试节点是否有子节点
• toEqualValue() 测试节点的的value值
• toEqualText() 测试节点的text

示例代码：

• 点此查看demo

特征：

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

截图：

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

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

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

• 点此查看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演示

最近看了些关于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

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

错误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属性。

但是，若果有一个变量和对象其中一个属性同名，那用with会发生什么呢？事实上，这种情况下，访问变量会引用那个变量而不是对象的属性。另一个值得注意的是，在with语句中，如果访问的属性不存在或对象不存在，就不能给对象添加属性，同时会使得作用域链上with作用域后的那个作用域中创建一个变量。

那eval呢？它可以接受一个字符串参数，并且解析执行改字符串。

这听起来没有什么不好，甚至觉得很棒，对吗？但问题就是这太棒了！与其将一连串字符串将给它来解析执行，为什么不直接编写在程序中呢？不该这么做的原因如下：

1. 完全可以直接编写在代码中。
2. eval解析很慢的，性能跟with差不多。

eval的用法是在非运行时运行环境。可以从服务器端或客户端获取代码。难道真的想你的网站用户来底控制你的代码？这样不就意味着你的网站向无数的黑客敞开了大门。用eval就好比，离开了家，并告诉大家钥匙就是门口垫子下面。如果你爱自己或你的用户，就不要用eval。

错误7-在用parseInt时不用基数

Javascript提供了一个非常有用的方法parseInt，它可以将字符串转换为数值。

结果是不是令人觉得意外？第二句为什么不是43？事实上，parseInt方法不仅仅是只能把字符串当做十进制数来转换。当parseInt的第一个参数是以0开头，它就会把字符串当作是八进制数来转换。这就是不使用基数出现的意料之外结果。第二个参数–基数，会指定parseInt方法把字符串当做什么进制的数来转换。（当然，它的返回值永远是十进制数）

错误8 if和while语句不使用{}

Javascript最明显的特点是语法要求不那么严格。但正是这样的特点，有时会带来麻烦。If和while语句的{}就会引起一些麻烦。{}是根据if条件成立时执行代码语句的条数来用的。

这里看起来没什么问题，因为这里的执行语句只有一句

但是这样做不易于阅读：首先，不用{}代码结构看起来不是那么清晰。

看看上面的代码，第二行console语句是不属于if执行语句的，但是这里它看起来像是if的执行语句。使用{}会使结构更清晰。同时，如果你想在if的执行代码中添加一句，也需要使用{}。习惯使用{}并不是一件难事。

错误9-单个单个地插入dom元素

这并不是javascript自身的问题。99%100的javascript编程都会涉及DOM操作，在对DOM操作上会犯很多错误，但这是最明显的一个。
DOM操作会使浏览器重绘页面，所以如果有一连串的元素一个接一个的插入页面中，这会急剧增加浏览器渲染页面的负担。

Document fragments 是一个DOM元素容器，可以使用它同时添加这些元素到页面中。Document fragment自身不是一个DOM节点，它不会在页面DOM树中显示，并且在把它插入DOM之前它是不可见的。下面是它的用法：

非常快速、简洁！

错误10-不懂javascript

许多人不花时间来认真地学习javascript。
Javascript并不等于jquery。这是否吓到你了？如果你会犯以上列出的错误，那么你需要认真地学习javascript。Javascript是一门语言，一门基本上不用学习就可以使用的语言，这就导致许多人不花时间来认真学习。千万不要这么做，已经有太多太多的教程指出这样做的弊端，你没有借口不认真学习javascript。如果你只是了解jquery（或mootools，或别的），那么你学习了解javascript的出发点就已经错了。

错误11-严格遵循以上的规则

“Rules are made to be broken.”(规则是用来被打破的。)

虽然本文列举了以上规则，但像任何事一样，规则是用来被打破的。如果是刚开始学习javascript，你会严于律己，严格遵循以上规则。但是到了真正理解了为什么要遵循以上规则的原因后，你才会知道灵活运用以上规则。例如，eval被反复的说到不能用，但是它却是唯一能解析服务器端返回json字符串的方法。当然这里在运用它时会做很多安全的检测（你可能会用到一个javascript库）。这里想要指明的是，在需要的地方，不应该害怕犯错，大胆的运用它。当然，永远不要犯错误10所指出的问题。

结论：

如果你是javascript新手，希望以上的内容对你javascript编程有所帮助。如果你是一个资深javascript工程师，如过这里有遗漏的，请在留言板中留言告知大家。

本文翻译自《The 11 JavaScript Mistakes you’re Making》

• 点此下载

（PS:由于上传文件会给服务器造成负担，这里明河就不将demo上传，请自行在本地服务器测试demo。）
有一段时间没发文章了，明河手上项目太紧了，终于快临近发布了，偷闲跟大家分享下ajax异步文件上传原理，前段时间一直在捣鼓异步文件上传，也算颇有心得，以前也写过flash文件上传组件，有兴趣的朋友可以看yijs.File，早期作品，代码比较粗糙，最近又写了二个异步文件上传组件，一个是基于iframe，一个是基于flash，都是基于KISSY1.2，日后会放出。言归正传，今天来谈下ajax异步文件上传的原理。
（PS:英文原文可以看《Uploading Files with AJAX》）。

1.在demo中我们要实现的功能

• 异步上传文件（支持多选上传）
• 可以即时预览图片

2.通过这篇教程你将学会什么？

• ajax异步文件上传的核心原理
• 新的文件API：FileReader对象的用法；
• FormData对象的用法（这是XMLHttpRequest2的内容）。

很遗憾的是IE对FileReader和FormData并不支持（包括IE9），所以文中的方案有兼容性问题，想要实现全兼容的文件上传（包括图片预览），还需要其他技巧，以后讲解明河完成的异步上传组件时会说明。
（PS：Opera目前不支持FormData对象，请在firefox和chrome下浏览demo。）

3.构建图片上传表单

想要实现异步文件上传的第一个关键步骤，给form增加enctype=”multipart/form-data”属性，这个属性非常关键，缺少这个属性，将直接提交表单。
action属性指向处理文件上传数据的服务器端路径。
多选上传的关键是在上传框上加multiple属性。

4.upload.php

我们先来看服务器端处理文件脚本：

这段php脚本做了非常多的简化，比如缺少文件大小限制、文件去重、用户限制等一系列安全处理。
$_FILES这个关联数组存放着文件数据，是处理的关键，有不清楚的朋友可以看php手册，这里不再累述，毕竟不是本文讲解重点。

5.监听上传框的change事件

留意这里的this.files，files数组将存储你上传的文件信息，即使只上传1张图片，也是数组形式出现。

6.利用FileReader将图片显示到页面上

关于FileReader，w3c有非常详细的说明，传送门点此。

首先需要判断下文件类型，file.type.match(/image.*/)，如果是图片，file.type值会类似“image/jpeg”的形式。
接下来实例化FileReader读取文件。

FileReader有6个事件( onloadstart、onprogress、onload、onabort、 onerror、onloadend)，onloadend监听读取完毕事件，我们需要读取结束后把图片打印到页面。
留意e.target.result，result包含图片数据
最后来看下showUploadedItem函数：

非常简单，将img元素添加到li元素，然后li添加到ul即可。

7.ajax发送FormData数据

将文件信息添加到formdata。

发送异步请求将数据传给upload.php处理。这里使用jquery的ajax方法。

1.使用最新的jquery版本

明河觉得这个建议有待商榷，虽然越新的jquery版本性能上更加优秀，但是有些方法的变迁还是会导致一些bug，比如从1.4.2到1.5时很多朋友就抱怨ajax上出现问题了。明河的建议是旧的页面的jquery升级需谨慎，新项目可以大胆的使用jquery新版本。
还有个建议是使用google的cdn上的jquery文件，加载速度更快。猛击Google Libraries API 进入查看。

2.保持选择器的简单

这个建议明河非常赞同，有很多朋友不喜欢给元素增加样式或id，希望保持html的简洁，使用jquery强大的选择器去检索元素，这不是好的习惯。首先越复杂的选择器，遍历的效率越低，这是显而易见的，最高效率无疑是使用原生的getElementById()；其次，复杂的选择器将标签名称和层级结构固化在里面，假如你的html结构发生了改变，或标签发生了改变，都直接造成检索失败。

访问DOM，是javascript最耗资源和性能的部分，所以尽量避免复杂或重复的遍历DOM。
避免重复遍历DOM的方法就是将$()检索的元素存储到变量，比如下面的代码：

jquery选择器支持大部分的css3伪类方法，像:visible, :hidden, :animated，虽然很便利，但请慎用，因为当你使用伪类选择器的时候，jQuery不得不使用querySelectorAll()，性能的损耗更大。

3.jQuery对象作为数组处理

jQuery对象定义了length属性，当使用数组的形式操作时候返回其实是DOM元素而不是子jQuery对象，比如下面代码。

根据实验，使用for或while循环，执行效率比$.each()来的高。详细测试可以看several times faster。
使用length属性来检查元素存在性：

4.selector属性

jQuery对象都带有一个selector属性，用于获取选择器名称，比如：

留意第二行代码，selector返回的是获取的元素完整的选择器。
这个属性常用于编写jquery插件的时候。

5.创建一个空的jQuery对象

这种情况应用场景不多，当你需要先创建个空的jQuery对象，然后使用add()方法向此对象注入jQuery对象时会用到。

6.选择随机元素

应用场景不多，举个例子，现在你需要随机给li增加一个red的class。

需要扩展jquery的选择器，这段代码很好的演示了jQuery.expr的用法。

7.使用css钩子

jQuery.cssHooks是1.4.3新增的方法，用的不估计不多，当你定义新的CSS Hooks时实际上定义的是getter和setter方法，举个例子，border-radius这个圆角属性想要成功应用于firefox、webkit等浏览器，需要增加属性前缀，比如-moz-border-radius和-webkit-border-radius。你可以通过定义CSS Hooks将其封装成统一的接口borderRadius，而不是一一设置css属性。

8.使用自定义的Easing（缓动动画效果）函数

easing plugin是用的非常多的函数，可以实现不少华丽的效果。当内置的缓动效果无法满足你的需求时，还可以自定义缓动函数。

9.$.proxy()的使用

关于$.proxy()，明河曾经详细介绍过，传送门在此《jquery1.4教程三：新增方法教程（3）》。
jquery有个让人头疼的地方，回调函数过多，上下文this总是在变化着，有时候我们需要控制this的指向，这时候就需要$.proxy()方法。

嵌套的二个回调函数this指向是不同的！现在我们希望this的指向是#panel的元素。代码如下：

10.快速获取节点数

这是个常用的技巧，代码如下：

11.构建个jquery插件

关于jquery插件的构建，明河曾发过系列教程，传送门：制作jquery文字提示插件—jquery插件实战教程（1）。
这里就不再详述。

12.设置ajax全局事件

关于ajax全局事件，明河曾发过完整的介绍文章，传送门：《jquery的ajax全局事件详解—明河谈jquery》。

13.延迟动画

当存在多个animate动画时，如何处理动画的执行顺序是个烦心事，原文作者是建议使用delay()函数，如上面的代码，但明河的建议是使用queue()方法，因为delay你要考虑延迟多少时间，而queue没有这个问题，进入队列的函数会一个个顺序执行。可以看明河以前的文章queue和dequeue—明河谈jquery。

15.jquery的本地存储

本地存储在现在web应用中使用越来越频繁，jquery有个专门用于本地存储的插件叫$.jStorage jQuery plugin。

• 点此查看demo
• 点此下载

demo中演示了使用javascript生成文件的典型应用：用户可以在输入框输入自定义的数据，然后可以点击保存，将这些数据保存到本地，无需再手动在本地新建个txt然后再复制，帮用户省了一步操作。
还有一个比较典型的应用：系统输出一段密匙给用户，密匙一般很复杂，希望用户可以快速保存到本地，本文的技术就派上用场了。
从理论上来讲，想要单纯依靠javascript生成文件，是不可能的，目前主流的有二种方案可以实现生成文件功能：1、javascript+flash，该方案网上有现成的插件，插件的名字明河忘记了，-_-!明河比较健忘；2、javascript+服务器端语言，这是明河比较推崇的方案，本文的demo采用javascript+php实现的，接下来对这个方案，明河进行下简单说明。

原理简述：

原理并不复杂，整个流程如下图：

html代码：

php处理数据，返回文件：

服务器端最关键地就是对header的重写，比如上述代码中的

服务器端需要二个参数：filename和content，接下来我们来看如何通过脚本异步post过去。
异步post，条件反射地想到ajax，但这里我们借助iframe。

assets/jquery.generateFile.js

jquery.generateFile.js这个文件封装了生成文件的方法：

主要有如下几个关键步骤：

1.生成个iframe

2.向iframe添加一个表单

表单结构如下：

将上述html片段加入到iframe中：

这里明河重点提下prop方法，这是jquery1.6的新方法哦，这个方法的作用是什么呢？
以前的jquery中，全部使用attr来访问对象的属性，比如取一个图片的alt属性，使用$(‘#img’).attr(‘alt’);
但是在某些时候，比如访问checkbox的disabled属性的时候，会有些问题。在有些浏览器里，只要写了disabled就可以，有些则要写：disabled = “disabled”。所以，从1.6开始，jq提供新的方法“prop”来获取这些属性。使用prop的时候，返回值是标准属性，true/false，比如$(‘#checkbox’).prop(‘disabled’)，不会返回 “disabled”或者“”，只会是true/false。当然赋值的时候也是如此。如此，我们便统一了所有操作，无论是从语法上还是语义上。

3.提交表单

初始化插件，生成文件

• 点此查看demo
• 点此下载

明河已经把验证规则的提示内容翻译成中文了，请看validation-engine-2.2\js\languages\jquery.validationEngine-cn.js。关于时间有二处提示没找到地方，目前没做修改。明河的英文太菜，翻译难免词不达意，欢迎纠正，O(∩_∩)O哈！
（ps：时间有限，demo没做翻译，请见谅。）

Validation-Engine的使用

Validation-Engine的调用跟旧版没什么太大区别，可以看《validationEngine中文版 — jquery强大的表单验证插件》，明河这里不再累述。这里对其中的二个点进行补充：ajax验证和钩子的使用。这二部分相对而言会难些，所以需要着重介绍下。

如何处理ajax验证？

典型场景：如何使用Validation-Engine验证用户名或email的存在性？
这个需求在大部分的注册页面都会用到，那如何使用Validation-Engine进行ajax验证呢？
Validation-Engine的ajax验证有二种模式：

• Inline：表单元素即时验证，比如失去焦点后触发ajax验证请求
• Submit：整个表单的验证

inline验证

inline验证当表单字段的值发生改变时会触发相应的ajax事件，比如用户名的输入框失去焦点后。
想要使用ajax验证，需要你在语言规则文件上加上相应的ajax验证规则，打开validation-engine-2.2\js\languages\jquery.validationEngine-cn.js，找到如下代码：

上述是一套ajax的验证规则，url指向服务器端路径，alertText为验证提示，alertTextLoad为正在验证时显示的消息。alertTextOk即ajax验证成功时显示的消息。
然后你需要在表单字段上应用上这段规则。