JavaScript asynchronous programming: Jscex cutting-In jQueryUI without any trace

We use the tab plug-in:

 
 

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

Effect: You can switch the tab when you hover the mouse over it.

Jscex is short for JavaScript Computation EXpressions. It provides a monadic extension for the JavaScript language, which can significantly improve programming experience in some common scenarios. The Jscex project is fully written in JavaScript and can be used in any execution engine supporting ECMAScript 3, including various browsers and server-side JavaScript environments such as Node. js ).

Currently, Jscex mainly includes the following functions:

JIT compiler: It dynamically compiles code at runtime and is mainly used in the development environment.

AOT compiler: Compile the code statically before execution. Static compiled code can be executed without the JIT compiler, so it is mainly used in the production environment.

Asynchronous programming library: The monadic code generated based on Jscex greatly simplifies asynchronous programming in JavaScript.

The importance of asynchronous programming is self-evident, especially for JavaScript. JavaScript does not provide any mechanism to block code execution. Any "time-consuming" operation must be written in asynchronous mode. The traditional asynchronous operation will return the result through the callback function upon completion. We can perform the following work in the callback function.

But this is also the main cause of the difficulty in asynchronous programming. We have always been used to writing logic in a "linear" way, but the large number of callbacks produced by asynchronous operations break down our algorithms. We cannot use if to implement logical branches, nor use while/for/do to implement loops. Not to mention the combination between asynchronous operations, error handling, and cancellation operations.

Jscex and its asynchronous programming library were born to solve these difficulties.

Jscex is short for JavaScript Computation EXpressions. It provides a monadic extension for the JavaScript language, which can significantly improve programming experience in some common scenarios. The Jscex project is fully written in JavaScript and can be used in any execution engine supporting ECMAScript 3, including various browsers and server-side JavaScript environments (such as Node. js ).

Currently, Jscex mainly includes the following functions:

JIT compiler: It dynamically compiles code at runtime and is mainly used in the development environment.

AOT compiler: Compile the code statically before execution. Static compiled code can be executed without the JIT compiler, so it is mainly used in the production environment.

Asynchronous programming library: The monadic code generated based on Jscex greatly simplifies asynchronous programming in JavaScript.

The importance of asynchronous programming is self-evident, especially for JavaScript. JavaScript does not provide any mechanism to block code execution. Any "time-consuming" operation must be written in asynchronous mode. The traditional asynchronous operation will return the result through the callback function upon completion. We can perform the following work in the callback function.

But this is also the main cause of the difficulty in asynchronous programming. We have always been used to writing logic in a "linear" way, but the large number of callbacks produced by asynchronous operations break down our algorithms. We cannot use if to implement logical branches, nor use while/for/do to implement loops. Not to mention the combination between asynchronous operations, error handling, and cancellation operations.

Jscex and its asynchronous programming library were born to solve these difficulties.

Later, the official website helped the tab plug-in expand a function of automatic switch, just write it like this:

 
 

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

The extension code is as follows:

 
 

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

Still so confusing code! Before official expansion, we can use Jscex to describe:

 
 

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

As you can see, Jscex does not intervene in JqueryUI. Jscex is only a shell of external control. In this way, we cannot test whether Jscex can conflict with or be abnormal. Therefore, we can use Jscex to rewrite the official extension method!

 
 

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

The running effect is as follows: everything is normal! However, the continuing parameter does not take effect for the moment. This parameter determines whether the user can continue the loop after the user selects the parameter. You can complete this parameter by yourself ~~~~

For the latest Jscex library, please upload ····

Original article: http://www.cnblogs.com/iamzhanglei/archive/2011/08/21/2148628.html

Series of articles]