JavaScript异步编程中Jscex如何无创痕切入jQueryUI，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
目前成都创新互联已为1000多家的企业提供了网站建设、域名、网络空间、网站运营、企业网站设计、桥东网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
我们使用tab插件：
效果：鼠标划过就可以切换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是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及它的异步编程库便是为了解决这些困难而诞生的。
后来，官网帮这个tab插件扩展了一个自动切换的功能，只需要这样写就行：
$(function () { var t = $("#tabs").tabs(); t.tabs("rotate", 3000, false); });
扩展的代码如下：
$.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);依然是那么费解的代码!在官方没有扩展之前，我们可以用Jscex介样子实现：
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(); });
可以看得出来，这样的话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);运行效果如下，一切正常!但是continuing参数暂时没有起作用，该参数是决定用户在选中后是否继续循环下去。
看完上述内容，你们掌握JavaScript异步编程中Jscex如何无创痕切入jQueryUI的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
本文题目：JavaScript异步编程中Jscex如何无创痕切入jQueryUI
文章路径：
http://bjjierui.cn/article/gcisei.html
