国外的像基于jQuery的RequireJs，YUI Loader，LabJs，RunJs，国内也有淘宝的SeaJs，豆瓣的DoJs等，这些都是一些十分优秀的模块加载器。但是本文将会向大家介绍一个新的开源的轻量级“多线程”异步模块加载器In.js，In的开发借鉴了Do的一些思路和使用习惯，在此期间感谢@kejun同我的耐心交流，In.js压缩后只有4.77k，不仅小巧而且十分好用。

优点：

• 按需加载
• 无阻塞加载
• 依赖关系管理
• 颗粒化模块管理

如何使用？

A.引入In.js

1

<script type="text/javascript" src="in.js" autoload="true" core="jquery.min.js"></script>

只需要在页面顶部引入in.js即可，这里有两个参数需要注意：

autoload: 是否在加载in.js的时候加载底层核心库 – {可选参数 – true|false}
core: 底层核心库的路径 – {可选参数 – url}

如果同时设置了core，并且autoload=true，则在引入In.js的同时加载core到页面中。

B.声明各个模块的地址和依赖关系In.add(name,{config})

1
2
3

In.add('mod-a',{path:'mods/a.js',type:'js',charset:'utf-8'});
In.add('mod-b',{path:'mods/b.js',type:'js',charset:'utf-8',rely:['mod-b-css']});
In.add('mod-b-css',{path:'mods/b.css',type:'css',charset:'utf-8',rely:['mod-a']});

上述代码声明了三个模块的依赖关系和模块的地址，并将它们加入到队列中去（仅仅是加入队列，并没有加载到页面中去）。

C.加载队列In(queue)

1
2
3
4
5
6

var demo=In('mod-b',function() {
	//do something
},function() {
	//do something
	return false;
});

加载mod-b模块，加载完后执行functionA和functionB，在此假设引入in.js时设置了autoload=true，那么队列中的加载顺序依次为：

1

jquery.min.js >>> mod-a >>> mod-b-css >>> mod-b >>> functionA() >>> functionB()

队列全部加载完成后，demo会被赋值为一个数组，其中存放的是每个function的返回值：

1

demo={returns:[undefined,false],complete:true}

D.在domReady之后加载队列In.ready(queue)

1
2
3

In.ready('mod-b',function() {
	//do something
});

队列加载顺序：

1

jquery.min.js >>> {domReady} >>> mod-a >>> mod-b-css >>> mod-b >>> function()

In.ready()和In()的区别在于两点：

1. In.ready()中的队列只有在domReady之后才会执行
2. In.ready()没有返回值

E.监听变量变化，值改变则执行回调In.watch(object,property,function(prop,old,new) {})

由于In加载的队列均为异步非阻塞式加载，所以有时候为了特殊需求（比如后续的操作依赖队列中function的返回值），我们需要在确保队列执行完成后，再执行后续操作。这种情况下，可以用In.watch()监听return.complete变量，当return.complete==true的时候执行回调函数，代码如下：

1
2
3
4
5
6
7
8
9
10

var model=In('model',function() {
	//do something
	return 123;
});
In.watch(model,'complete',function(prop,old,new) {
	if(model[prop]==true) {
		console.log(model.returns[0]);//print 123
		In.unwatch(model,prop);//destroy the watch event of model.complete
	}
});

————————-华丽的分割线————————-

In的魅力远远不止上述这些，它的可靠性也已经在几个大项目中得到了印证，除此之外，In也有智能的提示，比如如果用In()加载一个事先未声明的模块，就会提示你检查模块名。真心的希望有更多的前端朋友关注In，使用In，甚至投入到In的后续开发中来。

下图是In.js的英文版使用图册：

在哪下载？

In.js是一个开源的项目，你可以在下边的地址找到它的源代码或者下载它使用。

http://project.benben.cc/In
http://github.com/PaulGuo/In

关于作者

Author: Guokai （腾讯微博 / Twitter / Google+ / Blog）
Email/Gtalk: badkaikai@gmail.com

嗯，据说iOS 4.2发布了，所有的iPhone，iPod、iPad啥的，都可以免费更新。令人欣慰的是，这个版本的iOS对HTML5新特性的支持有比较大的升级，其中包括对WebSockets和加速器(Accelerometer)的支持，新的event、支持打印、新的JavaScript 数据类型和更好的SVG支持。

事实上，Apple还没有更新Safari文档。这里的信息只是基于在Safari(注：文中的Safari指iOS移动设备中的Safari浏览器，不包括PC和Mac机中的Safari)自身的JavaScript研究和测试上。具体来说，检测到的新特性如下：

