JavaScript异步编程之Jscex无创痕切入jQueryUI

我们使用tab插件：

 
 
 
 
    
  
  
  
  
  1.  
    2.

效果：鼠标划过就可以切换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插件扩展了一个自动切换的功能，只需要这样写就行：

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2. $(function () {  
    3. 
  
  
  
  
  3. var t = $("#tabs").tabs();  
    4. 
  
  
  
  
  4. t.tabs("rotate", 3000, false);  
    5. 
  
  
  
  
  5. });  
    6. 
  
  
  
  
  6.  
    7.

扩展的代码如下：

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

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

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

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

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

运行效果如下，一切正常!但是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

【系列文章】

  1. Jscex模拟重力场与google苹果logo的比较
  2. JavaScript异步编程之用Jscex画圆
  3. 使用Jscex改善JavaScript异步编程体验
  4. jQuery异步调用页面后台实例分析
  5. 一道面试题引发的面壁:认识JavaScript的settimeout和异步

网页名称：JavaScript异步编程之Jscex无创痕切入jQueryUI
URL地址：http://www.shufengxianlan.com/qtweb/news44/461644.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

App设计知识

同城分类信息

盐亭网站设计　　 　高端网站策划　　 　IDC机房托管　　 　成都小程序开发　　 　成都网站建设　　 　网站排名优化　　 　富顺网站建设　　 　成都微信小程序开发　　 　成都商城网站制作　　 　标志设计　　 　成都网站优化　　 　平昌保洁　　 　证企宝企业服务　　 　成都营销型网站建设　　 　APP定制　　 　成都网站设计　　 　成都户外广告牌设计　　 　瑞杰企业管理　　 　移动服务器托管　　 　达州主机托管