javascript異步編程系列【三】—-Jscex無創痕切入JqueryUI

很多人可能會有個疑問,Jscex和其他類庫共同使用或者語法混用時,會不會出現沖突或者異常?那麼我們就來做個嘗試吧。

我們使用tab插件:

    <script>
$(function () {
$("#tabs").tabs({ event: "mouseover" });
});
</script>
效果如下:鼠標劃過就可以切換tab.

Jscex介紹 Jscex功能 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(5000));
self.select(i);
}
}
}));
swicthAsync().start();
return this;
}
});
})(jQuery);

運行效果如下,一切正常!但是continuing參數暫時沒有起作用,該參數是決定用戶在選中後是否繼續循環下去,這個就留個大傢自己去完善吧~~~~

 

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

目前Jscex主要包括以下幾點功能:
JIT編譯器:在運行時動態編譯代碼,主要用於開發環境。
AOT編譯器:在執行前靜態編譯代碼。靜態編譯後的代碼可以脫離JIT編譯器執行,因此主要用於生產環境。
異步編程庫:基於Jscex生成的monadic代碼,大大簡化JavaScript下的異步編程難度。

 

You May Also Like