• 通过DeviceOrientation API支持加速器
• HTML5 WebSocket API
• HTML5 表单支持增强
• 打印支持
• 新的JavaScript 数据类型
• 新DOM事件
• 增强对SVG和Canvas的支持

加速器支持

或许你已经知道，iOS设备都有加速传感器(还有其它的，比如磁力及和陀螺仪)，但是直到现在，网页开发者没有操作这些传感器的权限。Safari现在支持 DeviceOrientation API (W3C草案)，不过，虽然看起来全部的API都是被支持的(包括ondeviceorientation 和ondevicemotion事件)，但是在测试中，我只能成功的使用加速器的数据。

如果你已经有了iOS 4.2的设备，可以用Safari浏览器访问 ad.ag/jtjdmj 自行测试。

要想检测每秒钟50次加速计数据变化，你需要在window全局对象监听ondevicemotion事件，然后在DeviceOrientationEvent参数上使用accelerationIncludingGravity属性。它有三个值：x、y和z，分别代表每个坐标上的加速度g (gravity,重力)。你可以将加速计数用于游戏，效果或者CSS动画中。

1
2
3
4
5

window.ondevicemotion = function(event) {
// event.accelerationIncludingGravity.x
// event.accelerationIncludingGravity.y
// event.accelerationIncludingGravity.z
}

WebSockets

另一个大更新是对WebSockets的支持。WebSockets是一个尚处于草案状态的W3C HTML5 API，允许JavaScript使用一种开放的双向、双全工连接到一台服务器，通过TCP sockets。这对于聊天和实时应用来说是一个非常好的消息，因为可以大大减少AJAX周期性调用。

你将需要一台能够通过一种HTTP握手理解新的WebSocket协议的服务器。如果服务器不支持WebSocket或者由于代理/网关的原因，你将还要依赖一种fallback机制。

HTML5表单支持

其实webkit对HTML5表单的支持相对已经比较不错，现在iOS 4.2的Safari开始支持 required属性以及 :invalid CSS伪类。这样的话，下面的代码将展示一个文本框在输入正确的时候显示绿色背景，而不正确的时候显示黄色背景。

<style>
input {
background-color: green;
color: white;
}
input:invalid {
background-color: yellow;
}
</style>
<input type="text" required>

AJAX2

名为FormData对象，这允许我们很方便的通过Ajax发生表单数据。

打印支持

iOS4.2引入了 AirPrint，一种无限打印方案。也就是说，我们现在可以使用 window.print 来在Safari中调用打印对话框了。

新的JavaScript 数据类型

Safari现在支持 二进制类 (Blob Class)和许多整数类型的集合，比如 Float32Array，Int8Array，Uint8Array，Int16Array Unit16Array，Int32Array以及Uint32Array等在Typed Arrays规范中定义的数组。更多信息可访问 Firefox 网站。

新DOM事件

