javascript异步编程系列【三】----Jscex无创痕切入JqueryUI

很多人可能会有个疑问，Jscex和其他类库共同使用或者语法混用时，会不会出现冲突或者异常？那么我们就来做个尝试吧!

我们使用tab插件：

$(function () {
$("#tabs").tabs({ event: "mouseover" });
});

后来，官网帮这个tab插件扩展了一个自动切换的功能，只需要这样写就行：

$(function () {
var t = $("#tabs").tabs();
t.tabs("rotate", 3000, false);
});

 

扩展的代码如下：

        $.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;
            }
        });

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

        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没有对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;
            }
        });

但是continuing参数暂时没有起作用，该参数是决定用户在选中后是否继续循环下去，这个就留个大家自己去完善吧~~~~

最新的Jscex 库，请上https://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下载吧····

【更多javascript异步编程系列】

javascript异步编程系列【一】----用Jscex画圆

javascript异步编程系列【二】----Jscex模拟重力场与google苹果logo的比较