日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
JavaScript異步編程之Jscex無創(chuàng)痕切入jQueryUI

我們使用tab插件：

 
 
 
 
    
  
  
  
  
  1.  
    2.

效果：鼠標劃過就可以切換tab.

 Jscex是JavaScript Computation EXpressions的縮寫，它為JavaScript語言提供了一個monadic擴展，能夠顯著提高一些常見場景下的編程體驗。Jscex項目完全使用JavaScript編寫，能夠在任意支持ECMAScript 3的執(zhí)行引擎里使用，包括各瀏覽器及服務器端JavaScript環(huán)境（例如 Node.js ）。

目前Jscex主要包括以下幾點功能：

JIT編譯器：在運行時動態(tài)編譯代碼，主要用于開發(fā)環(huán)境。

AOT編譯器：在執(zhí)行前靜態(tài)編譯代碼。靜態(tài)編譯后的代碼可以脫離JIT編譯器執(zhí)行，因此主要用于生產(chǎn)環(huán)境。

異步編程庫：基于Jscex生成的monadic代碼，大大簡化JavaScript下的異步編程難度。

異步編程的重要性不言而喻，對于JavaScript來說更是如此。JavaScript并沒有提供任何能夠阻塞代碼執(zhí)行過程的機制，任何一個“耗時”的操作都必須寫成異步的模式。傳統(tǒng)的異步操作會在完成時通過回調(diào)函數(shù)傳回結(jié)果，我們可以在回調(diào)函數(shù)中進行下面的工作。

但這也是造成異步編程十分困難的主要原因。我們一直習慣于“線性”地編寫邏輯，但是異步操作所帶來的大量回調(diào)把我們的算法分解地支離破碎。我們不能用if來實現(xiàn)邏輯分支，也不能用while/for/do來實現(xiàn)循環(huán)。更不提異步操作之間的組合、錯誤處理以及取消操作了。

Jscex及它的異步編程庫便是為了解決這些困難而誕生的。

Jscex是JavaScript Computation EXpressions的縮寫，它為JavaScript語言提供了一個monadic擴展，能夠顯著提高一些常見場景下的編程體驗。Jscex項目完全使用JavaScript編寫，能夠在任意支持ECMAScript 3的執(zhí)行引擎里使用，包括各瀏覽器及服務器端JavaScript環(huán)境(例如 Node.js )。

目前Jscex主要包括以下幾點功能：

JIT編譯器：在運行時動態(tài)編譯代碼，主要用于開發(fā)環(huán)境。

AOT編譯器：在執(zhí)行前靜態(tài)編譯代碼。靜態(tài)編譯后的代碼可以脫離JIT編譯器執(zhí)行，因此主要用于生產(chǎn)環(huán)境。

異步編程庫：基于Jscex生成的monadic代碼，大大簡化JavaScript下的異步編程難度。

異步編程的重要性不言而喻，對于JavaScript來說更是如此。JavaScript并沒有提供任何能夠阻塞代碼執(zhí)行過程的機制，任何一個“耗時”的操作都必須寫成異步的模式。傳統(tǒng)的異步操作會在完成時通過回調(diào)函數(shù)傳回結(jié)果，我們可以在回調(diào)函數(shù)中進行下面的工作。

但這也是造成異步編程十分困難的主要原因。我們一直習慣于“線性”地編寫邏輯，但是異步操作所帶來的大量回調(diào)把我們的算法分解地支離破碎。我們不能用if來實現(xiàn)邏輯分支，也不能用while/for/do來實現(xiàn)循環(huán)。更不提異步操作之間的組合、錯誤處理以及取消操作了。

Jscex及它的異步編程庫便是為了解決這些困難而誕生的。

后來，官網(wǎng)幫這個tab插件擴展了一個自動切換的功能，只需要這樣寫就行：

 
 
 
 
    
  
  
  
  
  1.   
    2.

擴展的代碼如下：

 
 
 
 
    
  
  
  
  
  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.

依然是那么費解的代碼!在官方?jīng)]有擴展之前，我們可以用Jscex介樣子實現(xiàn)：

 
 
 
 
    
  
  
  
  
  1.   
    2.

可以看得出來，這樣的話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參數(shù)暫時沒有起作用，該參數(shù)是決定用戶在選中后是否繼續(xù)循環(huán)下去，這個就留個大家自己去完善吧~~~~

***的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異步調(diào)用頁面后臺實例分析
  5. 一道面試題引發(fā)的面壁:認識JavaScript的settimeout和異步

當前文章：JavaScript異步編程之Jscex無創(chuàng)痕切入jQueryUI
本文網(wǎng)址：http://www.dlmjj.cn/article/djgphjs.html