JavaScript异步编程之Jscex无创痕切入jQueryUI-51CTO.COM

我们使用tab插件：

<script> 
$(function () {  
$("#tabs").tabs({ event: "mouseover" });  
});  
</script> 
1.
2.
3.
4.
5.

效果：鼠标划过就可以切换tab.

Jscex是JavaScript Computation EXpressions的缩写，它为JavaScript语言提供了一个monadic扩展，能够显著提高一些常见场景下的编程体验。Jscex项目完全使用JavaScript编写，能够在任意支持ECMAScript 3的执行引擎里使用，包括各浏览器及服务器端JavaScript环境（例如 Node.js ）。

目前Jscex主要包括以下几点功能：

JIT编译器：在运行时动态编译代码，主要用于开发环境。

AOT编译器：在执行前静态编译代码。静态编译后的代码可以脱离JIT编译器执行，因此主要用于生产环境。

异步编程库：基于Jscex生成的monadic代码，大大简化JavaScript下的异步编程难度。

异步编程的重要性不言而喻，对于JavaScript来说更是如此。JavaScript并没有提供任何能够阻塞代码执行过程的机制，任何一个“耗时”的操作都必须写成异步的模式。传统的异步操作会在完成时通过回调函数传回结果，我们可以在回调函数中进行下面的工作。

但这也是造成异步编程十分困难的主要原因。我们一直习惯于“线性”地编写逻辑，但是异步操作所带来的大量回调把我们的算法分解地支离破碎。我们不能用if来实现逻辑分支，也不能用while/for/do来实现循环。更不提异步操作之间的组合、错误处理以及取消操作了。

Jscex及它的异步编程库便是为了解决这些困难而诞生的。

目前Jscex主要包括以下几点功能：

JIT编译器：在运行时动态编译代码，主要用于开发环境。

AOT编译器：在执行前静态编译代码。静态编译后的代码可以脱离JIT编译器执行，因此主要用于生产环境。

异步编程库：基于Jscex生成的monadic代码，大大简化JavaScript下的异步编程难度。

Jscex及它的异步编程库便是为了解决这些困难而诞生的。

后来，官网帮这个tab插件扩展了一个自动切换的功能，只需要这样写就行：

 <script type="text/javascript"> 
$(function () {  
var t = $("#tabs").tabs();  
t.tabs("rotate", 3000, false);  
});  
</script> 
1.
2.
3.
4.
5.
6.

扩展的代码如下：

 $.extend($.ui.tabs.prototype, {  
rotation: null,  
rotate: function (ms, continuing) {  
var self = this,  
o = this.options;  
var rotate = self._rotate || (self._rotate = function (e) {  
clearTimeout(self.rotation);  
self.rotation = setTimeout(function () {  
var t = o.selected;  
self.select(++t < self.anchors.length ? t : 0);  
}, ms);  
if (e) {  
e.stopPropagation();  
}  
});  
var stop = self._unrotate || (self._unrotate = !continuing  
? function (e) {  
if (e.clientX) { // in case of a true click  
self.rotate(null);  
}  
}  
: function (e) {  
t = o.selected;  
rotate();  
});  
// start rotation  
if (ms) {  
this.element.bind("tabsshow", rotate);  
this.anchors.bind(o.event + ".tabs", stop);  
rotate();  
// stop rotation  
} else {  
clearTimeout(self.rotation);  
this.element.unbind("tabsshow", rotate);  
this.anchors.unbind(o.event + ".tabs", stop);  
delete this._rotate;  
delete this._unrotate;  
}  
return this;  
}  
});  
})(jQuery); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.

依然是那么费解的代码!在官方没有扩展之前，我们可以用Jscex介样子实现：

 <script type="text/javascript"> 
var swicthAsync = eval(Jscex.compile("async", function () {  
var tabCount = $("#tabs ul li").length;  
while (true) {  
for (var i = 0; i < tabCount; i++) {  
$await(Jscex.Async.sleep(2000));  
$('#tabs').tabs({ selected: i });  
}  
}  
}));  
$(function () {  
$("#tabs").tabs();  
swicthAsync().start();  
});  
</script> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

可以看得出来，这样的话Jscex没有对JqueryUI做任何介入，Jscex只是外部控制的一层壳。这样无法对测试出Jscex是否能与冲突或者异常，那么，我们就来用Jscex重写官方的扩展方法吧!

 $.extend($.ui.tabs.prototype, {  
rotation: null,  
rotate: function (ms, continuing) {  
var self = this,  
o = this.options;  
var swicthAsync = eval(Jscex.compile("async", function () {  
while (true) {  
for (var i = 0; i < self.anchors.length; i++) {  
$await(Jscex.Async.sleep(ms));  
self.select(i);  
}  
}  
}));  
swicthAsync().start();  
return this;  
}  
});  
})(jQuery); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

运行效果如下，一切正常!但是continuing参数暂时没有起作用，该参数是决定用户在选中后是否继续循环下去，这个就留个大家自己去完善吧~~~~

***的Jscex 库，请上https://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下载吧····

原文：http://www.cnblogs.com/iamzhanglei/archive/2011/08/21/2148628.html

【系列文章】