JS異步編程三:Jscex無創(chuàng)痕切入jQUI
很多人可能會(huì)有個(gè)疑問,Jscex和其他類庫共同使用或者語法混用時(shí),會(huì)不會(huì)出現(xiàn)沖突或者異常?那么我們就來做個(gè)嘗試吧!
我們使用tab插件:
- $(function () {
- $("#tabs").tabs({ event: "mouseover" });
- });
后來,官網(wǎng)幫這個(gè)tab插件擴(kuò)展了一個(gè)自動(dòng)切換的功能,只需要這樣寫就行:
- $(function ()
- {var t = $("#tabs").tabs();
- t.tabs("rotate", 3000, false);
- });
擴(kuò)展的代碼如下:
- $.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;
- }
- });
依然是那么費(fèi)解的代碼!在官方?jīng)]有擴(kuò)展之前,我們可以用Jscex介樣子實(shí)現(xiàn):
- 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沒有對(duì)JqueryUI做任何介入,Jscex只是外部控制的一層殼。這樣無法對(duì)測(cè)試出Jscex是否能與沖突或者異常,那么,我們就來用Jscex重寫官方的擴(kuò)展方法吧!
- $.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;
- }
- });
但是continuing參數(shù)暫時(shí)沒有起作用,該參數(shù)是決定用戶在選中后是否繼續(xù)循環(huán)下去,這個(gè)就留個(gè)大家自己去完善吧~~~~
新的Jscex 庫,請(qǐng)上https://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下載。
原文鏈接:http://www.cnblogs.com/iamzhanglei/archive/2011/08/21/2148628.html
【編輯推薦】