Shulou(Shulou.com)06/02 Report--

It is believed that many inexperienced people do not know what to do about how Jscex cuts into jQueryUI without trauma in JavaScript asynchronous programming. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

We use the tab plug-in:

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

Effect: you can switch tab over the mouse.

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

Currently, Jscex mainly includes the following functions:

JIT compiler: compiles code dynamically at run time, mainly for development environments.

AOT compiler: compiles code statically before execution. Statically compiled code can be executed without the JIT compiler, so it is mainly used in production environments.

Asynchronous programming library: based on the monadic code generated by Jscex, it greatly simplifies the difficulty of asynchronous programming under JavaScript.

The importance of asynchronous programming is self-evident, especially for JavaScript. JavaScript does not provide any mechanism to block code execution, and any "time-consuming" operation must be written in an asynchronous mode. The traditional asynchronous operation will return the result through the callback function when it is completed, and we can do the following in the callback function.

But this is also the main reason why asynchronous programming is very difficult. We have always been accustomed to writing logic "linearly", but a large number of callbacks caused by asynchronous operations have fragmented our algorithm. We cannot use if to implement logical branches, nor can we use while/for/do to implement loops. Not to mention the combination of asynchronous operations, error handling, and cancellation operations.

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

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

Currently, Jscex mainly includes the following functions:

JIT compiler: compiles code dynamically at run time, mainly for development environments.

AOT compiler: compiles code statically before execution. Statically compiled code can be executed without the JIT compiler, so it is mainly used in production environments.

Asynchronous programming library: based on the monadic code generated by Jscex, it greatly simplifies the difficulty of asynchronous programming under JavaScript.

The importance of asynchronous programming is self-evident, especially for JavaScript. JavaScript does not provide any mechanism to block code execution, and any "time-consuming" operation must be written in an asynchronous mode. The traditional asynchronous operation will return the result through the callback function when it is completed, and we can do the following in the callback function.

But this is also the main reason why asynchronous programming is very difficult. We have always been accustomed to writing logic "linearly", but a large number of callbacks caused by asynchronous operations have fragmented our algorithm. We cannot use if to implement logical branches, nor can we use while/for/do to implement loops. Not to mention the combination of asynchronous operations, error handling, and cancellation operations.

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

Later, the official website extended an automatic switching function for the tab plug-in, simply by writing:

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

The code for the extension 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.selecte; 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)

The code is still so inexplicable! Before the official extension, we can use the Jscex interface to implement:

Var swicthAsync = eval (Jscex.compile ("async", function () {var tabCount = $("# tabs ul li"). Length; while (true) {for (var I = 0; I < tabCount; iTunes +) {$await (Jscex.Async.sleep (2000)); $('# tabs'). Tabs ({selected: I});}); $(function () {$("# tabs"). Tabs (); swicthAsync (). Start ();})

It can be seen that in this way Jscex does not do any intervention in JqueryUI, and Jscex is just a shell of external control. It is impossible to test whether Jscex can conflict or exception, so let's rewrite the official extension method with 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; isheets +) {$await (Jscex.Async.sleep (ms); self.select (I);})); swicthAsync () .start (); return this }); (jQuery)

The operation effect is as follows, everything is normal! However, the continuing parameter does not work for the time being, which determines whether the user continues to loop after it is selected.

After reading the above, have you mastered how Jscex cuts into jQueryUI without invasiveness in JavaScript asynchronous programming? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.