JavaScript異步編程中Jscex如何無創痕切入jQueryUI

JavaScript異步編程中Jscex如何無創痕切入jQueryUI，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

我們使用tab插件：

<script> $(function () {  $("#tabs").tabs({ event: "mouseover" });  });  </script>

效果：鼠標劃過就可以切換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插件擴展了一個自動切換的功能，只需要這樣寫就行：

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

擴展的代碼如下：

 $.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介樣子實現：

 <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>

可以看得出來，這樣的話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的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！