The function and implementation method of asynchronous JS framework _javascript Skills

Starting from the importance of asynchronous JS, and then introducing the asynchronous JS Framework, step-by-step in-depth understanding of asynchronous JS.

1. The importance of asynchronous JS
With the rise of the Web platform, JavaScript, the browser-hogging language, has become one of the most popular languages in the world, even through node.js into the domain of server programming. An important feature of JavaScript is "can't block," where "can't" means "not" rather than "can't" (as long as the blocking API is provided).

JavaScript is a single-threaded language, so "asynchronous" plays an important role in JavaScript programming once an API blocks the current thread, which is equivalent to blocking the entire program. The benefits of asynchronous programming for program execution there is little to talk about, but asynchronous programming is a hassle for developers, which splits the logic of the program into pieces and completely loses the semantics.

Have you ever been mad because Ajax is asynchronous and only nesting logic in the callback function? This kind of code looks very bad. If you use synchronization, your code may not be nested. However, if the request is too long, it will cause the browser to suspend animation because of thread blocking. It's very upsetting. It seems that elegant code and a good user experience can not be both.

2. Asynchronous JS frame debut
If there are now 3 Ajax requests, respectively, A,b,c. A performs b,b execution before executing c. So we have to nest, execute B in the callback function of a, and execute C in the callback function of B. This kind of code is very unfriendly.
The spirit of ' professional wheel ' principle, my asynchronous JS framework set out!
Approximate 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);

The a,b,c is executed sequentially and the thread is not blocked.

Advantage
1. A good experience. The thread does not block when the whole process is asynchronous.
2. Code Elegance. Without complex nesting, the framework helps you do nested tasks automatically, and you only need to focus on coding itself, easy to maintain.
3. Simple and easy to use. Build (function () {}) You can understand the thread of C #, I open more than one thread to execute function () {} (JS is single-threaded, this should be emphasized!) ）

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

4. Simple and easy to expand. (Please put all the methods you want to perform with _$async ')
5. Easy to Debug.
Disadvantage
1.build (function () {}), the function does not support custom local variables, such as Var a=1;
If you want to use local variables, you can only:

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

2._$async () must be a '; ' End.
The external function cannot be called directly within the 3.build (function () {}) function, as

   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 everyone will wonder, how did it happen? Or why not encapsulate the eval (r)?

The principle of implementation is to analyze the function within the build, then dynamically combine it, nest it, and execute it. The reason that eval is not encapsulated is that if you encapsulate it, you won't be able to use external variables, so you have to put it out.

3. Test code and Effect

Background C # code

 protected void Page_Load (object sender, EventArgs e)
    {
      string val = request.querystring["Val"];
      if (!string. IsNullOrEmpty (val))
      {
        thread.sleep);
        Response.Write (val + "return result");
        Response.End ();
      }
    

Effect Chart:

You can see that execution is done sequentially and the thread is not blocked.

The above is the introduction of the asynchronous JS framework of the role and implementation of the method, I hope to help you learn, really understand the importance of asynchronous JS.