Functions of asynchronous JS framework and implementation method _ javascript skills

This article mainly introduces the role and usage of the asynchronous JS Framework starting from the importance of asynchronous JS, and then introduces the asynchronous js framework to gain a deeper understanding of asynchronous JS step by step.

1. Importance of asynchronous JS
With the increasing position of the Web Platform, the JavaScript language that occupies the browser has become one of the most popular languages in the world, and even entered the Server programming field through Node. js. An important feature of JavaScript is "cannot block". "No" here refers to "shouldn't" rather than "cannot" (as long as the blocked API is provided ).

JavaScript is a single-threaded language, so once an API blocks the current thread, it is equivalent to blocking the entire program, so "Asynchronous" plays a very important role in JavaScript programming. The advantages of asynchronous programming for program execution are not discussed here. However, asynchronous programming is very troublesome for developers. It splits the program logic and splits the program logic, and completely loses the semantics.

Have you ever been so mad at ajax Asynchronization that you can only nest logic in the callback function? This code looks terrible. If synchronization is used, the Code does not need to be nested. However, if the request takes too long, the browser will be suspended due to thread blocking. It's really annoying. It seems that elegant code and good user experience cannot be achieved simultaneously.

2. asynchronous JS framework debut
Assume that there are three ajax requests: A, B, and C. B can be executed only after execution of A, and C can be executed only after execution of B. In this way, we have to nest it, execute B in the callback function of A, and then execute C in the callback function of B. This code is very unfriendly.
In line with the principle of 'building wheels professionally ', my asynchronous JS framework is ready!
General structure-　

 var js = new AsyncJs();      var func = js.Build(function () {        var a = _$Async({          url: "",          success: function () {          }        });        var b = _$Async({          url: "",          success: function () {          }        });        var c = _$Async({          url: "",          success: function () {          }        });      });　　　　　　eval(func);

A, B, and c will be executed in order and the thread will not be blocked.

Advantages
1. Good experience. The whole process is asynchronous and the thread will not be blocked.
2. Elegant code. No complex Nesting is required. The framework helps you automatically complete nesting. You only need to pay attention to the encoding itself, which is easy to maintain.
3. Easy to use. Build (function () {}) can be understood as the Thread of C #. I open another Thread to execute function () {} (JS is a single Thread, this should be emphasized !)

      new Thread(() =>      {        //dosomething      });

4. Simple and Easy to expand. (Use _ $ Async to wrap all methods to be executed ')
5. Easy to debug.
Disadvantages
1. build (function () {}). The function does not support custom local variables, such as var a = 1;
To use local variables, you can only:

　        var a = _$Async(function () {          return 1;        });

2. _ $ Async (); must end.
3. The build (function () {}) function cannot directly call external functions, as shown in figure

　　   function Test() {      var TestMethod = function () {        alert(1);      };      var func = js.Build(function () {        TestMethod();      });    }

Please use

      function Test() {      var TestMethod = function () {        alert(1);      };      var func = js.Build(function () {        _$Async(function () {          TestMethod();        });      });    }

Maybe you will be curious about how to implement it? Or why not encapsulate eval (r?

Implementation PrincipleIn fact, it is to analyze the function in the Build, and then dynamically combine and nest it, and then execute it. The reason why eval is not encapsulated is that if it is encapsulated, external variables cannot be used, so it must be put out.

3. Test code and results