在新的动作类事件中，我们现在可以使用HTML 5新的 onhashchange事件用于检测AJAX类webapp中URL中散列(#)之后的变化，以及HTML5草案规范中的invalid、onbeforeload 以及onpopstate事件。

现在，我们也可以使用window.captureEvents和window.releaseEvents来监听全局方法中的事件。

SVG和Canvas支持增强

iOS支持作为独立文件的SVG以及内联SVG(使用svg标签)。现在我们可以直接在我们的文档中创建SVG文档——使用超过20个SVG___类，比如SVGDocument，SVGImage等…

对于Canvas，现在支持imageData data-type，一种从JavaScript以像素级操作图片的方法。

其它东东

• 支持window全局对象的一个styleMedia属性
• 一种WebGLRenderingContext类可用，3D Drawing API(也就是WebGL)的一部分。
• 一个全局RGBColor构造函数

PS：由于我本人并没有iPhone、iPad啥的，所以没有办法对文中的内容进行逐个测试，如果你发现了某些错误或者新的内容，请通过留言提交，我会及时更新本文，多谢——神飞

其实modernizr就是为HTML5而生的——它是一个检测浏览器对HTML5和CSS3特性支持的JS库，著名的HTML5/CSS3浏览器兼容性网站FindmeByIP就是基于该框架实现的。

可以看到，右下角绿色按钮上面有Modernizr的链接。

Modernizr的功能

modernizr的功能其实很简单，就是用js检测浏览器对HTML5/CSS3的特性支持情况，支持某个属性，就在页面的<html>标签上添加一个相应的class，不支持的话就添加一个no-前缀的class，比如，如果检测的浏览器支持video标签，modernizr就会在<html>标签上添加video类，否则，添加no-video类。

查看FindMeByIP的源码或者用firebug之类的工具查看页面代码，就可以看到<HTML>标签中的class。

另外，modernizr也提供了另外一种用法，就是单独的检测浏览器对某个特性的支持情况，例如：

if (Modernizr.video) {}

通过类似的接口检测浏览器对HTML5的支持情况，是比较安全的。

浏览器检测：UA VS 特性

其实大家通常都会用UA去检测一个浏览器，当然ua也提供了更丰富的信息，UA不是万能的，它也有一些弱点，比如，用户浏览器的UA伪装，某些落后浏览器提供的UA信息太少，这些都会影响到对浏览器信息的判断。更重要的是，对于HTML5特性来说，用UA去判断一个浏览器是否支持某个特性，实现太复杂而且不靠谱。

当然，关于UA和特性检测的争论一直都有，我这里想说的是，具体问题具体分析，在网站中使用HTML5来检测特性支持要比UA更靠谱、更方便～～

使用Modernizr

modernizr的用法很简单，仅仅在页面中引入库的js文件即可：

<script type="text/javascript" src="modernizr-1.5.js"></script>

Modernizr是开源的，但是由于某种原因，它被G-FW给封掉了。

Modernizr @ git

modernizr项目托管在git，你可以通过以下地址获取它：
http://github.com/Modernizr/Modernizr
作者还在git提供了一个简单的输出页：
http://modernizr.github.com/Modernizr/output.html
和一个详细测试页面：
http://modernizr.github.com/Modernizr/test/index.html

扩展阅读：

detacting HTML5 features
Safely Deploy HTML5 and CSS3 with Modernizr

这其实和cufon等网络字体的实现原理是有些类似的：非IE浏览器使用SVG绘图，然后IE中使用VML。它的目的是想要提供一种简单易用的真正跨浏览器的矢量图形实现方案，包括一些动画效果。

Raphael的语法也很简单，基本上了解SVG就会很容易上手的：

var c = paper.path("M10 10L90 90");
// 画一条线；

浏览器支持

IE6+、Firefox 3.0+、chrome、opera等都是很好支持的。

一些酷酷的例子：

使用Raphael绘制的117个矢量图标：

嗯，这些图标都是用Raphael实现的，点击例子页面中的图标下面就会显示代码。

简单的动画效果，虽然也可以用JS+CSS3实现，但是这个可是跨浏览器的哦。。。

感兴趣的同学可访问官方网站查看更多demo，以及参考文档。

然而IE对高级CSS选择器特别是CSS3选择器的支持让我们一直不能将CSS选择器推广应用。不过，虽然我们无法左右浏览器的市场份额，却可以通过一些技术改善我们的工作。我们也可以使用其它的一些技术，让IE可以变相支持CSS3选择器。

一位来自英国的网页开发工程师Keith Clark开发了一个JavaScript方案来使IE支持CSS3选择器。该脚本支持从IE5到IE8的各个版本。

用法

你只需要下载Robert Nyman的DOMAssistant脚本和ie-css3.js并将它们在你的页面的head标签中导入，如下：

1
2
3
4

<head>
	<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
	<script type="text/javascript" src="ie-css3.js"></script>
</head>

支持的选择器

• :nth-child
• :nth-last-child
• :nth-of-type
• :nth-last-of-type
• :first-child
• :last-child
• :only-child
• :first-of-type
• :last-of-type
• :only-of-type
• :empty

ie-css3的一些限制

• 样式表必须通过<link>标签引入。页面级的样式表或者内联的样式表将无效。不过你可以在外部样式文件中使用@import 导入其它样式文件；
• 样式表文件必须和页面放在同一个域名下面；
• 使用file://路径的样式文件将由于浏览器的安全问题而不起作用；
• :not()选择器尚不支持；
• 该方法不是动态的，样式被应用之后再改变DOM，将会无效。

如何工作的?

ie-css3.js下载页面的每一个样式文件并解析它的CSS3伪选择器。如果一个选择器被找到，它就会被替换为同名的CSS class。比如： div:nth-child(2) 将会变成 div._iecss-nth-child-2 。然后，Robert Nyman的DOMAssistant用于寻找匹配元素CSS3选择器的DOM节点然后将相应的CSS类添加给它。

最终，元素的样式表会被新的版本替代，然后用CSS3选择器对相应元素添加对应的样式。

避免IE的CSS解释器

根据W3C的规定，一个浏览器应该无视它不认识的CSS规则。这就出现一个问题——我们需要利用样式表文件中的CSS3选择器，但是IE会将它们丢弃。

为了避免这个问题，每一个样式文件都会通过XMLHttpRequest下载。这允许该脚本绕开浏览器内置的CSS解释器并能够读取原始的CSS文件。

• 访问项目主页
• 下载ie-css3.js
• 下载DOMAssistant

替代方案

显然这个也并非完美的方案，对于Ajax网站来说，它基本上是不能用的，因为在生成的样式表被应用之后再改变DOM，就不会有效了。但是事实上我们可以自己来自定义一个ie-css3的。只是没有它这个这么智能。

使用 cssQuery

cssQuery是由业界大牛Dean Edwards开发的一个Javascript组件。它就是为CSS 选择器而生的。它可以支持几乎所有的CSS 选择器，包括CSS3选择器。当然它在实现的时候进行了分级，分别针对CSS1，CSS2和CSS3制作了一个独立的js包，以及一个标准包。支持所有A级浏览器。

简单的用法：

1
2
3

var tags = cssQuery("body > p");
var tags = cssQuery("[href]");
var tags = cssQuery("a[href='#']");

然后你就可以自己写一些js为相应的对象添加想用的样式了。

我建议对支持CSS高级选择器的浏览器使用原生的CSS选择器写法，然后通过cssQuery在IE中动态的为响应的元素添加一个样式名。

比如，我们可以这样写CSS：

a[herf='#'],a.empty{color:red}

这里的第一条CSS3选择器是用于Firefox/webkit等支持CSS3选择器的非IE浏览器的，a.empty是专门为IE而写。然后通过CSSQuery动态的在IE浏览器中为对应的元素添加样式：

1
2

var tags = cssQuery("a[href='#']");
tags.className="empty";

当然，上面的这段js最好使用IE的条件注释。

使用 jQuery

据说jQuery的选择器比cssQuery要快很多。当然，无可否认，jQuery的选择器是目前流行的js框架中最好用的一个。而使用jquery来实现类似上述功能要方便很多，因为jQuery的选择器更好用。

OK，jQuery的做法和cssQuery有些类似，CSS可以写成上面一样的，JS可以这样写：

$("a[href='#']").addClass("empty");

更具体的用法可以查看我之前写的一个小例子《使用jQuery创建个性化链接样式》

使用 DOMAssistant

DOMAssistant也是一个很不错的JS库，它提供了一些类似jQuery的功能，比如CSS 选择器、事件以及一些DOM操作。它的优点就是小巧，压缩后只有9KB，我想这就是Keith Clark选择DOMAssistant来作为ie-css3.js的基础框架的主要原因吧。jQuery越来越肥胖了，而且用于实现这个功能有些浪费了。而且DOMAssistant的用法和jQuery非常类似。

事实上，DOMAssistant的选择器和对DOM的CSS Class的操作与jQuery一模一样。

$("a[href='#']").addClass("empty");

欲了解更多，可查看DOMAssistant官方，以及下载官方中文PDF文档

总结

其实，无论是ie-css3.js本身，还是后来我们讨论的三种替代方法，都是一种方法，就是用js动态的添加class到页面元素中。不同是ie-css3自动化的完成了这些工作，而后面的三种方案要自己动手根据自己的项目写一些js来实现。我认为ie-css3最方便，基本不用怎么维护，但是它一刀切，效率比较低，而且灵活性差，不适合于ajax项目。而后面的这几种方案灵活性强，但是要做很多额外的工作，无论你是将IE专用样式独立到一个专用的css文件中还是像文中写的那样和CSS3选择器写到一起，都会大大的增加你的工作量和维护成本。

为IE，我们要额外付出很多。

有更好的想法或创意吗？欢迎与我们分享。

OK，言归正传。jquery 1.4其实已经发布了两个alpha版本和一个RC版本，相信关注jquery的同学已经有所了解。

jquery团队为了发布1.4，专门启动了一个 jquery 1.4的网站，计划在14天内逐步揭开jquery1.4的神秘面纱。该网站的内容包括文章和在线视频。

本文就先不简述jquery 1.4带来的新的改进了，在稍后，我们将推出几篇比较好的介绍jquery 1.4的比较详细的文章，敬请期待。

• jQuery Minified (23kb Gzipped)
• jQuery 未压缩版 (154kb)
• jQuery 1.4 文档

PS:从上面的列表可以看出，jquery1.4胖了很多，当然性能和功能肯定提升了不少。

como js是一个比较轻的js框架，但是功能还是比较强大的，实用性比较强。它有以下特性：

• 对原生对象如String扩展常用函数
• 简约而快速的CSS选择器
• 支持类的声明与继承
• 强大的js包扩展机制，支持CSS按需加载
• 非侵入式切换调用，与第三方框架并存
• 高效、易操作的动画执行
• 支持主流浏览器

当然，可能和jQuery/YUI等流行的框架相比，还有某些不足，但是任何一个事物从出现到成熟都有一个过程，我相信只要作者不断完善，Como js肯定能越来越好的。

官方 | 下载 Como JS | 查看API文档

Clearbox 是一个独立的脚本，不依赖其它JS库或框架。它有很多个部分组成，包括core文件，语言包，以及配置文件，但是你使用的时候只需要引入一个接口文件clearbox.js就可以了。

clearbox有以下特性：

• 图片自动播放；
• 图片旋转；
• 鼠标滚轮切换图片；
• 自动检测媒体格式；
• 多语言支持(目前官方尚未提供中文语言包，不过语言包设置非常简单，只需在简单配置language/目录下新加一个语言文件夹比如cn，然后将翻译好的cb_language.js文件放进去就可以。)

Clearbox支持媒体格式：

• 图片格式：BMP, GIF, JPG, JPEG, PNG
• 视频格式：AVI, MOV, MPG, MPEG, WMV
• 音频格式：MP3, WAV, WMA
• Flash： SWF
• 内联内容： inner#id
• HTML内容：通过href添加任何HTML文件
• Iframe 内容：可以通过iframe嵌套任何页面

从中可以看出，clearbox是一款很强大的Lightbox软件，它可以实现你所需要的各项功能。

查看Demo | 到官方下载 | 查看详细教程

但是，很少有很完美的东西，虽然clearbox很强大，现在我们越来越强调网站性能，而clearbox却调用了多个js文件，这显然会增加网站的HTTP请求数量，从而影响网站的整体性能，所以我建议在使用的时候，可以采取一些措施对其脚本进行必要的合并和压缩。

这里就简单介绍这么多，希望了解更多的童鞋可到官方网站查询，如有疑问也可以在本文的评论中交流。

手册的设计风格简洁，模块化的组织结构可以让你很方便的找到自己想要的内容。

预览：

下载：

从box下载

本视觉手册官方地址为 http://woorkup.com/2010/06/13/jquery-1-4-2-visual-cheat-sheet/ 目前由于某些众所周知的原因，暂时不能访问。另外，如果你发现上面的下载地址无法下载，请通过留言告诉我们，多谢。

PS:update to 1.4.2 @2010-12-20

看一下demo先.

正如你看到的那样，当你将鼠标放到文字上去的时候，文字就会变成五颜六色的。

其实这种效果来自于知名开源微博chyrp，它实现起来也并不难。基本原理是使用charAt()函数将文字打散并逐个设置字体颜色，当然，也要用到jquery的选择器和相关函数。

定义色彩数组先，这里定义了7个，当然可以定义更多。

var colors = ["#ff2e99", "#ff8a2d", "#ffe12a", "#caff2a", "#1fb5ff", "#5931ff", "#b848ff"]

核心函数:

1
2
3
4
5
6
7
8
9
10
11
12

function colorize(text) {
    var colorized = ""
    var bracket_color = ""
    for (i = 0; i < text.length; i++) {
        var index = Math.floor(Math.random()*7)
        if (text[i] == "(")
            bracket_color = colors[index]
            color = (bracket_color.length && (text[i] == "(" || text[i] == ")")) ? bracket_color : colors[index]//取色
    		colorized = colorized + '<span style="color: '+color+' !important">' + text.charAt(i) + '</span>' //重构
		}
    return colorized
}

最后，使用jquery选择器将colorize()函数应用到相关对象上：

1
2
3
4
5
6

 $(".colorize").bind("mouseenter", function(){
        $(this).data("text", $(this).text());
		$(this).html(colorize($(this).text()));
	}).bind("mouseleave", function(){
		$(this).html($(this).data("text"));
	});

这里使用了jquery的bind()函数绑定了两个事件：mouseenter和mouseleave，其实这样稍有些麻烦，我们可以简化一些，换做hover()：

1
2
3
4
5
6
7
8

$(".colorize2").hover(
	function(){
		$(this).data("text", $(this).text());
		$(this).html(colorize($(this).text()));
		},
	function(){
		$(this).html($(this).data("text"));
});

当然，这个效果，并不是只能用于链接，只要是内容为文字的元素，都可以使用这个效果。想必这个对一般的高手，都不难吧，大家有没有更好的方法或者在其他框架上实现？请通过评论与我们分享吧！